Avatar billede iwersen Nybegynder
18. september 2007 - 18:45 Der er 20 kommentarer og
1 løsning

Hele headeren skal linke!

Hej

Jeg kunne godt tænke mig at headeren på mit wordpress-site linker til forsiden af sitet.

Header-billedet hedder "r.jpg"!

Jeg har skrevet css-koden herunder, da jeg kunne forestille mig at det var her løsningen skulle findes.


body {

    margin: 0px;

    padding: 0px;

    color: #b6b6b6;
    background: #000 url(images/bg.jpg) repeat-y center;
    font: normal 13px/18px "Trebuchet Ms", "Lucida Grande", sans-serif;
}

#wrap {

    width: 800px;

    overflow: hidden;

    position:relative;

    margin: 0px auto;

    background: #000;

}

#content {

    width: 550px;

    float: left;

    display:inline;

    text-align: justify;

    padding: 10px;

    margin: 8px;

}

#navig {

    height: 49px;

    width: 790px;

    margin-right: auto;

    margin-left: auto;

}



#sidebar {

    width: 170px;

    float: right;

    line-height: 1.5em;

    display:inline;

    margin: 8px 8px 8px 0px;

    padding: 10px;

    font-size:10px;

}

#pages h1{

    margin:0px;

    padding:0px;

}

#pages h1 a{

    text-transform:uppercase;

    text-decoration:none;

    color:#ccc;

    font: 15px Arial, Helvetica, sans-serif;

    margin:0px;

    padding:13px 0px 0px 10px;

    letter-spacing: -1px;

    float: left;

}

#pages h1 a:hover{

    text-decoration:underline;

}



h3, h4 {

    padding-top: 5px;

    padding-bottom: 15px;

}

#logo {
   
    background: url('images/r.jpg') no-repeat;

    height: 255px;

    width: 800px;

    margin-right: auto;

    margin-left: auto;
    margin-bottom: 20px;

    }
#name {
    float: right;
    padding: 100px;
    padding-right: 150px;
    color: #f1b24a;
    font-size: 30px;
    font-weight: bold;
}
#name a:link{
   
    color: #f1b24a;
   
    font-weight: bold;
}
#tagline {

    height: 20px;

    text-align: right;

    margin-top: 20px;

    margin-right: 25px;

    font-size: 10px;

    font-weight: bold;

    text-transform: uppercase;

    color: #FFFFFF;

}

div#pages {

    height: 40px;

    margin: 0px auto 0px;

    width:800px;

    background: #2d2d2d;



}



div#pages ul {

    padding: 10px 0px 0px;

    white-space: nowrap;

    list-style-type: none;

    margin: 0px;   

}

div#pages ul li {

    float:right;

}



div#pages ul li.current_page_item a  {

    text-decoration: underline;

}

div#pages ul li a {

    display: block;

    text-decoration: none;

    border-left: 1px dotted #333333;

    font-size:12px;

    padding:5px 10px 5px 10px;

    text-transform: uppercase;

    color: #999999;

}

div#pages ul li a:hover {

    color: #f1b24a;

}





#footer {

    clear: both;

    text-align: center;

    height: 40px;

    border-top-width: 1px;

    border-top-style: dotted;

    border-top-color: #666666;

    width: 774px;

    padding: 0px;

    margin-right: auto;

    margin-left: auto;

}

#footer p{

    padding:10px;

    margin:0px;

}



.entry{

    padding-top: 0px;

    padding-bottom: 30px;

    padding-left: 0px;

    /*font-size: 0.80em;*/

    line-height: 1.5em;

}

.firstpost {

    margin-bottom:15px

}

h3.etitle, h3 {

    padding-top: 0px;

    padding-right: 0px;

    padding-bottom: 0px;

    margin-top: 0;

    margin-right: 0;

    margin-bottom: 5px;



}

h3.etitle a, h3.etitle a:visited, h3 a{

    color: #f1b24a;

    border-style: none;

    font-size: 18px;

    text-transform: none;
    font-variant: small-caps;
    font-weight: bold;
}



h3.etitle a:hover, h3 a:hover{

text-decoration:underline;}

.emeta{

    height: 35px;

    margin-top: 0;

    color: #ccc;

    border-top:dotted 1px #666666;

    padding-top:4px;

    margin-bottom: 8px;
    font: 11px Arial, Helvetica, Geneva, sans-serif;
}

.emeta a img{

    border:none;

}



.ebody a {

    height: 16px;

    margin-top: 0;

    font-size: 11px;

    color: #f1b24a;
   
   

}



