help with positioning

**dellerdynamics** · 12-13-2008 06:41 PM

i have no idea what is wrong with this code, but the subnav starts after the search for some reason. How do i make the subnav start on its own line directly after the main navigation.

HTML Code:

<!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" xml:lang="en" lang="en">
<head>
<title>title</title>
<style type="text/css">
ul#nav {
    margin: 0;
    padding: 0 0 0 6px;
    width: 954px;
    height: 44px;
    background: #000 url(images/nav_bg.gif) repeat-x;
    color: inherit;
}
ul#nav li {
    float: left;
    margin: 0;
    padding: 15px 0 0 0;
    list-style-type: none;
    text-transform: uppercase;
    font-variant: small-caps;
    font: 10px "Trebuchet MS", Arial, Helvetica, Sans-serif;
}
ul#nav li a {
    text-decoration: none;
    padding: 13px 30px 14px 30px;
}
ul#nav li a:link, ul#nav li a:visited {
    background-color: inherit;
    color: #fff;
}
ul#nav li a:hover, ul#nav li a:active {
    background-color: inherit;
    color: #c9f381;
}
#nav input {
    background: #272727 url('images/searchbg.png') repeat-x;
    color: #999;
    border: 1px solid #444;
    font-size: 10px;
    padding: 0px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    position: relative;
    right: 6px;
    bottom: 10px;
}
/* SUBNAV */

ul#subnav {
    margin: 0;
    padding: 0 0 0 30px;
    width: 930px;
    height: 31px;
    background: #000 url(images/subnav_bg.gif) repeat-x;
    color: inherit;
    font-size: 9px;
}
ul#subnav li {
    float: left;
    margin: 0;
    padding: 0 0 0 0;
    list-style-type: none;
    text-transform: uppercase;

}
ul#subnav li a {
    text-decoration: none;
    padding: 7px 20px 7px 20px;
    background: transparent url(images/subnav_sep.gif) no-repeat left;
}
ul#subnav li a:link, ul#subnav li a:visited {
    background-color: inherit;
    color: #fff;
}
ul#subnav li a:hover, ul#subnav li a:active {
    background-color: inherit;
    color: #ccc;
}
ul#subnav li#subnavfirst a:link, ul#subnav li#subnavfirst a:visited {
    background: transparent url(images/subnav_icon.gif) no-repeat left;
    color: #fff;
}
ul#subnav li#subnavfirst a:hover, ul#subnav li#subnavfirst a:active {
    background: transparent url(images/subnav_icon.gif) no-repeat left;
    color: #ccc;
}
</style>
</head>

<body>
<ul id="nav">
<li><a href="/index/" title="Home">Home</a></li>
<li><a href="/projects/" title="Projects">Projects</a></li>
<li><a href="/software/" title="Software">Software</a></li>
<li><a href="/photoshop/" title="Photoshop">Photoshop</a></li>
<li><a href="/other/" title="Other">Other</a></li>
<li><a href="/about/" title="About">About</a></li>
<li><a href="/i7/" title="Item 7">Item 7</a></li>
<li><form id="googleSearchForm" method="get" action="http://www.google.com/search">
            <p>
                <input id="googleSearchInput" value="Search" onfocus="this.value='';" onblur="this.value='Search';" type="text" />
            </p>
        </form></li>
</ul>
<ul id="subnav">
 <li id="subnavfirst"><a href="javascript: void;" title="Login">Login</a></li>
 <li><a href="javascript: void;" title="">Item 1</a></li>
 <li><a href="javascript: void;" title="">Item 2</a></li>
 <li><a href="javascript: void;" title="">Item 3</a></li>
</ul>
</body>
</html>

**misson** · 12-14-2008 01:49 PM

I assume you're talking about the fact that the "Login" link is on the far right of the navbar. This is because all the li are floated & there's space for the "login" link on the right. To fix this, you need to apply a "clear: left" to some element after #nav ends. If it weren't for IE6, you could use:

Code:

ul#subnav li:first-child {
    clear: left;
}

Until IE6 is dead, try:

Code:

ul#subnav {
    clear: left;
}

or

Code:

ul#subnav li:first-child, ul#subnav li#subnavfirst {
    clear: left;
}

See how each approach affects layout. I still include a "ul#subnav li:first child" selector above to prepare for when "#subnavfirst" is unneeded. "clear:both" will also probably work.

One other suggestion: use class attribute rather than id when you want to mark a node to be picked up by a CSS selector based on a property it might share with other nodes, such as being a first child. The advantages can be subtle but useful.

Code:

ul#subnav li:first-child, ul#subnav li.firstChild {
    clear: left;
}
...
<li class="firstChild"><a href="javascript: void;" title="Login">Login</a></li>

BTW, good job with the test case; not too much extraneous markup to wade through.

**vol7ron** · 12-15-2008 11:03 AM

You should be fine with just subnav

ul#subnav { clear: left; }

also, take away the paragraph tags (<p>) around the <form> element.
after you do that, change the input box's positioning: #nav input {bottom: 10px;} to 0px;

Thread: help with positioning

LinkBack

Thread Tools

Display

help with positioning

Re: help with positioning

Re: help with positioning

Similar Threads

CSS Positioning Help

CSS positioning woes.

positioning ads in Coppermine

Posting Permissions