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 Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Could somebody help me with my banner?

Hi, Im trying to copy this webpage .

I did get a bit help on the beginning , and I'm learning it and doing it so when i finish it, it will be like a resource to learn form and apply it from .

But as I'm going throw it, not everything is going as i though it will go as well as i repeated my self .

Could somebody give me a tip or say what could i change ?

Heres my webpage

1 Answer

Matthew Greenberg
Matthew Greenberg
8,173 Points
Matthew Greenberg
Matthew Greenberg
8,173 Points

I would start by setting the headbar to position: fixed. It looks like the example headbar has no margin or padding, display block, width 100% ect.

Watch this course.

http://teamtreehouse.com/library/css-layout-techniques

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

What do you mean head bar?

Matthew Greenberg
Matthew Greenberg
8,173 Points

Sorry I meant header not head bar. header is the ID name of your header in your html file. So the css would be...

#header {
position: fixed;
}

There is bunch more styling you would need to make it look clean, but thats the start of it.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

You make me confuse : p you mean style of the webpage or ? because I'm looking to make clean code on my banner : p

Matthew Greenberg
Matthew Greenberg
8,173 Points

Please be as descriptive as you can and I will try to guide you.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Um, i meant :

If you look at the banner e.g. inside the code , and you look inside the banner box, in CSS , the code is a little bit messy so the position of it. Im pretty sure it shouldn't me layer out like that because its a bad code .

And my question is if theres anyone who can give me a tip on it or make some changes to make the banner code clear . So its clean and good.

As e.g. if you look at the two buttons on the right, look at their CSS and I'm sure their messy , not saying about the repeating.

I hope this is enough descriptive : p

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Here i made the changes now, http://codepen.io/anon/pen/NPGqBb . I meant to look at this now ; p or just any tbh i guess

Matthew Greenberg
Matthew Greenberg
8,173 Points

You need to learn how to DRY your code out. You have a lot of unnecessary classes in your html markup and you reuse alot of css. For example in the css... 

.top-button{
    padding:24px 28px;
    background:#0090c5;
    border-radius:6px;
    margin-right:2em;
    display: inline-block;
    letter-spacing: 1px;
    font-weight: 700;
    width:100%;
    margin-bottom:0.5em;
    font-size:2em;
    top:0;
    right:0;
    left:0;
    margin:auto;

}
.bottom-button{
    background:#F2F2F9;
    padding:24px 28px;
    border-radius:6px;
    margin-right:2em;
    display: inline-block;
    letter-spacing: 1px;
    font-weight: 700;
    width:100%;
    font-size:2em;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

This code is big and repeats a lot of styles. You also have attributes that are overwriting styles you had previously declared. For example...

You set the margin-right property to 2em, then overwrite it below by setting margin to auto.

Try this instead...

.top-button,
.bottom-button {
    padding:24px 28px;
    border-radius:6px;
    display: inline-block;
    letter-spacing: 1px;
    font-weight: 700;
    width:100%;
    font-size:2em;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}
.top-button {
    background:#0090c5;
}
.bottom-button {
    background:#F2F2F9;
}

Hope this helps a bit. You should really watch the tutorials on css

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Thank for this but what I'm more interested : p is the layout .

I mean , if you look how this is positioned in the banner, e.g. top:-180px etc.. this stuff