PDA

View Full Version : Problem with Navigation Selector


TheNostradamus
11-07-2007, 06:51 PM
Hi, Im currently in the middle of a css tutorial. However, im having problems with the Nav Selector.

The link options should all be in a line going from right to left but this is what i get>> http://www.holiday-getaway.co.uk/basiclayout1.htm

this is the css

#nav {
border: 1px solid #000000;
}

#nav ul{
padding: 0;
margin: 0;
background-color:#00FF99;
}

#nav ul li{
display: inline;
padding: 0;
margin: 0;
}

#nav ul li a{

color:#FFFFFF;
background-color:#3333cc;
text-decoration: none;
padding: 0 25px 0 25px;
border-right: 1px solid #000000;
text-align: centre;
width: 9em;
}

#nav ul li a:hover, #nav ul li a:focus {
background-color: #990000;
}

Any ideas guys???

Cary
11-08-2007, 03:25 AM
I'm not sure if this styling will give you what you have in mind.

#nav{
border-bottom: 1px solid #000000;
float: left; /* float #nav so it's height will contain the floated ul */
background: #00FF99; /* move background-color here so it will still be visible */
}

#nav ul{
padding: 0;
margin: 0;
float: right; /* move nav to the right side. */
}
If you first float #nav ul to the right, you'll see that the background color disappears.

If you then move the background color to #nav, you still won't see the background color because #nav doesn't have any height. It contains #nav ul, but #nav ul is being floated and floated elements don't affect the height of a containing div, unless the containing div is also floated (or a clearing element is used).

Finally, float #nav to the left, and its height will be affected by the floating #nav ul element within it, making #nav's background-color visible.

domedia
11-08-2007, 12:35 PM
If a container only has floated elements, the parent containers background will not show up because all the floated elements are taken outside the flow of the document. Use this to make it embrace all floated elements:

.parent {
height: 1%;
overflow: hidden;
}