I would like to create button for a nav munu! I have a background image and a rollover image for the button. But the text for the button i would like not to be part of the image and when you rollover the text and image the text changes to uppercase and colour. How do i go about doing this?
i make example using backgorund color and not image, but the concept is similar <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home</title> <style type="text/css"> ul {list-style-type:none; width:200px;} a {text-decoration: none; color: white;} li{background: #ccc;} li:hover {background: black; text-transform:uppercase;} </style> </head> <body> <ul> <li><a href="#">home</a></li> <li><a href="#">home</a></li> </ul> </body> </html> PHP: good luck.. giving rep will be appreciated.
Its not really what im looking for! Go to http://www.tottenhamhotspur.com/index.html?WT.mc_id=splash_enterth and look at the menu to the left i want a menu like this. The onlt differnce is if you click the menu it drops down i dont want this!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home</title> <style type="text/css"> ul { border: none; list-style: none; margin: 0; padding: 0; background: #FFFFFF; } li { margin: 0 0 1px 0; padding: 0; cursor: default; } li a { color: #6a6a6a; display: block; padding: 3px 0 0 6px; text-decoration: none; text-transform: uppercase; background: url(http://www.tottenhamhotspur.com/gfx/template/bg_nav_side.gif) no-repeat top left #cecdcd; background-position: 0 -19px; width: 154px; height: 16px; } a:hover { background: url(http://www.tottenhamhotspur.com/gfx/template/bg_nav_side.gif) no-repeat top left #233c65; color: #FFFFFF; font-weight: bold; } </style> </head> <body> <ul> <li><a href="#">home</a></li> <li><a href="#">home</a></li> </ul> </body> </html> PHP:
actually that site uses javascript but many people do not recommend to use javascript for navs (useability, size, and SEO issues may arise .. although i must admit, not very common) I haven't reviewed all of fairuz's code but it looks as though it is legit and if not exactly what you need, will give you a very good idea of what you need to do In short what you are looking for is a <ul> list with <li> tags that have css hover definitions that have different backgrounds. Also the links should have hover definitions to have a different color If you don't know how .. this is shown by fairuz one thing i would change is I would put the :hover on the li tag as well as the a tag