.ebody img {

    padding: 4px;

    border: 1px solid #DFDFDF;

}

.ebody ul {

    margin-left: 20px;

    padding-left:0px;

    list-style-type: none;

}

.ebody ol{

    margin-left:20px;

    padding-left:0px;

}

.ebody ul li {

    list-style:square;

}

.commentlink img {

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

}



h4, h3, h2, #cblock h2 {

    margin: 0;

    padding: 0px;

    font-size: 11px;

    font-style: normal;

    font-weight: bold;

    font-variant: normal;

    color:#999999;

}

h2{

    margin-bottom: 10px;

    font-size: 14px;

}

a, a:visited{

    color: #f1b24a;

    text-decoration:none;
}

a:hover{

    text-decoration:underline;

}

.ebody p{

margin:8px 0;

padding:0;

}

.ebody ul {

    margin-left: 30px;

    padding-left:0px;

    list-style-type: none;

}

.ebody ol{

    margin-left:30px;

    padding-left:0px;

}

.ebody ul li {

    list-style:square;

}
#sidebar{
    background-color: #000;
}

#sidebar h2 {

    color: #bfbfbf;

    margin-top: 5px;

    margin-right: 0px;

    margin-bottom: 8px;

    padding-top: 0px;

    padding-right: 0px;

    padding-bottom: 4px;

    padding-left: 0px;

    border-bottom: 1px solid #f1b24a;

    font-size: 11px;

    text-transform: uppercase;
}

#sidebar ul {

    list-style: none;

    margin: 0 0 18px 0;

    padding: 0;

}



#sidebar ul li {

    display: inline;

    margin:0;

    padding:0

}

#sidebar li{

    list-style: none;
}



#sidebar ul li a {
    border-bottom: 1px dotted #666666;

    color: #f1b24a;

    display: block;
    text-decoration: none !important;

    margin-left: 0px;

    padding: 4px 0px 4px 25px;
   
    background-image: url('images/bull.gif');

    background-repeat: no-repeat;

    background-position: 10px 50%;
    font-size: 13px;
}





#sidebar ul li a:hover{

    color: #f1b24a;

    background-color: #666666;

}


ul.list-blogroll li a{

border-bottom: 1px dotted #666666;

    color: #f1b24a;

    display: block;

    text-decoration: none !important;

    margin-left: 0px;

    padding: 4px 0px 4px 25px;
   
    background-image: url('images/bull.gif');

    background-repeat: no-repeat;

    background-position: 10px 50%;

}



#searchdiv {

    margin-top: 8px;

    margin-bottom: 15px;

}

/*blogroll widget */
ul.list-blogroll li{
    background: url(img/arrow.gif) no-repeat !important;
    padding-left: 22px !important;
}

/*meta  widget*/
ul.list-meta li{
    background: url(img/arrow.gif) no-repeat !important;
    padding-left: 22px !important;
}
/*rss widget */
ul.list-rss li{
    background: url(img/arrow.gif) no-repeat !important;
    padding-left: 22px !important;
}
/*category  widget */
ul.list-cat li, li.bar_categories li{
    background: url(img/arrow.gif) no-repeat !important;
    padding-left: 22px !important;
}
/*recent  widget  */
ul.list-rec li, li.bar_comments ul li {
    background: url(img/arrow.gif) no-repeat !important;
    padding-left: 22px !important;
}
/*archives widget */
ul.list-archives li, li.bar_archives li{
    background: url(img/arrow.gif) no-repeat !important;
    padding-left: 22px !important;
}
/*pages widget */
ul.list-page li, li.bar_pages li, li.bar_recent_entries li{
    background: url(img/arrow.gif) no-repeat !important;
    padding-left: 22px !important;
}
/*sub-pages widget */
ul.list-page li ul li, li.bar_pages li ul li{
    background: url(img/arrow.gif) no-repeat !important;
    padding-left: 15px !important;
}
/*calendar bar widget */
li.bar_calendar td {
    padding: 1px 7px;
}

/*text bar */
.textbar {
    padding-top: 5px;
}
}
#searchform br {
    display: none;
}
#searchform #s {
    width: 100px;
    height: 22px;
    padding: 4px 5px 0px 5px;
    border: 1px dotted #f1b24a;
    background: #121605;
    margin-right: 2px;
    color: #f1b24a;
    font-weight: normal;
}
/* search form button - to specify button only use input[type="submit"] */
#searchform input {
    background: #121605;
    border: 1px dotted #f1b24a;
    width: 25px;
    height: 28px;
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #f1b24a;
    vertical-align: middle;
}
.clink {

    background-image:url('.images/comments.gif');

    background-repeat: no-repeat;

    background-position: left center;

    padding-left:16px

}



