CODEWITHSUNDEEP
htmlcssbackground-color
Yehonatan
Yehonatan

Reputation: 3225

background-color fills another tag | CSS

I have a simple html page with some basic css. For some reason banner overrides the ul with his background-color.

http://jsfiddle.net/NmRAB/ 

 <ul>
    <li>
        <h1>veediback</h1>
    </li>
    <li>Groups</li>
    <li>Discover</li>
</ul>
<div id="banner"></div>

CSS:

    html, body {
    width:100%;
    height:100%;
}
body {
    line-height: 1;
    margin:auto;
    text-align:center;
}
h1 {
    font-style: italic;
    display: inline;
    color:#3366FF;
}
li {
    padding-left: 20px;
    list-style-type: none;
    display: inline;
}
ol, ul {
    float:left;
    list-style: none;
    display: block;
    margin-left:20vw;
}
#banner {
    height:30%;
    background-color:black;
}

Upvotes: 1

Views: 65

Answers (4)

Gajen
Gajen

Reputation: 466

@chris, UL is float:left in your css which is overriding banner div. Try using clear:both in banner.

Upvotes: 0

G.L.P
G.L.P

Reputation: 7217

Here is the link

CSS:

li {
    padding-left: 20px;
    list-style-type: none;
    display: inline;
    color:#fff;
}

Upvotes: 0

Aida_Aida
Aida_Aida

Reputation: 551

It is due the float: left; which removes all the <li> elements from the flow of the web and leaves your <ul> with 0px height.

What you want to do is to clear the .banner, by applying clear:left; or clear: both;

Upvotes: 1

Christoph B&#252;hler
Christoph B&#252;hler

Reputation: 2923

The ul is still there, you just can't see it, because it is also black. You have to change the color of the list items, or the background. And if you want the banner to appear after the list, you should get rid of the "float: left;" of "ol, ul".

Upvotes: 1

Related Questions