Background disappears when my menu items are horizontal

Question

Background disappears when my menu items are horizontal

Navigation

#1 by (5 votes)
#2 by (3 votes)

3

I have the following HTML code:

<div id="topo">
    <div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
    </div>
</div>

And the following CSS:

#topo {
    background-color: #1a1e27;
    color:#FFFFFF; 
    width:950px;
}
#topo li {
    display:inline;
    float: left;
    margin-left: 5px;
}

When I leave this whole code, it loses the background #1a1e27 but leaves my menu horizontal. When I shoot all #topo li {} , it assigns the background color.

What am I doing wrong?

css

asked by anonymous 01.04.2014 / 04:35

2 answers

3

When you float the elements inside a container , it behaves as if it were empty - therefore without dimensions, and without background. The solution is to put overflow: hidden on the container to "clean" the floats. Also note that float: left overrides display: inline . CSS can look like this:

#topo {
    background-color: #1a1e27;
    color:#FFFFFF; 
    width:950px;
    overflow: hidden;
}
#topo li {
    float: left;
    margin-left: 5px;
}

link

Or, as Bacco has suggested, you can put your <li> inline, without floating them.

01.04.2014 / 04:51

Check if HTML is visually filled Command to exit the scope of a function (equivalent to 'break')

score 5 · Accepted Answer

I noticed some problems: Since you used display: inline, float is not necessary, and since there is <a> , the white color of <li> is not working.

This css solves both problems:

#topo {
   background-color: #1a1e27;
   width:950px;
}
#topo li {
   display:inline;
   margin-left: 5px;
}
#topo a {
   color:#FFFFFF; 
}