header logo as a link

[dtra]

hi all

i'm trying to work this out
i'm using a style with a background image for my header logo
the problem is that obviously it is better to have the header pic in a style
rather than putting the img tag into the page
but how can i put a link in that area to link to the defalt page of the site
which to me, is definitely a must

without using ridiculous code, is it possible to do this
xhtml 1.1, css2 please

thanks

[Shpigford]

you could just put a transparent .GIF file in the area you want the link....im sure there is probably some better way to do it...but thats my suggestion...

[dtra]

that would work i guess
but i might as well put the actual image there instead then

[ucahg]

i'm using a style with a background image for my header logo
the problem is that obviously it is better to have the header pic in a style
rather than putting the img tag into the page

Why is it better? Isn't this the whole purpose of the <img> tag? For images?

Put the <a><img /></a> tags in your <h1> tag (if you're using one).

Or put an <a> tag in the <h1> tag and then style the <a> to have the background image.

[fatnewt]

The purpose of CSS is to remove styling from your markup.

But the purpose of your header logo is not ONLY for visual styling, but to provide a heading for the page. It makes semantic sense to have your page title/logo at the top of your page, so do so! Use the <img> element.

Just remember to include an appropriate alt attribute for the logo.

[DougBTX]

Colin is spot on.

But just to show off:

a {
  border: 1px solid red;
  display: block;
  position: absolute;
  top: 50px;
  left: 100px;
  width: 100px;
  height: 100px;
}

<a href="#">Text</a>

Won't be pixel perfect because you are setting a border + height and width at the same time, but hay, it is quick and dirty...

Douglas

[dtra]

ok cool thanks guys
i'll use the img tag, and it'll also show the complete pic
in ie as well now, also i can put in a bg spacer pic too