CODEWITHSUNDEEP
css
Jaakko Seppälä
Jaakko Seppälä

Reputation: 754

CSS Horizontal navigation bar with background color

Why does this code produce only a white background:

 ul.nav {
   width: 30%;
   border: 1px solid #999;
   margin: 0px auto;
   background-color: #00ff7f;
 }
 ul.nav li {
   display: inline;
   float: left;
   width: 20%;         
 }

Upvotes: 0

Views: 31708

Answers (6)

serraosays
serraosays

Reputation: 7849

Two things:

1) Start more basically and give your elements height and width. At the stage of CSS dev you are probably at, percentages will only confuse you. Additionally, you should alphabetize all of the css properties you use; it will give you code some zen my friend.

2) Lose the display:inline; reference and replace it with display:block;. Display inline will only take up the room it needs, nothing more. In your code, it doesn't need to take up any space because you have only defined the spaces as a percentages. You could read more here: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Try this code instead:

 ul.nav {
   background-color: #00ff7f;       
   border: 1px solid #999;
   height: 20px; /*This is an example*/
   margin: 0px auto;
   width: 400px;        
 }

 ul.nav li {
   background-color: #86182d; /*Example background color*/
   display: block;
   float: left;
   height: 20px; /*This is an example*/
   width: 80px;  /*This is 20% of 400px*/      
 }

This will definitely output something tangible you can work back from with percentages as you learn more.

3) For every question someone answers on here for you, try and answer one yourself. It will help you learn more than you imagined. Good luck in coding...

Upvotes: 1

Sotiris
Sotiris

Reputation: 40036

just delete the float from ul.nav li and change the display:inline to display:inline-block

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179046

This question has been asked many times and in many ways: "Why isn't the container encapsulating my floated items?". It's because css is not a programming language, it is a styling language. CSS reacts fluidly and implicitly and many programmers expect to need to give explicit instructions.

I highly recommend you read more about floating in css. quirksmode has a good page about it. Additionally you should read the w3c spec to get a deeper understanding on the subject.

Upvotes: 0

anon
anon

Reputation:

because your li is displayed inline and floating, which means that the containing ul does net get height from its children. Either give the ul a height or have a containing element around the ul and a clear: both after the ul and give that a background color

Upvotes: 0

Damien
Damien

Reputation: 1217

The UL collapses due to the inner floated elements (the li's). Clear the UL with an overflow: hidden on the ul.nav.

ul.nav
{
   width: 30%;
   border: 1px solid #999;
   margin: 0px auto;
   background-color: #00ff7f;
   overflow: hidden;
}

Upvotes: 1

Douglas
Douglas

Reputation: 37763

Since all of the children of ul.nav are floated, the ul.nav has to content to give it height. Since its height is zero, no background colour renders. You can confirm the ul's size using Firebug.

Upvotes: 0

Related Questions