Hi, I have spent a good few days trying to get a CSS Horizontal Menu to work. It has 7 buttons as images. It changes to a different image when hover, link and active. I have also attached an image on the beginning of left hand side and right hand side of the menu as the menu has been sliced from a .psd image. Buttons are straight forward, the only visual effect that occurs is a small arrow is displayed on the selected image when hover or click action is applied. I have the menu in main div container and I have also placed 2 additional side images in 2 separate containers. Not sure if I should be placing these 2 additional images in div containers though? Anyway, the menu displays fine in dreamweaver cs3 but when I preview it in Firefox or IE 7 the 7 buttons shift downwards. Also when I click on a button I can see dashed lines and the buttons aren't in a smooth effect? Html code: <body> <div id="topNavigation"> <div id="left_nav"> <ul> <li><a href="index.html" class="about"></a></li> <li><a href="setup.html" class="setup"></a></li> <li><a href="market.html" class="market"></a></li> <li><a href="upgrades.html" class="upgrades"></a></li> <li><a href="manufacturing" class="manufacturing"></a></li> <li><a href="developer.html" class="developer"></a></li> <li><a href="demo.html" class="VideoDemo"></a></li> </ul> <div id="right_nav"></div> </div> </div> </body> CSS Code: <style type="text/css"> #outerWrapper #topNavigation { background-color: none; border-bottom: none /* Sets the bottom border properties for an element using shorthand notation */ height: 101px; padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */ } #topNavigation { width: 957px; height: 101px; } #topNavigation ul { padding: 0px; position:absolute; } #left_nav { background: url(images/menu/left_button_end.png) no-repeat scroll 0pt; height:101px; width:18px; padding: 0px; border: 0px; margin: 0px; left: inherit; position:absolute; top: 187px; tag: div; } #topNavigation li { float:left; word-spacing:normal; } #topNavigation li a.about { background: url(images/menu/about.jpg) scroll no-repeat; height: 101px; width: 115px; padding: 0px; border: 0px; margin: 0px; position:absolute; left: 18px; top: auto; tag: div; } #topNavigation li a.setup { background: url(images/menu/setup.jpg) scroll no-repeat; height: 101px; width: 117px; padding: 0px; border: 0px; margin: 0px; left: 133px; position:absolute; top: auto; tag: div; } #topNavigation li a.market { background: url(images/menu/market.jpg) scroll no-repeat; height: 101px; width: 122px; padding: 0px; border: 0px; margin: 0px; left: 250px; position:absolute; top: auto; tag: div; } #topNavigation li a.upgrades { background: url(images/menu/upgrades.jpg) scroll no-repeat; height: 101px; width: 129px; padding: 0px; border: 0px; margin: 0px; left: 372px; position:absolute; top: auto; tag: div; } #topNavigation li a.manufacturing { background: url(images/menu/manufacturing.jpg) scroll no-repeat; height: 101px; width: 165px; padding: 0px; border: 0px; margin: 0px; left: 501px; position:absolute; top: auto; tag: div; } #topNavigation li a.developer { background: url(images/menu/developer.jpg) scroll no-repeat; height: 101px; width: 136px; padding: 0px; border: 0px; margin: 0px; left: 666px; position:absolute; top: auto; tag: div; } #topNavigation li a.VideoDemo { background: url(images/menu/video_demo.jpg) scroll no-repeat; height: 101px; width: 139px; padding: 0px; border: 0px; margin: 0px; left: 802px; position:absolute; top: auto; tag: div; } #right_nav { background: url(images/menu/right_button_end.png) no-repeat scroll 0pt; height:101px; width:16px; padding: 0px; border: 0px; margin: 0px; left: 941px; position: absolute; top: auto; tag: div; } #topNavigation a.about:hover { background: url(images/menu/about_rol.gif) no-repeat 0; } #topNavigation a.setup:hover { background: url(images/menu/setup_rol.jpg) no-repeat 0; } #topNavigation a.market:hover { background: url(images/menu/market_rol.jpg) no-repeat 0; } #topNavigation a.upgrades:hover { background: url(images/menu/upgrades_rol.jpg) no-repeat 0; } #topNavigation a.manufacturing:hover { background: url(images/menu/manufacturing_rol.jpg) no-repeat 0; } #topNavigation a.developer:hover { background: url(images/menu/developer_rol.jpg) no-repeat 0; } #topNavigation a.VideoDemo:hover { background: url(images/menu/video_demo_rol.jpg) no-repeat 0; } #topNavigation a.about:active { background: url(images/menu/about_c.gif) no-repeat 0; } #topNavigation a.setup:active { background: url(images/menu/setup_c.jpg) no-repeat 0; } #topNavigation a.market:active { background: url(images/menu/market_c.jpg) no-repeat 0; } #topNavigation a.upgrades:active { background: url(images/menu/upgrades_c.jpg) no-repeat 0; } #topNavigation a.manufacturing:active { background: url(images/menu/manufacturing_c.jpg) no-repeat 0; } #topNavigation a.developer:active { background: url(images/menu/developer_c.jpg) no-repeat 0; } #topNavigation a.VideoDemo:active { background: url(images/menu/video_demo_c.jpg) no-repeat 0; } </style> -------------------- Can anyone please let me know what I am doing wrong as I have tried so many ways to get this working and can't find the right tutorial for this type of hover image effect. Thankyou
Try this one: http://www.alistapart.com/articles/sprites/ I´ve used it couple of times. It´s great and not difficult when you get the hang of it. It uses only one image.
Thanks HDaddy, I have had a look at it and the article has helped me a lot in understanding how to code the menu.