Using separate divs for a navigation

[James]

Hi,

Okay so basically I have a navigation bar that consists of 5 clickable div links which are:

Home, About me, Portfolio, Experience and Contact

I am using 5 separate divs with image backgrounds because the font I have used isn't available in css. I seem to have a problem with when it comes to the styling of the links.

I have assigned;

a:hover and a:active to each div and used a different background image for both link states. So when the user hovers over the 'about me' div it displays a different image to the one it currently shows. However, the problem I'm having is that no matter what page I'm on, the images shown are the ones that relate to the "a:active". Now of course I cannot be on all five pages at the same time. Below I've placed a snippet of my code for you to look at. Any feedback would be much appreciated.

 
 
#home {
background-image:url('../images/home.png');
}
 
#home, a:hover {
background-image:url('../images/home-hover-active.png');
}
 
#home, a:active {
background-image:url('../images/home-hover-active.png');
}
 
#about-me {
background-image:url('../images/about-me.png');
}
 
#about-me, a:hover {
background-image:url('../images/about-me-hover-active.png');
}
 
#about-me, a:active {
background-image:url('../images/about-me-hover-active.png');
}
 

<a href="./index.html">
  <div id="home"></div>
</a>
<a href="./about-me.html">
  <div id="about-me"></div>
</a>
 

[drhowarddrfine]

Remove the comma after #home .

[James]

@drhowarddrfine
Did you mean the comma after every #home? tried that and it didn't work; it ended up not displaying the image I wanted when hovering and clicking

[drhowarddrfine]

Didn't look close enough. First, your html is invalid. You cannot wrap a block level element with an anchor which is inline. (However, this is now legal in HTML5.)

[macem]

drhowarddrfine is right, please use ul->li instead. I think that HTML5 is a mess, We should be copliant with XHTML then with HTML5 and we shouldn't wrap a block level element with an inline element.