How to make a H1 tag in CSS into a link

Discussion in 'Coding Help' started by shanediffily, Oct 6, 2006.

Tags:
  1. shanediffily

    shanediffily New Member

    On the homepage of Diffily.com : "The Website Manager's Handbook" I have a headline "The Website Manager's Handbook". I want to use as much semantic markup as possible, so I have marked as a H1 using the following tag

    h1.homepage_bannerarea {
    font-size: 300%; color: #ffff00; font-family: Georgia, Verdana, Arial, Helvetica, serif; font-weight: normal; line-height: 80%; BORDER: #cccc00 0px solid; margin-bottom: -0.25em;
    }

    However, I now want to make this a hyperlink, with states for LINK, HOVER, ACTIVE and VISITED. How do I do that?

    Is is something like

    h1.homepage_bannerarea a.link { etc }
    h1.homepage_bannerarea a.hover { etc }
    h1.homepage_bannerarea a.active { etc }
    h1.homepage_bannerarea a.visited { etc }

    If so, will it still remain 'semantically' as a HEADING 1?

    Thanks
     
  2. louie

    louie New Member

    you need to give it an id:

    Code:
    <h1 id="h1_link"><a href="#>your text</a></h1>
    then in your stylesheet you set it up:
    #h1_link h1 a{your style here;}
    #h1_link h1 a:hover{your style here;}
    
     
  3. RedCardinal

    RedCardinal New Member

    A little bit easier:

    #homepage_bannerarea h1 {
    border: #cccc00 0px solid;
    color: #ffff00;
    font-family: Georgia, Verdana, Arial, Helvetica, serif;
    font-size: 300%;
    font-weight: normal;
    line-height: 80%;
    margin-bottom: -0.25em;
    }
    #homepage_bannerarea h1 a:link, #homepage_bannerarea h1 a:visited {
    ...
    }
    #homepage_bannerarea h1 a:hover {
    ...
    }

    Sorry forgot to mention you can then remove the id you are using in the <h1> element (and in the <p> if you use the same logic above) - not requied with above.

    Links in header elements can give you a slight boost also:)
     
  4. enzo

    enzo New Member

    WHy id? Wouldn't it be better to use classes instead of id's just incase you want to reuse the link styles?
     
  5. louie

    louie New Member

    You use id when you want just one h1 tag per page to look different.
    Use classes when you have more then 1 per page.

    id is also very important if you ever want to make changes to the css and if you ever need to add some sort of Javascript to the h1 tag.
     

Share This Page