Hello,
I've been going crazy trying to solve this problem....In the header area of
this site I'm working on, I have 3 horizontal navigation bars, one under the
other, floated to the right. From top to bottom--A tools menu, a main menu, and
a sub menu. In the long run I want to make the sub menu be nested within the
main menu, but I'm not ready to tackle that in CSS just yet. So for now the sub
menus are separate unordered lists that I hide when appropriate.
I'm just working this out in Firefox on both a mac and pc at the moment and am
not ready to start browser de-bugging.
My tools menu and my sub menu float just fine to the right, but I can't get my
main menu (the middle one) to do so without reversing the order of my list
items so that the first one ends up being the furthest right on the page. The
code below is my latest version and the menu sticks to the left of the page.
I've tried just about every combination of float and clear I can think of, even
ones that made no logical sense whatsoever and am stumped. Any help you can
offer would be greatly appreciated.
I apologize that I don't have a server to upload this to at the moment. I hope
I have provided enough code for you to take a look. If you need more
information about the page, I will do my best to provide it.
Thanks in advance,
Kristin
/* ------------Tools menu------------ */
#toolsnav {
float: right;
list-style-type: none;
margin: 0;
padding: 0;
background: url(../pics/headerbackground.gif);
}
#toolsnav li {
float: left;
line-height: 1.1em;
margin: 0 5px 0 -5px;
padding: 0 5px 0 5px;
list-style-type: none;
}
/* ------------WFCFIA MENU--------- */
#mainnavcontainer {
clear: both;
width: 100%;
background: url(../pics/headerbackground.gif);
}
#mainnav {
margin: 0;
padding: 0 0 6px 0;
list-style-type: none;
width: 50%;
background: url(../pics/headerbackground.gif);
}
#mainnav ul {
float: right;
margin: 0;
padding: 0;
list-style-type: none;
color: #467;
}
#mainnav li {
display: inline;
}
/* ------------WCFIA sub level navigation------------ */
#subnavcontainer {
clear: both;
float: right;
background-color: #578;
color: #fff;
}
.subnav {
clear: right;
float: right;
margin: 0;
padding: 2px 0 2px 0;
width: 100%;
background-color: #578;
color: #fff;
}
.subnav ul, .subnav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
color: #ccc;
background-color: #578;
font-weight: bold;
}
************************ HTML ********************************
<div id="toolsnav">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="contact/index.html">Contact Us</a></li>
<li><a href="intranet/">Intranet</a></li>
<li><a href="sitemap.html">Site Map</a></li>
<!-- SEARCH FORM -->
<li>
<form action="" method="get">
<input name="search" type="text" value="Search" size="20"
maxlength="60" />
<input name="go" type="button" value="Go!" />
</form>
</li>
</ul>
</div> <!-- END #TOOLSNAV -->
<div id="mainnavcontainer">
<ul id="mainnav">
<li><a href="aboutus/index.html">About Us</a></li>
<li><a href="calendar/index.html">Calendar</a></li>
<li><a href="people/index.html">People</a></li>
<li><a href="fs_resources/index.html">Faculty & Student
Resources</a></li>
</ul>
</div> <!-- END #MAINNAVCONTAINER -->
<div id="subnavcontainer">
<ul class="subnav">
<li>About Us:</li>
<li><a href="aboutus/history.html">History</a></li>
<li><a href="aboutus/ov_affiliates.html">Affiliates Overview</a></li>
<li><a href="aboutus/ov_administration.html">Administration
Overview</a></li>
<li><a href="aboutus/communications.html">Communications</a></li>
</ul>
...other lists for hidden submenus...
</div> <!-- END #SUBNAVCONTAINER -->
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
