DIV as a hyperlink

How to make a div which contains the site banner a hyperlink.

[avelon]

Hey everyone,
I am using the background property of a <div> tag to display my website's banner. However I would like the user to be able to click on the banner to return to the home page. So my initial solution was to wrap an <a> tag around the <div> like this:

<a href="index.html"><div id="banner"></div></a>

This works very well but it's not HTML 4.01 compliant using a transitional DTD. The problem is that a block level element cannot be nested inside an <a> tag.

I do not want to use an <img> tag for the banner, because I want to keep the site design completely separate from the content. However, I have no idea how to change this so that it is HTML 4.01 compliant. Any suggestions?

[zooloo]

Change the <div> to <span>

...perhaps?

zoo

[avelon]

Nope. I tried that but then the hyperlink doesn't work :-(

[Storyman]

Do a search for FIR CSS and see if that brings up what you need.

[avelon]

Ok Zooloo, I owe you an apology. I misinterpreted your suggestion. I thought you wanted me to nest a <span> tag within the <div> and wrap the <a> tag around <span>. But you were right all along. I changed the <div> to <span> and in my style sheet I simply specified that the banner selector should be a block level element to maintain the layout. So here it is:

HTML:

<a href="index.html"><span id="banner"></span></a>

CSS:

#banner
{
display: block;
...
}

Thanks a lot guys.

[createErrorMsg]

I changed the <div> to <span> and in my style sheet I simply specified that the banner selector should be a block level element to maintain the layout

Technically, you've still nested a block-level element in an inline <a>nchor. Your code will pass through the Validator without throwing an error because the html validator doesn't dip into your CSS to see how you've altered the display setting. it uses the default setting for each element to determine the legality of your nesting.

However, when the browser renders the page, it will render the <a> as inline and the <span> as block, as per your CSS, and should this illegal nesting cause any rendering problems, you would experience them.

I think Storyman has given you a far better suggestion. By using an image replacement technique, you not only create valid code, but you also provide a text-only version of your header for those viewing your page without the benefit of styles or those hearing it through a screen reader.

Start with your original div. Nest a header tag in it, and in that an anchor containing a text version of whatever the image-header says. Then style the anchor per the code below...

html:
<div id="header">
<h1><a href="#">MySite</a></h1>
</div>

css:
#header{
height:150px; /*or whatever*/
width:700px;
}
h1{
height:150px; /*match to #header height*/
text-indent: -100.0em;
overflow: hidden;
background: url(path/to/image.gif);
}
h1 a{
display:block;
line-height:150px; /*match to h1 height*/
}

cEM

[avelon]

createErrorMsg, I took your advice and it works perfectly. Thank you for help. I do think this way is cleaner.