#cblock h2{

    padding:2px;

    margin-bottom:10px;

    margin-top:30px;

}

#cblock {

    float:left;

    padding-top: 0px;

    padding-bottom: 20px;



    text-align: left;    /*font-size: 0.8em;*/

}



ol#commentlist {

    margin-top:0px;

    padding: 5px;

    margin-left: 0px;

    list-style-type: none;

}

.commentdate {

    font-size:0.8em;

    padding-left:5px;

}

#commentlist li  p{

    margin-bottom: 8px;

    line-height: 20px;

    padding:0;

}



.commentname {

    margin: 0;

    padding: 5px;

}



.commentinfo{

clear:both;

}



.commenttext {

    clear: both;

    margin-top: 0px;

    margin-bottom: 10px;

    padding: 10px;

    width:450px;

    background: #333333;

}



.commenttext-admin {

    clear: both;

    margin-top: 0px;

    margin-bottom: 10px;

    padding: 10px;

    width:450px;

    background: #333333;

}



#commentsformheader{

    padding-left:0px;

}



#commentsform{

    margin-top:0;

    text-align:center;

    padding-top: 0px;

    padding-right: 0px;

    padding-bottom: 0px;

    padding-left: 0px;

}



#commentsform form{

    text-align:left;

    margin:0px;

}



#commentsform form textarea{

    width:99%;

}

#commentsform p{

    margin:5px;

}

p.comments_link  img{

    margin: 0px;

    padding: 0px;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;

}

blockquote{

    font-style: italic;

    color: #999999;

}





table{

    margin:10px;

}

td, th{

    padding:3px;

    font-weight:normal;



}

.date {

    float:left;

    height:45px;

    width:30px;

margin-top:2px;

    margin-right:10px;

    padding:2px;

    background:#333;

border:1px dotted #000;

    }

.date p {

    text-align:center;

    color: #CCCCCC;

    margin:0 0 0 0px;

    text-transform:uppercase;

    font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;

    }

.date span.day {

    font-size: 23px;

    display:block;

color:#CCCCCC;
    font-style: italic;
    }

.date span.month {

    font-size: 11px;

    height:11px;

    display:block;

padding: 1px 2px 4px;

border-bottom: 1px dotted #7f7f7f;

    margin-bottom:4px;
    border-top: 2px solid #7f7f7f;
    font-weight: bold;
    font-style: italic;
}

#rss{
  width:25px;
   
    background-image: url(images/rss.png);
    display: block;
    height: 25px;
}

/* My Comment */

/* My Comment */
#rss a{
  width:25px;
    height: 30px;
    text-decoration: none;
    display: block;
   
}
Avatar billede jakobdo Ekspert
18. september 2007 - 19:39 #1
Et link laves direkte i html via:
<a href="forside" title="Hop til forsiden">Forside eller <img src="r.jpg" alt="r.jpg" /></a>
Det kan du ikke lave i CSS.
Avatar billede iwersen Nybegynder
18. september 2007 - 19:53 #2
Okay..

Men forstår sgu ikke helt hvordan jeg så får headeren til at linke.
Avatar billede jakobdo Ekspert
18. september 2007 - 19:59 #3
Hvad er din header?
Er det en div eller?
Avatar billede iwersen Nybegynder
18. september 2007 - 20:13 #4
Hvordan finder jeg ud af det?
Avatar billede jakobdo Ekspert
18. september 2007 - 20:21 #5
Du kunne starte med at kigge i din kode! :o)
Du har garanteret en side som hedder index.php, der starter det hele.
Så kunne jeg forstille mig WP bruger template-system til at opbygge design. :o)
Avatar billede iwersen Nybegynder
18. september 2007 - 20:25 #6
Ja min index.php-fil ser ud som følger:

<?php
get_header();
?>

<div id="content">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div class="entry <?php if(is_home() && $post==$posts[0] && !is_paged()) echo ' firstpost';?>">
<div class="date"><p><span class="month"><?php the_time('M') ?></span><span class="day"> <?php the_time('j') ?> </span></p></div> 
<h3 class="etitle" id="post-<?php the_ID(); ?>"> <a href="<?php the_permalink() ?>" rel="bookmark">
      <?php the_title(); ?>
      </a> </h3>
      <div class="emeta">
            <?php //the_time('F dS, Y');
            echo "  Kategori: ";the_category(',');?>
        </div>
    <div class="ebody">
      <?php the_content(__('L&aelig;s mere'));?>
     
