[HisforHelvetica]

Hey, I've designed a nav menu using CSS, so that the divs are basically empty, however they have a specified height and width, and a background image with a hover state. I am trying to link the divs to their respective pages.

the code looks like this now:

<a href="home.html"><div id="home"></div></a>

so each div is wrapped by an <a> link tag

I know that you are not supposed to put a block level element inside an inline element, however the code functions fine, but it will not validate. I'm assuming I have to place the link inside the div tags, however I can't seem to get it to work.

If anyone can help me out with this quick question, it would be greatly appreciated. Thanks.

[solarisedesign]

Try changing the <a> tags into block level elements, like so...

<style>
.link {
  display:block;
  width:100px;
  height:100px;
}
</style>

<a class='link' href='www.google.com'></a>

Not sure if you might still need something between the anchor tags though

[HisforHelvetica]

Yeah that worked great, thanks a lot for the help man. I knew it was something small I was missing, never thought to add the height and width. Thanks!

[Shiro]

You've got it backwards. You need to put the <a> inside the divs. That's valid. Then you set the <a> tags as blocks, and give them a height and a width equal to the size of the div (which you also give a height and width to).

[stugoo]

what Shiro said.

However for accessibility purposes navigation items should really be built as unordered lists as oppose to using divs.
<div> is a 'natural division in the page' as oppose to a navigation bar is a list of links.

[stugoo]

otherwise you could instead of using a div inside the a tag you could use a span. which is another very useful inline element.

[Sean McP]

<div id="navigation">
  <ul>
    <li><a  class="home" href="#"><span>Home</span></a></li>
  </ul>
</div>

#navigation.li {
  width:100px;
  height:40px;
}
#navigation.li span {
  display:none;
}

Disregarding the background images, the HTML and CSS should look something like this. You aren't going to want you're website's main navigation to be empty divs, that's lazy.

But if you put a <span> around the text it won't be visible unless the stylesheet is disabled.

Don't put a div in a link, I'm fairly sure that it isn't valid, and it isn't good practice.