27 {{ upvoteCount | shortNum }}
27 {{ upvoteCount | shortNum }}

CSS: How to header link?

by Mr Bill
19 replies
  • WEB DESIGN
    • |
Hi, I've been battling this for a few hours and can't get it to work. Other times I was able to find the code and just add an <a href=...etc to the code but this time I can't figure it out. The way this theme works must be different to what I'm used to working with.

The theme is a modified premium iThemes wordpress theme called "Bravo".

I've tried looking in the header.php and tried wrapping <a href= around...

Code:
<a href="http://www.domain.com"><div id="header" class="clearfix"></a>
which was originally just...

Code:
<div id="header" class="clearfix">
Am I looking in the wrong place?

Should I be adding some sort of linking code to this section in the style.css code below?

Code:
#header {
position: relative;
width: 960px;
clear: both;
background-image: url(images/header.jpg);
background-repeat:no-repeat;
margin: 0 auto;
height: 100px;
padding: 0;
If so, what is the code to link back to the raw domain (e.g. YourWebVoice)
#blog #css #header #link #make
  • Profile picture of the author orb
    A <div> can't be a link. This would be a quick fix

    <div id="header" class="clearfix"><a href="http://www.domain.com"><img src="images/header.jpg" alt="header.jpg" width="x" height="x" /></a></div>
    {{ DiscussionBoard.errors[5796501].message }}
    • Profile picture of the author Mr Bill
      Originally Posted by orb View Post

      A <div> can't be a link...
      Seems the workaround is to wrap a div with an anchor tag and it can become a link.
      {{ DiscussionBoard.errors[5796823].message }}
  • Profile picture of the author kdm5157
    Hey Mr Bill

    The #header CSS basically says "find the HTML element that has an ID of header". Originally, it is a DIV and it will change the background of that DIV and place it appropriately. You actually want a link to take this place. That means you need to create the A tag (a link) and give it the ID header. Then the CSS will change it as you want.

    This should work:

    HTML Code:
    <a href="your-domain-here" id="header" class="clearfix"></a>
    You would need to add this line to the #header code as well:

    Code:
    display: block;
    Hope that helps - keep us updated

    I have another solution if that was not effective.
    {{ DiscussionBoard.errors[5796512].message }}
  • Profile picture of the author Mr Bill
    Ok, this is interesting...

    As it turns out, my first fix above worked but it didn't produce a hand cursor when you hovered over the image (which is why I didn't think it was working. If I actually clicked on the (what looked like an inert) header image it become a hand cursor while I was clicking and sent me to the link destination.

    Anyway, Orb (thanks) I tried your solution but it didn't work but it did produce a text link which was hard left aligned (the page has center aligned content). Weird. So it seems to have inserted a text link under the header banner and left aligned it.

    KDM, I also tried your solution and it didn't work...until I put the block code in the style.css as you said - then it worked (with a hand/link cursor when hovering) but ALSO produced the same text link under the header banner and also hard left aligned.

    Weird.

    So, I've either got to back to my original method of wrapping the div around an anchor (<a href...etc) and figure out a way to add a hand cursor as I hover or wait for further instructions.
    {{ DiscussionBoard.errors[5796626].message }}
    • Profile picture of the author kdm5157
      What did the text link say?? That is odd. Of course I haven't seen the actual code though

      If you want to use your original solution you can add

      Code:
      cursor: pointer;
      To your CSS for #header. That forces the pointer. My fear is that it's not actually "working" in other browsers. You should check sites in Internet Explorer, Firefox, Chrome, and Safari.
      {{ DiscussionBoard.errors[5796652].message }}
  • Profile picture of the author Mr Bill
    The site is here if you want to have a look.

    The text link says the domain.com (no www. or http://...just the domain.com)
    {{ DiscussionBoard.errors[5796676].message }}
  • Profile picture of the author Mr Bill
    Ok, it's all working now with my anchor wrapped div link and (thanks to JDM) and the cursor: pointer style sheet tip.

    For future reference... in the header.php I turned this...

    Code:
    <div id="header" class="clearfix">
    into this...

    Code:
    <a href="http://www.domain.com"><div id="header" class="clearfix"></a>
    and then went to the style sheet and found the header section and turned this...

    Code:
    #header {
position: relative;
width: 960px;
clear: both;
background-image: url(images/header.jpg);
background-repeat:no-repeat;
margin: 0 auto;
height: 100px;
padding: 0;
}
    into this...

    Code:
     
