I need a css menu like this: http://www.cssplay.co.uk/menus/pro_horizontal.html This has been designed by using big hover buttons. Is there any otehr simple way to design this menu? Maybe by breaking this image into 2 parts. Please let me know asap.
Something i put together in a hurry: I used only 3 buttons but you can just add more in html if you like. Just add another <div class="button"><a>BUTTON TEXT HERE</a></div> under the 3rd one. HTML: <div id="menu"> <div class="button"><a href="[B]HOME PAGE LINK HERE[/B]">Home</a></div> <div class="button"><a href="[B]SEARCH PAGE LINK HERE[/B]">Search</a></div> <div class="button"><a href="[B]CONTACT PAGE LINK HERE[/B]">Contact</a></div> </div> Code (markup): CSS: #menu { height: 35px; width: 750px; background: url(http://i23.photobucket.com/albums/b363/CompressorX/button1.gif) top right repeat-x; } .button { margin: 0pt auto; width: 70px; height: 30px; float: left; text-align: center; color: #FFFFFF; font-weight: bold; padding-top: 4px; } .button a { color: #F4F4F4; } .button a:hover { color: #FFFFFF; text-decoration: none; } .button a:active { color: #FFFFFF; background: url(http://i23.photobucket.com/albums/b363/CompressorX/button2.gif); } .button:hover { background: transparent url(http://i23.photobucket.com/albums/b363/CompressorX/button2.gif); } Code (markup): There is room for improvement but for the most part that is it. Notice that you have to add links to pages to each <a> in html in order for a:active background to be shown (the button of the page you are on atm). EDIT: I have uloaded the images for backgrounds of the menu and buttons to my photobucket account and will keep them there for a while to give you the chance of downloading but since my account is overcrowded as it is i will have to remove them after that.
The one i did has only 2 images also.. button1 and button 2. I would like to see what you did and how if possible.