How to make header image clickable for home page

Discussion in 'CSS' started by Ant_C, Apr 25, 2008.

  1. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #21
    If you use Gilder-Levin image replacement, you usually have this:

    <h1>texty texty<span></span></h1>

    The span has a background image and is absolutely positioned over the h1, hiding its text.

    But if it's clickable h1, then use the anchor to do the job:
    <h1>texty texty<a href="home.php"> </a></h1>

    Like the span, it turns into a block when absolutely positioned, and because it comes after the text, you have to manually set it at left: 0 and top: 0.

    Now here's mine, but it's a little extra complicated, because I set it up so that the normal text kinda imitates the logo (it's only an image because not everyone has Impact font), so ignore the span, it is doing nothing but colouring some text:

    <h1>scooter<span class="kleur">verzekeren.com</span><a href="default.php"> </a></h1>

    
    h1 {
      float: left;
      margin: 0 0 5px 10px;
      width: 330px; <--set width
      height: 49px; <--set height... both equalling the image
      font: bold 33px/54px impact, techno, verdana, arial,  sans-serif; <--style the text underneath
      letter-spacing: -.10em;<--styling the text more
      position: relative; <-- for the a's positioning
      overflow: hidden; <--trying to stop it from peeking out from under the logo on text-enlarge
    }
    	h1 a {
      	  text-decoration: none; <--styling text
    	  color: #000;<--styling text
      	  position: absolute;
    	  top: 0;
    	  left: 0;
      	  height: 49px; <--or 100%
      	  width: 335px;<--or 100%
      	  background: url(scooterlogo.gif) 0 0 no-repeat;
    	}
    	h1 span.kleur {
      	  color: #109cde;<-- text styling
    	}
    
    Code (markup):
    Look here and turn images off.
     
    Stomme poes, May 5, 2008 IP
  2. brongersma

    brongersma Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #22
    Can someone look at my code and tell me where I went wrong... I've been messing with it all day trying to make the header image link back to my home page at http://www.beverlybrongersma.com. Your help is so greatly appreciated!
     
    brongersma, Jun 25, 2008 IP