CODEWITHSUNDEEP
htmlcss
user3673275
user3673275

Reputation: 43

How to make a top wrapper(?) with a background color

First off, I'm really new to this so sorry if I sound dumb ;_;. Now, I'm trying to make a background color on my list items. Like this site has, black bar with the logo, search bar etc.. I tried wrapping divs everywhere but nothing seems to work.

HTML

<nav class="nav-menu">
    <div class="container">
        <ul>
            <li>About Us</li>
            <li>Staff</li>
            <li>Schedule</li>
            <li>Home</li>
        </ul>
    </div>
</nav>

CSS

.nav-menu ul {
margin-right: 50px;
}
.nav-menu li {
list-style: none;
display: inline;
margin-left: 30px;
float: right;
color: red;
}
.container {
color: black;
}

http://jsfiddle.net/Hm4KJ/

Upvotes: 0

Views: 56

Answers (3)

dared
dared

Reputation: 26

You could add a clearfix after your floating element.

html: put a 

<div class="clear"></div>

after your <ul></ul>

related css:

.clear {
    clear: both;
}

and you would need to change color: black; to background-color: black; ;-)

see: http://jsfiddle.net/Hm4KJ/4/

Upvotes: 0

Janzell Jurilla
Janzell Jurilla

Reputation: 1219

if you only want a background color in each list item you can use this one:

.nav-menu li {
    list-style: none;
    display: inline;
    margin-left: 30px;
    float: right;
    color: red;
    background:#000000;
    display:inline-block;
    padding:5px 10px;
}

http://jsfiddle.net/Hm4KJ/2/

Upvotes: 0

potashin
potashin

Reputation: 44581

Set overflow to auto to display everything in the .content div (now everything is hidden because you use float property)

.container {
   background: black;
   overflow:auto;
}

I guess it is a typo, anyway , you should set background property instead of color to set background color.

Example

Upvotes: 2

Related Questions