#header {
position: relative;
width: 960px;
clear: both;
background-image: url(images/header.jpg);
background-repeat:no-repeat;
margin: 0 auto;
height: 100px;
cursor: hand;
padding: 0;
}
    Done! I now have a logo which when clicked on will navigate you back to the home page as people expect. Not sure why wordpress decided to extinguish this traditional form of navigation but anyway.

    Next question:

    How do I add an alt="logo slogan" to the image?
    {{ DiscussionBoard.errors[5796811].message }}
    • Profile picture of the author Mr Bill
      Originally Posted by Mr Bill View Post

      Next question:

      How do I add an alt="logo slogan" to the image?
      Solved with a google search..."Add a title tag" - which I did, which worked.

      The header code in the header.php now looks like this...


      Code:
      <a href="http://www.domain.com" title="My Slogan."> <div id="header" class="clearfix"> </a>

      Excellent.

      Warrior forum to the rescue once again. Thanks to all.
      {{ DiscussionBoard.errors[5796851].message }}
      • Profile picture of the author kdm5157
        Mr Bill, I hate to tell you but your site is not doing what you want. The only browser it is displaying as you want it is Internet Explorer (and the old versions no less!).

        You really should go back and implement my first solution. Or better yet, do this:

        1) change your HTML code for your header to be:
        HTML Code:
        <div id="header" class="clearfix"><a href="your-domain" title="Your Slogan."></a></div>
        2) change your CSS code to be:
        Code:
        #header {
position: relative;
width: 960px;
clear: both;
background-image: url(images/header.jpg);
background-repeat:no-repeat;
margin: 0 auto;
height: 100px;
padding: 0;
}

#header a {
display: block;
width: 960px;
height: 100px;
}
        3) Sleep easy knowing everyone sees what you want no matter what browser they use


        // KM
        {{ DiscussionBoard.errors[5797091].message }}
  • Profile picture of the author Mr Bill
    Bummer!

    Ok, well I've done that and it doesn't work. The linking has stopped working (in IE and FF). Not only that but now (with your code above) the phantom text link is back again.

    Can you see it?
    {{ DiscussionBoard.errors[5797146].message }}
    • Profile picture of the author kdm5157
      I do see it. I see what's causing that "phantom" link too. You have a DIV with ID title and it has a link inside of it. Your code that's getting generated is this:

      HTML Code:
      <div id="header" class="clearfix"><a href="http://www.YourWebVoice.com" title="YourWebVoice.com - Add audio to your sales page, ebook or report."></a></div>

<!-- div id="login">
   <a href="http://www.yourwebvoice.com/wp-login.php">Log in</a> 
</div -->

<div id="title">
   <a href="http://www.yourwebvoice.com" title="Return to Home">YourWebVoice.com</a>
</div>
      I have no clue why it would be there sometimes and wouldn't others...I didn't look at the code generated before this time so I don't know if that title DIV was there before.

      Make these two changes and see what happens.

      1) change the #header a CSS to #header > a

      2) add this line to your CSS for the #header #title block:

      Code:
      display: none;
      Hope that works!


      EDIT: After looking at the code more, I noticed a few other things. You actually have a #header CSS internally to your page (bad practice, but was probably in the theme). Your #header has a height of 145px, not 100px like the CSS is saying. It also has a different background image than is shown in the CSS. You should change the #header a CSS rule to have width of 145px or 100%. Either should work. The width really should only be enough to cover your logo as well (roughly 475px). I suggest the following:

      Code:
      #header a {
display: block;
width: 475px;
height: 145px;
}
      {{ DiscussionBoard.errors[5797255].message }}
      • Profile picture of the author Mr Bill
        Originally Posted by kdm5157 View Post

        EDIT: After looking at the code more, I noticed a few other things. You actually have a #header CSS internally to your page (bad practice, but was probably in the theme). Your #header has a height of 145px, not 100px like the CSS is saying. It also has a different background image than is shown in the CSS. You should change the #header a CSS rule to have width of 145px or 100%. Either should work. The width really should only be enough to cover your logo as well (roughly 475px). I suggest the following:

        Code:
        #header a {
