By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,718 Members | 1,220 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,718 IT Pros & Developers. It's quick & easy.

Using separate divs for a navigation

P: 17
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.

Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. #home {
  4. background-image:url('../images/home.png');
  5. }
  6.  
  7. #home, a:hover {
  8. background-image:url('../images/home-hover-active.png');
  9. }
  10.  
  11. #home, a:active {
  12. background-image:url('../images/home-hover-active.png');
  13. }
  14.  
  15. #about-me {
  16. background-image:url('../images/about-me.png');
  17. }
  18.  
  19. #about-me, a:hover {
  20. background-image:url('../images/about-me-hover-active.png');
  21. }
  22.  
  23. #about-me, a:active {
  24. background-image:url('../images/about-me-hover-active.png');
  25. }
  26.  
Expand|Select|Wrap|Line Numbers
  1. <a href="./index.html">
  2.   <div id="home"></div>
  3. </a>
  4. <a href="./about-me.html">
  5.   <div id="about-me"></div>
  6. </a>
  7.  
Jun 17 '11 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Remove the comma after #home .
Jun 17 '11 #2

P: 17
@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
Jun 17 '11 #3

drhowarddrfine
Expert 5K+
P: 7,435
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.)
Jun 17 '11 #4

P: 8
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.
Jun 21 '11 #5

Post your reply

Sign in to post your reply or Sign up for a free account.