algorithm Posted February 7, 2010 Share Posted February 7, 2010 I'm trying to create the navigation bar, but I need it so when someone clicks on a tab, the hover background remain fixed and a list of links will appear on the bottom. Also I think my navbar is too narrow, but when I increase the width, the last tab doesn't come inline with the border. Here is the css @charset "utf-8"; /* CSS Document */ body { width:750px; margin-left:auto; margin-right:auto; text-align:center; } div#navbar { border-top:1px solid; border-left:1px solid; border-right:1px solid; height:2.5em; margin-left:0px; border-bottom:none; } div#navbar ul { list-style: none; padding: 0; margin: 0; } div#navbar li { float: left; margin:0; height: 2.5em; line-height: 2.5em; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; font-size:15px; border-right: 1px dashed; } div#navbar a:link{ background:#006666; color:#FFFFFF; } div#navbar a:hover{ background:#006666; color:#FFFFFF; } div#navbar a:active{ background:#006666; color:#FFFFFF; } #navbar li a { outline-style:none; outline-width:0; float: left; height:3.8em; width: 9.92em; display: block; text-decoration: none; text-align: center; color:#666666; } div#navbar li a#first2{ } div#navbar li#last{ border-right:none; } div#navbar li#first{ } div#navbar li a:hover{ text-decoration:none; color:#FFFFFF; } div#subheading { height:20px; width:750px; background:#006666; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; } html: <!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> <link type="text/css" rel="stylesheet" href="css/index.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Main Page</title> </head> <body> <div id="logo"></div> <div id="navbar"> <ul> <li id="first"> <a href="#" id="first2">u.s. macro</a> </li> <li> <a href="#">credit & banking</a> </li> <li> <a href="#">real estate</a> </li> <li> <a href="#">global macro</a> </li> <li id="last"> <a href="#" id="last2" >getting started</a> </li> </ul> </div> <div id="subheading"></div> <div id="dataFrame"></div> </body> </html> you can see the output here: www.economiq.org/index2.htm Quote Link to comment Share on other sites More sharing options...
haku Posted February 8, 2010 Share Posted February 8, 2010 So do you actually have a question? Quote Link to comment Share on other sites More sharing options...
algorithm Posted February 8, 2010 Author Share Posted February 8, 2010 right, so in jeopardy form-> How do you make a navbar scalable so it can adjust for different screen sizes? How do I make css create a menu underneath the tabs? How can I get the a:hover color to stay fixed when a user clicks it? Quote Link to comment Share on other sites More sharing options...
vinpkl Posted February 8, 2010 Share Posted February 8, 2010 if you want to make your navigation scalable at diferent resolutions then keep width of navigation and parent element in %. if you want to keep a:hover color fixed when user clicks it then you need to use javascript for it. vineet Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.