PDA

Click to See Complete Forum and Search --> : Help with mutliple UL navivgation bar

ToddFur
02-22-2010, 01:58 PM
Hi-

I am trying to figure out this problem.

I have 2 Navigation bar on my page. The first one is more of a mini bar that goes on the very top (UL ID = "topnav"), it basically has "Home" and "Join our mailing list" and then I have a main navigation bar (UL ID="menu") that goes to different sections of the site.

The main navigation bar works perfectly but not the top navigation bar (it won't hover or click on the links). Can anyone let me know what is wrong:



ul#topnav {
margin:0px;
padding-top:15px;
padding-right:5px;
position:absolute;
right:0px;
width: 300px;
top: -4px;
height: 56px;
}

ul#topnav li {
display:inline;
margin-left:14px;
}

ul#topnav li a {
text-decoration:none;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
}

ul#topnav li a.active, ul#topnav li a:hover {
color:#FFFFF0;
}
-->
ul#menu {
margin:0px;
padding-top:440px;
padding-right:15px;
position:absolute;
right:0px;
width: 966px;
top: -4px;
height: 56px;
}

ul#menu li {
display:inline;
margin-left:14px;
}

ul#menu li a {
text-decoration:none;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
}

ul#menu li a.active, ul#menu li a:hover {
color:#FFFFFF;
}





<div id="main">

<div class="container">

<div id="header">

<ul id="topnav">
<li><a href="http://www.bensbells.org/Test2.html">Home</a></li>
<li><a href="http://www.bensbells.org/Mailing_2.html">Join our mailing list</a></li>
</ul>
<ul id="menu">
<li><a href="http://www.bensbells.org/About_2.html">About us</a></li>
<li><a href="http://www.bensbells.org/Studio_2.html">Studio info</a></li>
<li><a href="http://www.bensbells.org/Distribution_2.html">Distribution</a></li>
<li><a href="http://www.bensbells.org/KindKids_2.html">Kind kids</a></li>
<li><a href="http://www.bensbells.org/KindnessCorrdior_2.html">Kindness corridor</a></li>
<li><a href="http://www.bensbells.org/Belling_2.html">Belling</a></li>
<li><a href="http://www.bensbells.org/Stories_2.html">Stories & Pictures</a></li>
<li><a href="http://www.bensbells.org/Shop_2.html">Shop</a></li>
<li><a href="http://www.bensbells.org/Donate_2.html">Donate</a></li>
</ul>

</div>
Excavatorak
02-22-2010, 02:59 PM
Hello ToddFur,
Your bottom #menu and padding that is covering your #topnav - ul#menu {
height: 56px;
width: 966px;
margin:0px;
padding-top:440px;
padding-right:15px;
position:absolute;
right:0px;
top: -4px;
}
====
For a good visual on what's happening, try this -

ul#topnav li a.active, ul#topnav li a:hover {color:#FFFFF0;}
ul#menu {
height: 56px;
width: 966px;
margin:0px;
padding-top:440px;
padding-right:15px;
position:absolute;
right:0px;
top: -4px;
background: #f00;
}


===========
You are already absolute positioning it, all that padding is doing is making #menu 496px high.
I think your problem started when your ap did not move #menu down? You have top and right set on it the same as you do #topnav.

Try it like this - <!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" />
<title>Untitled Document</title>
<style type="text/css">
body {background: #fc6;}
#header {
height: 600px;
width: 1200px;
margin: 30px auto;
position:relative;
background: #ccc;
}
ul#topnav {
height: 56px;
width: 300px;
margin:0px;
padding-top:15px;
padding-right:5px;
position:absolute;
right:0px;
top: -4px;
}
ul#topnav li {
display:inline;
margin-left:14px;
}
ul#topnav li a {
text-decoration:none;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
}
ul#topnav li a.active, ul#topnav li a:hover {color:#FFFFF0;}
ul#menu {
height: 56px;
width: 966px;
margin:0px;
padding-right:15px;
position:absolute;
right:0px;
bottom: 0;
}
ul#menu li {
display:inline;
margin-left:14px;
}
ul#menu li a {
text-decoration:none;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {color:#fff;}

</style>
</head>

<body>
<div id="header">
<ul id="topnav">
<li><a href="http://www.bensbells.org/Test2.html">Home</a></li>
<li><a href="http://www.bensbells.org/Mailing_2.html">Join our mailing list</a></li>
</ul>
<ul id="menu">
<li><a href="http://www.bensbells.org/About_2.html">About us</a></li>
<li><a href="http://www.bensbells.org/Studio_2.html">Studio info</a></li>
<li><a href="http://www.bensbells.org/Distribution_2.html">Distribution</a></li>
<li><a href="http://www.bensbells.org/KindKids_2.html">Kind kids</a></li>
<li><a href="http://www.bensbells.org/KindnessCorrdior_2.html">Kindness corridor</a></li>
<li><a href="http://www.bensbells.org/Belling_2.html">Belling</a></li>
<li><a href="http://www.bensbells.org/Stories_2.html">Stories &amp; Pictures</a></li>
<li><a href="http://www.bensbells.org/Shop_2.html">Shop</a></li>
<li><a href="http://www.bensbells.org/Donate_2.html">Donate</a></li>
</ul>
<!--end header--></div>
</body>
</html>
ToddFur
02-22-2010, 09:18 PM
Yep, that was it! This helps so much -- I appreciate it!