January 13, 201115 yr Hi, I made a navigation bar a while back,however later I found the need to add drop downs. The problem is I made my own navigation bar using Divs. I changed it so it's a normal navigation with drop downs, but I want to keep the styles for my previous navigation bar, which i made using divs. So can anyone help Index.html <!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" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/navigation.css" media="screen" rel="stylesheet" type="text/css" /> <title>Home</title> </head> </style> <!--[if lte IE 7]> <script type="text/javascript" src="/generic/js/jquery.js"></script> <script type="text/javascript" src="js/jquery.helper.js"></script> <![endif]--> </head> <body> <div id="header_wrap"> <div id="header"> </div> </div> <ul id="nav" class="Navigation Bar"> <li><a href="./">Home</a></li> <li class="dir">Online Services <ul> <li class="dir"><a href="./">Commerce</a> <ul> <li><a href="./">Internet Auctions</a></li> <li><a href="./">Online Shopping</a></li> </ul> </li> <li class="dir"><a href="./">Communication</a> <ul> <li><a href="./">Blog</a></li> <li><a href="./">Email</a></li> <li><a href="./">Instant Messaging</a></li> </ul> </li> <li class="dir"><a href="./">Education</a> <ul> <li><a href="./">Online Learning</a></li> <li><a href="./">VLE</a></li> </ul> </li> <li class="dir"><a href="./">Entertainment </a> <ul> <li><a href="./">Multiplayer Gaming.doc</a></li> <li><a href="./">Online Videos</a></li> </ul> </li> <li class="dir"><a href="./">Real Time</a> <ul> <li><a href="./">News Services</a></li> <li><a href="./">Weather Forecasts</a></li> </ul> </li> <li class="dir">Information Age <ul> <li><a href="./">Banking</a></li> <li><a href="./">Civil Rights.</a></li> <li><a href="./">Communication.doc</a></li> <li><a href="./">Crime & prevention</a></li> <li><a href="./">Education</a></li> </ul> </li> <li><a href="./">Digital Divide</a></li> <li><a href="./">Site Map</a></li> </li> </ul> <div id="content"> </div> </body> </html> Style.css @charset "utf-8"; /* CSS Document */ body { margin:5px; padding:0px; background:url(../images/background.gif) repeat; } #header_wrap { width:100%; height:80px; margin:0px; background:url(../images/background.gif) repeat-x; } #header { width:960px; height:80px; margin:0 auto; background:url(../images/banner.gif) no-repeat; } #navbar_wrap_outer { overflow: hidden; width: 960px; height:30px; margin: 0 auto; background: url(../images/nav-background-repeat.png) repeat-x; } #navbar_wrap_inner { position: relative; float: left; left: 50%; height:30px; margin:0px; background:url(images/background.gif) repeat-x; } .navbar { position: relative; left: -50%; background: url(../images/nav-background.png) height:30px; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:30px; font-weight:bold; border:1px solid #FFF } .button { float: left; } .button a { background: url(../images/nav-background.png); float:left; color:#777777; padding: 0 10px; height:30px; text-decoration:none; text-align:center; } .button a:link, #list-menu a:active, #list-menu a:visited { color: #7777777; } .button a:hover { color:#3D85C6; } Old Index @charset "utf-8"; /* CSS Document */ body { margin:5px; padding:0px; background:url(../images/background.gif) repeat; } #header_wrap { width:100%; height:80px; margin:0px; background:url(../images/background.gif) repeat-x; } #header { width:960px; height:80px; margin:0 auto; background:url(../images/banner.gif) no-repeat; } #navbar_wrap_outer { overflow: hidden; width: 960px; height:30px; margin: 0 auto; background: url(../images/nav-background-repeat.png) repeat-x; } #navbar_wrap_inner { position: relative; float: left; left: 50%; height:30px; margin:0px; background:url(images/background.gif) repeat-x; } .navbar { position: relative; left: -50%; background: url(../images/nav-background.png) height:30px; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:30px; font-weight:bold; border:1px solid #FFF } .button { float: left; } .button a { background: url(../images/nav-background.png); float:left; color:#777777; padding: 0 10px; height:30px; text-decoration:none; text-align:center; } .button a:link, #list-menu a:active, #list-menu a:visited { color: #7777777; } .button a:hover { color:#3D85C6; } Edited January 13, 201115 yr by noobtouch
January 14, 201115 yr Style.css and index.css look exactly the same to me. Where are the differences?
January 14, 201115 yr Author oh sorry i didn't realise that. for some reason i cant edit it so i will post the correct one below. <!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" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css"> <title>Home</title> </head> <body> <div id="header_wrap"> <div id="header"> </div> </div> <div id="navbar_wrap_outer"> <div id="navbar_wrap_inner"> <div class="navbar"> <div class="button"><a href="#">Home</a></div> <div class="button"><a href="#">Online Services</a></div> <div class="button"><a href="#">Information Age</a></div> <div class="button"><a href="#">Digital Divide</a></div> <div class="button"><a href="#">Site Map</a></div> </div> </div> </div> <div id="navbar2"> </div> <div id="content"> </div> </body> </html> its an index.html by the way not .css Edited January 14, 201115 yr by noobtouch
January 14, 201115 yr its an index.html by the way not .css Yes, but the Old Index code in your first post is a stylesheet and is the same as the one above, so I thought it must be index.css. I can see that the index.html menu in list format is roughly correct with the nested second level ul inside the top level li tag, but these drop down menus have complex styles and I think you will find it easier to start again. CSSplay http://www.cssplay.co.uk/menus/ have hundreds to choose, here's a basic horizontal drop down menu which you could edit:- http://www.cssplay.co.uk/menus/basic_dd.html Edited January 14, 201115 yr by Wickham
Create an account or sign in to comment