Linking CSS embeded image

Question

For a webpage I used a div id that with css inserts a logo directly in the page. I'd like that logo to be linked to (for instance) a homepage. I can make it easily by doing this <a href=xyz><div id=logo></div></a> of.course that doesn't validate (eventually DTD XHTML 1.0 Strict).

Can anyone suggest the (probably obvious) best practice? Thanks

Answer 1

<a href="something"><span class="logo"></span></a>

You might have to declare <span> as display: block;.

Answer 2

<a href=""><span></span></a>

Apply the background image, width, height and display:block to the span. Hope that helps!

Answer 3

Use a span:

<a href=xyz><span id=logo></span></a>

Don't forget to convert the span to a block element in your css:

.logo {
    display: block
}

Answer 4

You can do away with fiddly SPAN and DIV cluttering up your page and have the link itself be a block.

<a href="http://example.com/" id="logo">&nbsp;</a>

And in your CSS, style it with background and size it to the dimensions of the image you want to be clickable:

#logo
{
   background:url("/path/to/image.jpg");
   display:block;
   width:200px;
   height:80px;
}