Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Doegena Fennich
Doegena Fennich
8,974 Points
Posted by Doegena Fennich
Doegena Fennich
8,974 Points

Header background-color wont appear

for some reason the background color wont appear here's my code;

HTML

<!DOCTYPE html>
<html>
<head>
    <title>marketing</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/marketing.css">
</head>
<body>
    <header class="header">
        <h1>Dresses</h1>
        <nav class="nav">
        <ul>
            <li><a href="#">about us</a></li>
            <li><a href="#">contact</a></li>
            <li><a href="#">blog</a></li>
        </ul>
        </nav>
    </header>
</body>
</html>

CSS 

* {
    box-sizing: border-box;
}

html {
    background: #222;
}

body {
    margin: 0;
}

.header {
    background-color: red;
    width: 70%;
    margin: 40px auto 0px;
}

.header h1 {
    float: left;
    display: inline-block;
    color: red;
    font-size: 1.1em;
}

.header .nav ul {
    float: right;
    display: inline-block;
    list-style: none;
}

.header .nav ul li {
    padding: 0px 15px;
    float: left;
}

.header .nav ul li a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: .8em;
    color: red;
}
eck
eck
43,038 Points

Which one isn't the background color showing up for?

5 Answers

eck
eck
43,038 Points

So, what it looks like is probably happening is that all the contents of .header are being floated, which has a side-effect of causing the parent element's height to collapse. The header is red, but has a height of 0 so you can't see it

There are few ways you can deal with this:

  1. Explicitly set a height for .header
  2. Using a clearfix for .header
  3. Using another layout method instead of floats

If you opt for the second option, you can use these styles to prevent your .header from collapsing:

.group:after {
  content: "";
  display: table;
  clear: both;
}

This class is taken from a CSS-Tricks article about floats. If you put that class on your header element I think everything will be working as you expect.

Doegena Fennich
Doegena Fennich
8,974 Points
Doegena Fennich
Doegena Fennich
8,974 Points

Erik Krieg Thanks Erik, it worked! If you dont mind can you help me to solve how to make the nav li background-color the same height as the parent element(same height as the .header class), kinda forgot how it works ...

eck
eck
43,038 Points

I think it will be good if you put the .group class on that too :D

Doegena Fennich
Doegena Fennich
8,974 Points
Doegena Fennich
Doegena Fennich
8,974 Points

Hey Erik Krieg, me again i tried the group class on the li and the ul tag sadly the results are still the same the background-color won.

http://jsbin.com/himacofumi/edit?html,css,output (preview it on full screen)

<!DOCTYPE html>
<html>
<head>
    <title>Dresses &amp; Headscarves</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/marketing.css">
</head>
<body>
    <header class="header group">   
        <h1><a href="#">Dresses &amp; Headscarves</a></h1>
        <nav class="nav">
        <ul>
            <li><a href="#">about us</a></li>
            <li><a href="#">contact</a></li>
            <li><a href="#">blog</a></li>
        </ul>
        </nav>
    </header>
</body>
</html>

CSS

* {
    box-sizing: border-box;
}

html {
    background: #000;
}

body {
    margin: 0;
}

.header {
    background-color: #111;
    width: 60%;
    margin: 90px auto 0px;
    padding: 10px;
    border-radius: 8px; 
    height: 75px;
    border-bottom: 3px solid red;

}

.header h1 {
    float: left;
    display: inline-block;
    margin-left: 10px;
    color: #fff;
    font-size: 1.3em;
}

.header h1 a {
    text-decoration: none;
    color: #fff;
    text-shadow: 2px 2px #666;
}

.header .nav {
    height: 100%;
}

.header .nav ul {
    float: right;
    margin-right: 40px;
    display: inline-block;
    list-style: none;
}

.header .nav ul li {
        background-color: red;
    padding: 0px 15px;
/*  margin-right: 5px;*/
    float: left;
    vertical-align: top;
/*  border-left: 2px solid #777;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;*/
    height: 100%;
}

.header .nav ul li a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: .9em;
    color: #fff;
}

.header .nav ul li a:hover {
    color: #999;
    transition: 95ms ease-in-out;

}

.group:after {
    content: "";
    display: table;
    clear: both;
}
eck
eck
43,038 Points

What are you trying to make your list items look like? If you can find a screenshot or image of something like the design you are trying to create then I can offer you some suggestions :)

Doegena Fennich
Doegena Fennich
8,974 Points
Doegena Fennich
Doegena Fennich
8,974 Points

As you can see in the image, the li background has the same height as the parent element.

http://imgur.com/a/EFwas

Erik Krieg

eck
eck
43,038 Points

Not sure if this is what you are looking for: http://jsbin.com/gahaqijepo/1/edit?html,css,js,output

You have too much padding and margin on your ul for the list items to fit side by side.

Regardless of whether or not what I did there is what your were looking for, I think you should look into this course on flexbox layouts. While you can achieve a lot with just floats, they were not actually created for the purpose of making layouts. Flexbox is designed exactly for creating layouts and is really good for navigations. If you can get some practice with that I would recommend it over using floats.

Alternatively it might be a good idea to look into a framework like Bootstrap, there is a Treehouse tutorial for that here: https://teamtreehouse.com/library/bootstrap-4-basics

Doegena Fennich
Doegena Fennich
8,974 Points
Doegena Fennich
Doegena Fennich
8,974 Points

Thanks Erik Krieg for all the information, very informative! I skipped the flexbox layout course(front-end development track) for various reasons but i just finished the html forms course so i'm going to start the flexbox layout course tomorrow.

Cheers