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 Megan O'Neill
Megan O'Neill
1,990 Points

Am I going about this the right way?

Hi, my name's Megan and I'm a total n00b at this.

I've been studying how to make a website for a few weeks and much to my amazement I've actually been able to create something. The thing is that I'm not sure if I've gone about it the right way and I need some help and advice! I have a vision of what I'd like my website to look like; well, the top part of the page, at least. The problem I have with what I've created is that there's a little bit of my background image poking out under the tabs, and I'm not sure if it will look quite the same on all browsers, even though I'm using the normalize css.

I will try to attach a graphic of what I want it to look like and my html. I would be extremely grateful for any help, thanks very much :)

7 Answers

Megan O'Neill
Megan O'Neill
1,990 Points
Megan O'Neill
Megan O'Neill
1,990 Points

style.css:

body{
    font-family: 'Telex', sans-serif;
    color: #000033;
    background: #FFEEFF url('Images/Background-Banner.png') repeat-x;
    background-size: 46em;
    }

a {
    color: #000033;
    text-decoration: none;
    }   

.nav {
    padding: 15px 30px;
    margin: 40px 40px;
    border-radius: 25px;
    }

ul.nav {
    margin: 120px 0 120px 0;
    list-style: none;
    float:center;
    }

ul.nav li{
    float: left;
    margin-right: 40px;
    padding: 10px 0 0 0;
    background-color: #811AFF;
    border-radius: 10px 10px 0 0;
    }

ul.nav li a:hover {
    background-color: #FFEEFF;
    margin: 120px 0 0 0;
    padding: 10px 0px 0 0px;
    border-radius: 10px 10px 0 0;
    }
Megan O'Neill
Megan O'Neill
1,990 Points

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Music School - Piano</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Telex' type='text/css'>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
</head>

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


        <ul class="nav">
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Modules</a></li>
            <li><a href="#">Achievements</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">FAQs</a></li>
            <li><a href="#">Account</a></li>
            <li><a href="#">Support</a></li>
        </ul>
    </div>
</body>

</html>

I don't know how to put a picture up, but I hope that's enough information for someone to help me :/

Matthew O'Connell
Matthew O'Connell
4,044 Points

How does it look if you replace your last line of css with:

ul.nav li a:hover { background-color: #FFEEFF; margin: 0px 0 0 0; padding: 10px 0px 0 0px; border-radius: 8px 8px 0 0; }

?

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

A couple of things I see that may or may not be affecting what you are seeing versus what you want to see:

  • background-size is in em and everything else is in px (try to be consistent where it's relevant)
  • both .nav and ul.nav have margins and each are different

It may be a little hard to troubleshoot this without a reference or assets to test with.

Megan O'Neill
Megan O'Neill
1,990 Points
Megan O'Neill
Megan O'Neill
1,990 Points

Thanks guys... what do you mean by a reference or asset? How do I use one of those?

Cheers.

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Oh, by reference I meant a screenshot and by asset I meant the background image, or at least the height you want it to be if it is being stretched, since you're using repeat-x. Also, is the bottom of the background supposed to line up with the bottom of the nav or with the top of the nav? To move forward, aside from us knowing the above, you could try adjusting the top margin of the nav to get it line up the way you would like.

Megan O'Neill
Megan O'Neill
1,990 Points
Megan O'Neill
Megan O'Neill
1,990 Points

How do I put a screenshot in this thread, though?

Sean T. Unwin
Sean T. Unwin
28,690 Points

Upload the screenshot to an image hosting service e.g. imgur.com or imageshack.us . There are others of course but I know that those don't require a login to upload, but use what you want. Then use: [alt text](URL-to-image "optional:Title").

Sean T. Unwin
Sean T. Unwin
28,690 Points

I can't edit my post... so, check the Markdown Cheatsheet at the bottom of the reply box to add an image.

Megan O'Neill
Megan O'Neill
1,990 Points
Megan O'Neill
Megan O'Neill
1,990 Points

Haha, thanks! That's cool how you got that image in your post!

Megan O'Neill
Megan O'Neill
1,990 Points
Megan O'Neill
Megan O'Neill
1,990 Points

OK, this is kind of how I want it to look like: http://meganeoneill.imgur.com/all/ How should I write the code for that? I have a feeling that I haven't gone about it the right way :(

Thanks for the advice about consistency of units. I did think that but I forgot to change it. I'll do that. I'll also try what Matthew suggested, but I have a feeling I need to do more to it than that...

Thanks so much.

Matthew O'Connell
Matthew O'Connell
4,044 Points

Megan,

I checked out your image. It looks like the issue you're running into has to do with the fact that you've set the background image as a background to the entire "body" element.

The "body" of an HTML page includes everything (not just your header/navigation.) You can either mess around with the position of your "nav" div (but this is probably a bad way of going about it) or create a new "header" div on top of the "nav" div and set the image as the background-image of that. This way, your image will only fill the new header.

If you want to mess around with the code and post the example of your entire code you can use http://jsfiddle.net/ and then just copy the url from there to here after you've set it up.