How to make a clickable 'header' with css?

http://howmanymilesinakilometer.com
http://howmanymilesinakilometer.com/style_revised.css

If you look right now I've tried to make the 'a' element in #header an image with css and use a paragraph so that when people with CSS disabled visit the site they see the paragraph, and when it's on, the image goes over it, but I can't seem to figure it out. Can someone help me out?

- Joe

 

You just have to make the logo clickable, not the whole header.

<div id"header">
  <h1><a href="index.html">Your text here</a></h1>
  <ul id="topNav">
        <li id="t-home"><a href="index.php">Home</a></li>
        <li id="t-blog"><a href="#">Blog</a></li>
        <li id="t-contact"><a href="contact.php">Contact</a></li>
      </ul>
</div>

Code (markup):

then CSS

#header h1 a{
 display:block;
  text-indent:-99999px;
  overflow:hidden;
  width: --px;
  height:--px;
  float:left;}

ul#topNav{
 float:right;}

Code (markup):

How are you clearing floats?

 

where does it show the actual image in that code, do I use img in the <a> tag? like <a href="index"><img src="images/logo.jpg"></a>

 

oh sorry, forgot about that just add:

background: url(yourimage.gif) no-repeat top left;

Code (markup):

to #header h1 a

 

I did it, but nothing seems to show, any ideas?

 

You were supposed to substitue these:

width: --px;
height:--px;

Code (markup):

with the proper dimensions of the image

 

oh, duh , I'm an idiot, I thought that was some special hack or something =P.

So just curious, why the text-indent and display block and overflow:hidden, what purpose do they serve here, just so I understand.

 

Ah, glorie's hiding the text which is sitting in the <a>.

I'm not sure about the display: block, I'm guessing it's to make text-indent work, but I thought that worked with inlines? The a is display: inline by default, and certainly if any other moving method were used (like left or margin-left) the a would have to be a block first. Also not sure about the overflow: hidden but what that does is, if you have an element with a set height and width, any content inside that thing which tries to be higher/taller or wider gets cut-off-- the overflow gets hidden. It also has another useful (prolly by accident) ability: wrapping floats.

I'm guessing in this case it was to stop any text-enlargements from possibly letting any of the growing a's text from appearing from off-screen. Instead, it will never show, cause any enlarged text gets hidden.

In this case, with this code, the image you want is a background image, the text of the a would show, sitting on top. You might see this same set-up done with the background-image on the #header div or the h1 as well. With this code in this set-up, if you'd want the text out of the way you'd have two options:
1. setting the text as display: none (which you don't want in any case-- here it would remove the <a> entirely, but even if it was just normal text, the point of the text in the first place is for those without images (like the blind) to see/hear all the text, and some screen readers for some UNKOWN YT%%$#%$ing reason obey display: none and DON'T say the text!!!)
2. moving the text off-screen (what glorie did). You can set the left margin a negative gazillion number of units (px, em, whatever), you could set the thing to position: absolute and move it with left: -9999999999em (okay you don't need that much), or you can use a negative text-indent.

My only issue with this methos (which is very popular in CSS circles, don't get me wrong) is that there is a group of people (who may or may not visit your site) who have CSS-enabled browsers and can see, but don't accept images. Usually dial-uppers. The sole problem with moving text off-screen with CSS is that as long as people have CSS on, the text stays offscreen, even if the image isn't there to tell them the info in the text.

 

Stomme_pos is right, text-indent is just moving the text off the screen so it won't show. Setting overflow to hidden isn't really necessary, but there are times when I encounter certain problems and setting overflow to hidden solves it.

I used display: block on <a> because without it, the link won't follow the declared width and the height.

As for this particular image replacement technique, the one trade-off is what Stomme has mentioned -when image is turned off the viewer will not see anything but I think this method works with JAWS screen readers. There are other techniques but that involves using non-semantic markup. So I mostly just stick with this method.

 

As far as I know, the text-indent trick DOES work with JAWS. But that's the only one I can actually test in, so I have to take others' words for it when it comes to Window Eyes (which as far as I know also will read text-indented text).

Oh yeah, duh. My brain is off today. : )