display: block;
width: 475px;
height: 145px;
}
        Aaah, yes, I see that now. We have changed the logo size which would explain why the link was working about half way down the logo.

        I've changed the code as you suggested and now it seems to be working well! I think we're done. Can you confirm (please)? Looks good to me.

        Edit:

        My css now looks like this...

        Code:
        /*********************************************
 Header Styles
*********************************************/
#header {
position: relative;
width: 475px;
clear: both;
background-image: url(images/header.jpg);
background-repeat:no-repeat;
margin: 0 auto;
height: 145px;
padding: 0;
}
#header a {
display: block;
width: 475px;
height: 145px;
}
#header #title {
 font-size: 36px;
 margin: 0;
 padding: 0;
 width: 475px;
 height: 145px;
 display: none;
}
#header #title a {
 display: block;
 margin: 0px;
 padding: 0px;
}
        and my header php has this code.

        Code:
        <body>
<div id="header" class="clearfix"><a href="http://www.YourWebVoice.com" title="YourWebVoice.com - Add a real human voice to your sales page, ebook or report."></a></div>
 <!-- div id="login">
  <?php wp_loginout(); ?> 
 </div -->
 <!-- div id="title">
  <a href="<?php bloginfo('url'); ?>" title="Return to Home"><?php bloginfo('name'); ?></a>
 </div -->
</div>
        {{ DiscussionBoard.errors[5797333].message }}
        • Profile picture of the author kdm5157
          Looks good! I surely do like to help I love it when it all works out haha.

          I meant to make #header a CHANGE TO #header > a but it's not required.

          One last TIP. I prefer PHP comments over HTML comments. Mainly because PHP comments don't show in the VIEW SOURCE for the end users. Not only that but, any PHP commands will be ignored by the server and this could reduce your page load time some - not much, but every little bit helps! PHP comments are created with /* */ instead of <!-- -->. I'd suggest changing your code one final time to:

          PHP Code:
          <div id="header" class="clearfix"><a href="http://www.YourWebVoice.com" title="YourWebVoice.com - Add a real human voice to your sales page, ebook or report."></a></div>

          <?php /*
           <div id="login">
            <?php wp_loginout(); ?> 
           </div>
           <div id="title">
            <a href="<?php bloginfo('url'); ?>" title="Return to Home"><?php bloginfo('name'); ?></a>
           </div>
          */           ?>
          // KM
          {{ DiscussionBoard.errors[5797386].message }}
  • Profile picture of the author Mr Bill
    Aaah, yes, I remember that piece of code and have commented it out so now the phantom link is gone (thanks for that!).

    Here is my entire header section...

    Code:
    /*********************************************
 Header Styles
*********************************************/
#header {
position: relative;
width: 960px;
clear: both;
background-image: url(images/header.jpg);
background-repeat:no-repeat;
margin: 0 auto;
height: 100px;
padding: 0;
}
#header a {
display: block;
width: 960px;
height: 100px;
}
#header #title {
 font-size: 36px;
 margin: 0;
 padding: 0;
 width: 960px;
 height: 100px;
 display: none;
}
#header #title a {
 display: block;
 margin: 0px;
 padding: 0px;
}
    I've added the "display: none;" section correctly (I think) but I'm not sure what you mean by..."1) change the #header a CSS to #header > a"

    Do you mean I should change the first header section above from

    #header {

    to

    #header > a {

    Or do you mean I should change...

    #header a {

    to

    #header > a {

    ?

    As it stands my header section is as above.

    (Appreciate your help).
    {{ DiscussionBoard.errors[5797313].message }}
  • Profile picture of the author Mr Bill
    Ok, done. Perfect and thanks.

    If you ever need any of my services - I owe you.

    Thanks again KM. I *REALLY* appreciate your help.
    {{ DiscussionBoard.errors[5797414].message }}
    • Profile picture of the author kdm5157
      I'm working on my network for now. Just don't forget me and hopefully we can help one another out again some day! I've always wanted to visit Australia...might hit you up for a couch one day
      {{ DiscussionBoard.errors[5797445].message }}
  • Profile picture of the author Mr Bill
    You'd be welcome down here anytime, Skype me to make sure we stay hooked up.
    {{ DiscussionBoard.errors[5797459].message }}

Trending Topics