Joel 0

why is the nav text going out of its div?

4 answers

3
points

Remove the height from your container div.

#header #nav { height: 30px; } 
Answered about 10 years ago by Kyle Murphy
1
point

Because you have specified a fixed height (30px) which is inadequate for the content, and the default setting for the overflow property is "visible"

Answered about 10 years ago by Richard Grevers
1
point

Just in case you are trying to have the list items line up horizontally, you need to set the display property of your list items to inline, like this:

#header #nav li {
 display:inline;
}

What you could also do to optimize your piece of code is use the #navigation id in your UL tag instead of a seperate DIV.

<ul id="nav">
 <li><a href="#">Home</a></li>
</ul>

It can be styled in the same way as you'd style the div, but with less html markup.

Answered about 10 years ago by Jesse Vlasveld
0
points

check this

#wrapper {
    background:red;
    width:960px;
}
#header{
    background:red;
    height:100px;
    position:relative;
}
#header #nav{
    background:blue;
    width:100%;
    position:absolute;
}
#body{
    background:green;
    height:250px;
}
#footer{
    background:#0FF;
}

#nav ul
{
        color:#ffffff;
}

#nav ul li 
{
        display:block;
        float:left;
        padding-left:10px;
        padding-right:10px;
}

#nav ul li  a
{
        color:#fff;
}
Answered about 10 years ago by Gajendra