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

Posted by Patrick McDermott
Patrick McDermott
2,377 Points

background, divs

Hi,

I have a page where I have created a div "header" to hold my logo, contact detaisl and navigation. When I try to change the background colour, nothing happens. I can change text colour and size but not the background. Can someone advise me. Cheers

<body> <div class="container clearfix">

    <div class="header">

        <div id="logo" class="grid_5">
            <p>Rich <span id="peach">Peach </span>Design</p>
        </div>

        <div id="contact" class="grid_3 omega">
            <p><span id="phone">07534934730</span><br><span id="email">richpeachdesign@hotmail.com</span></p>
        </div>

        <div id="nav" class="grid_8 omega">
            <ul>
                <li><a href="#">Home</a><li>
                <li><a href="#">About us</a><li>
                <li><a href="#">Portfolio</a><li>   
                <li><a href="#">Services</a><li>
                <li><a href="#">Contact Us</a><li>
            </ul>
        </div>

    </div>

4 Answers

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

You got the CSS that goes with this HTML to hand?

Jump on codepen.io, copy in your HTML and CSS and then it's much easier to see what's going on.

Paul Linger
Paul Linger
1,676 Points
Paul Linger
Paul Linger
1,676 Points

Matt is correct here, we'll need to see your CSS before we can actually tell you what's going on :)

Patrick McDermott
Patrick McDermott
2,377 Points
Patrick McDermott
Patrick McDermott
2,377 Points 
/* dark grey: #474747
    light grey: #8C8C8C;
    footer-black: #141414;
    peach: #F08811;
    navigation : #363636;;
*/

html {
    height: 100%;
    width: 100%;
    background: -webkit-linear-gradient(top left, hsla(73, 0%, 5%, 1), transparent 80%),
                url('img/dark_wood.png');
                background-size: 10px cover;
}

body {
    font-family:'Archivo Narrow', sans-serif;
    height: 100%;
}

a {
    text-decoration: none;
}

p {
    font-family: 'Archivo Narrow';
    letter-spacing: .1em;
}

#main1 {
    background: inherit;
    color: #fff;
}

#logo p {
    font-size: 4em;
    font-family: sans-serif;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0px 0px 5px #fff;
    margin-top: .05em;
    margin-bottom: -0.5em;
    letter-spacing: -.1em;
    line-height: .74em;
}

#nav {
    margin-top: 0em;
    background: -webkit-linear-gradient(top, #363636, #dbd4db 10%, #363636 20%);
    border-radius: 5px 5px 5px 5px;
    border: solid 1.5px 1.5px 0 1.5px #1a1a1a;
    box-shadow: 0px 5px 5px #000;
}

#nav ul {
    float:right;
    list-style: none;
}

#nav li {
    float: left;
    font-family: 'Archivo Narrow';
    font-size: 1.2em;
    letter-spacing: .1em;
}

#nav a {
    color: #F08811;
    margin-right: 1.25em;
    text-shadow: 0 0 2px #F08811;
}

#nav a:hover {
    color: #fff;
    text-shadow: 0px 0px 5px #fff;
    transition-property: color, text-shadow;
    transition-duration: .6s;
}

#contact {
    color: #fff;
    font-size: 1.3em;
    margin-top: -.5em ;
    line-height: 1.5em;
    letter-spacing: .05em;
    }

#peach {
    color: #F08811;
    text-shadow: 0px 0px 5px #F08811;
}

#phone:before {
    padding-right: 10px;
    content: "\2706";
    text-shadow: 0px 0px 5px #F08811;
    font-size: 2em;
    color: #F08811;
}

#email:before {
    padding-right: 10px;
    content: "\2709";
    text-shadow: 0px 0px 5px #F08811;
    font-size: 2em;
    color: #F08811;
}

#main1 {
    padding-left: 10px;
    margin: 0;
    background: #363636;
    width: 40em;
    box-shadow: 4px 3px 5px #000, -4px 3px 5px #000;
    border-radius: 5px;
    height: 100%;
}

#brochure-ad {
    background: #363636;
    padding-left: 10px;
    border-radius: 5px;
    box-shadow: -4px 3px 5px #000, 4px 3px 5px #000; 
}

#brochure-ad img {
    background: #363636;
    padding: 5px 15px 0 5px;
}
Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

bit like this?

http://codepen.io/anon/pen/aIhyq

there's no normalize on there so there's padding.

I'll change that now actually, do a quick clearfix.

PS - before you go any further with anything...get rid of the gradient background. We don't use gradients like that anymore. ;) I'm liking the rest though, looks good. Even if there isn't much, can tell you've an eye for aesthetics.