<?php            comments_popup_link( 'Ingen kommentarer ','1 kommentar ','% kommentarer ',    'clink ','Det er ikke muligt at kommentere på dette indlæg ');
            edit_post_link(__('<strong>Edit</strong>'));?>
     
    </div>
    <!--
    <?php trackback_rdf(); ?>
    -->
  </div>
  <?php comments_template(); // Get wp-comments.php template ?>
  <?php endwhile; else: ?>
  <p>
    <?php _e('Beklager, ingen indl&aelig;g matchede dine kriterier.'); ?>
  </p>
  <?php endif; ?>
  <p>
    <?php posts_nav_link(' &#8212; ', __('&laquo; Sidste side'), __('N&aelig;ste side &raquo;')); ?>
  </p>
</div>
<?php get_sidebar(); ?>
<!-- The main column ends  -->
<?php get_footer(); ?>
Avatar billede jakobdo Ekspert
18. september 2007 - 20:35 #7
Så er det spørgsmålet hvad funktionen get_header() gør?
Eller om det er en del af <div id="content">
Hvilke koder har du omkring dit billede: r.jpg?
Avatar billede iwersen Nybegynder
18. september 2007 - 20:54 #8
Det eneste sted r.jpg optræder er i CSS-filen, som står øverst i dette indlæg.
Avatar billede jakobdo Ekspert
18. september 2007 - 21:01 #9
Har du et link til din hjemmeside?
Avatar billede iwersen Nybegynder
18. september 2007 - 21:03 #10
Avatar billede jakobdo Ekspert
18. september 2007 - 21:12 #11
Jeg formoder det er dette du gerne vil have som et link:

<div id="logo">
<div id="name"><a href="http://tommyguns.dk"></a><div id="tagline"></div></div>

</div>
Avatar billede iwersen Nybegynder
18. september 2007 - 21:15 #12
Ja..!

Men hvor sætter jeg det ind?
Avatar billede iwersen Nybegynder
18. september 2007 - 21:19 #13
Nu er siden pludselig gået helt ned!
Avatar billede iwersen Nybegynder
18. september 2007 - 21:34 #14
Kan ikke rigtigt finde ud af hvor jeg skal indsætte dette:

<div id="logo">
<div id="name"><a href="http://tommyguns.dk"></a><div id="tagline"></div></div>
</div>
Avatar billede jakobdo Ekspert
18. september 2007 - 21:50 #15
Kan du finde dette kode i dine filer:

<div id="logo">
<div id="name"><a href="http://tommyguns.dk"></a><div id="tagline"></div></div>
</div>
Avatar billede iwersen Nybegynder
18. september 2007 - 21:57 #16
Ja.. Noget der ligner ii hvert fald.

Det er fra filen header.php

<div id="logo">
<div id="name"><a href="<?php bloginfo('siteurl'); ?>"><?php bloginfo('name'); ?></a><div id="tagline"><?php bloginfo('description'); ?></div></div>

</div>
Avatar billede jakobdo Ekspert
18. september 2007 - 22:06 #17
Du bør nok tage en backup af din side, inden vi betynder at lege.
Men prøve følgende:

<div id="logo">
<a href="<?php bloginfo('siteurl'); ?>"><div id="name"><?php bloginfo('name'); ?><div id="tagline"><?php bloginfo('description'); ?></div></div></a>
</div>

Og måske dette giver bedre resultat:

<a href="<?php bloginfo('siteurl'); ?>">
<div id="logo">
<div id="name"><?php bloginfo('name'); ?><div id="tagline"><?php bloginfo('description'); ?></div></div>
</div>
</a>
Avatar billede iwersen Nybegynder
18. september 2007 - 22:12 #18
Jaa!!

Det er perfekt! Tak for hjælen!

Det var dette forslag som virkede:)

<a href="<?php bloginfo('siteurl'); ?>">
<div id="logo">
<div id="name"><?php bloginfo('name'); ?><div id="tagline"><?php bloginfo('description'); ?></div></div>
</div>
</a>
Avatar billede jakobdo Ekspert
18. september 2007 - 22:14 #19
Svar!
Avatar billede iwersen Nybegynder
18. september 2007 - 22:27 #20
Tak!
Avatar billede jakobdo Ekspert
19. september 2007 - 07:29 #21
Takker for point.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

IT-JOB

Politiets Efterretningstjeneste

IT Sikkerhedsarkitekt i PET

Banedanmark

Stamdatakoordinator

Skal lukkes AL Sydbank A/S (tidligere Arbejdernes Landsbank)

Teamleder til AL Sydbanks GDPR & Tech Regulation i Aabenraa