ok, what im trying to do is get a menu like the one on the apple.com site. Say for example. Link1 Link2 Link3 if i click on link 1, the button will change color and stay that colour for as long as im on link1 page.. if i then clicked on link2 page, the link2page button wud change and the link1 wud change but to its original state, again.. like on the apple.com site. I hope this makes sense! any help wud be much appreciated! Thanks! Aaron
There are many ways to skin a cat (I always find a penknife does the trick) However back to you question. I've used a similar style on the bamzooki site, albeit the menu is vertical not horizontal. Basically the button has all three 'states' in one image (OFF, HOVER, ON) Then the css style detirmine which portion to show (within a fixed height block) Here's the css #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 0px; font-weight: bold; } #menu li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(images/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover { color: #26370A; background: url(images/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active, #menu #current { color: #26370A; background: url(images/menu1.gif) 0 -64px; padding: 8px 0 0 10px; } Code (markup): and then the html: <ul> <li><a id="current" href="#" title="Return home">Home</a></li> <li><a href="team.html" title="Learn more">Team</a></li> <li><a href="zooks.html" title="View and download">Zooks</a></li> <li><a href="news.html" title="Latest news">News</a></li> <li><a href="contact.html" title="Contact Canary Woolf">Contact</a></li> </ul> Code (markup): Hope that gives you an idea. CW
Don't use the voice-family hack unless you want the people who are using screen readers to access your site have their program scream at them at the top of the computer's virtual lungs. It's also not even necessary to hack anyway as long as you know what you're doing either. In fact, here's one example of how I'd do it (CanaryWoolf, I used your image in this example; hope you don't mind). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="A brief description of the current page goes here." /> <meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" /> <style type="text/css"> * { margin: 0; padding: 0; } #menu { border: solid #94AA74; border-width: 1px 1px 0 1px; width: 200px; } #menu li { float: left; list-style: none; width: 100%; } #menu li a { background: #CBD7B7 url("images/menu1.gif") no-repeat; color: #5E7830; display: block; font-weight: bold; height: 24px; padding: 8px 0 0 10px; text-decoration: none; } #menu li a:hover { background-position: 0 -32px; color: #26370A; } #menu li a:active, #menu li a:focus, #menu li a.current { background-position: 0 -64px; color: #26370A; } </style> <!--[if lt IE 6]> <style type="text/css"> #menu li a { height: 32px; } </style> <![endif]--> </head> <body> <ul id="menu"> <li><a class="current" href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> </ul> </body> </html> Code (markup):
Uhm... what's with the hacks in the first place? Just set the li to display:inline and all your troubles go away. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Untitled Document </title> <style type="text/css"> * { margin:0; padding:0; } #menu { border:solid #94AA74; border-width:1px 1px 0 1px; width:200px; list-style:none; } #menu li { display:inline; } #menu a { display:block; padding:8px 0 8px 10px; border-bottom:1px solid #000; text-decoration:none; font:bold 14px/16px sans-serif; color:#5E7830; background:#CBD7B7 url("images/menu1.gif") no-repeat; } #menu a:active, #menu a:focus, #menu a:hover { background-position:0 -32px; color:#26370A; } #menu .current a { background-position:0 -64px; color:#26370A; } </style> </head><body> <ul id="menu"> <li class="current"><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> </ul> </body></html> Code (markup): I also HIGHLY recommnend dictating a px metric font if putting text over an image... that way it doesn't break at default zoom on large font/120dpi machines... which if you set the line-height you can pad both sides for near guaranteed top to bottom centering. ... and shouldn't :active and :focus be the same as :hover, NOT .current?