August 27, 200818 yr Hello. I'm trying to make a completely CSS navbar and am encountering some issues. So far it looks like this: link But I want it to look like this: link Below is the code, thanks in advance. <!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>Untitled Document</title> <style type="text/css"> #nav { height: 51px; width: 800px; } #nav li { list-style-type: none; display:inline; padding:0; margin:0; } #nav-home a { font-family:Arial, Helvetica, sans-serif; color:#666666; font-size:14px; font-weight:700; background:url(../files/navbar_r1_c1.gif); background-repeat:no-repeat; width: 141px; height: 51; text-decoration:none; margin: 20px; } #nav-home a:hover { font-family:Arial, Helvetica, sans-serif; color:#F4F4F4; font-size:14px; font-weight:700; background:url(../files/navbar_r1_c1_f2.gif); background-repeat:no-repeat; width: 141px; height: 51; text-decoration:none; } #nav-rest a { font-family:Arial, Helvetica, sans-serif; color:#666666; font-size:14px; font-weight:700; background:url(../files/navbar-temp-over.gif); background-repeat:repeat-x; height: 51; text-decoration:none; margin: 10px; } #nav-rest a:hover { font-family:Arial, Helvetica, sans-serif; color:#F4F4F4; font-size:14px; font-weight:700; background:url(../files/navbar_r1_c2_f2.gif); background-repeat:repeat-x; width: 141px; height: 51; text-decoration:none; } #nav-aboutus a { font-family:Arial, Helvetica, sans-serif; color:#666666; font-size:14px; font-weight:700; background:url(../files/navbar_r1_c8.gif); width: 181px; height: 51; text-decoration:none; margin: 20px; } #nav-aboutus a:hover { font-family:Arial, Helvetica, sans-serif; color:#F4F4F4; font-size:14px; font-weight:700; background:url(../files/navbar_r1_c8_f2.gif); background-repeat:no-repeat; width: 181px; height: 51; text-decoration:none; } </style> </head> <body> <div id="nav"> <ul> <li id="nav-home"><a href="#">home</a></li> <li id="nav-rest"><a href="#">info</a></li> <li id="nav-rest"><a href="#">news</a></li> <li id="nav-rest"><a href="#">events</a></li> <li id="nav-rest"><a href="#">blog</a></li> <li id="nav-rest"><a href="#">message board</a></li> <li id="nav-rest"><a href="#">alumni</a></li> <li id="nav-rest"><a href="#">media</a></li> <li id="nav-aboutus"><a href="#">about us</a></li> </ul> </div> </body> </html>
August 27, 200818 yr - Why have you defined font, font colour, font size etc. on every link? Just have it in the body tag, so you only declare it once. - It seems as though the images are there, but you should perhaps try one background image applied to the nav div, rather than separated images on each individual link because that would be very hard to get right. Then have the text links on top of that... #nav { float:left; height: 51px; width: 800px; background:url("the_grey_thing_with_rounded_edges.gif"); background-repeat:no-repeat; } - Keep your content (html page) and styling (css) separated, unless it was to cut down on code for this post!
August 29, 200817 yr Author Thank you. But how would I get the effect of the background image changing when you hover over it?
August 29, 200817 yr Thank you. But how would I get the effect of the background image changing when you hover over it? This might be relevant: http://www.webdesignerforum.co.uk/index.php?showtopic=270 Just stick the rounded ends on either side. display: block; might also be useful. One of the problems from your original was that the images were there behind the links but you couldn't see them because the area of the links was the default size. Using display: block; means you can set widths and heights so they fill the area you want.
Create an account or sign in to comment