Better Code for this..

[Chester]

I know it’s a matter of preference. But I’m just into gathering of the best practices in coding. Which is more better?

LOGO

…
…

or

LOGO

…
…

I need that outer div/header for my 100% background-color.

Thanks.

[Paulie_D]

LOGO

…
…

is more the way I would tend to go about it.

.page-wrapper would only be used for constraining the page width if necessary etc.

A class of .wrapper is just to generic for me.

>I need that outer div/header for my 100% background-color.

Can’t you use the `` or `` instead?

[Chester]

> Can’t you use the or instead?

No, because the header will have a different background-color. The content will also have a different bg-color, and the footer too.

Now where then should I constrain my whole page to say 960px?

If I will do

.page-wrapper {
width: 960px;
margin: 0 auto;
}

.page-header {
background-color: red;
border-top: 3px solid white;
}

then my background(red) will be limited to 960px.

[Paulie_D]

>Now where then should I constrain my whole page to say 960px?

What I meant was constraining the content (within an overall wrapper).

Since it will be the ‘main’ wrapper I called it .page-wrapper….I could have called it .main-wrapper.

I would just have a header inside that etc.

If you put a color on the body your header will inherit that color unless you override it.

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

[Chester]

OK thanks, but what if I want the green(header) background to extend full width(browser width)and also the grey(main)? All content will just be in the 960px.

[Paulie_D]

Ah…bands.

Couple of ways to do that. Here’s one: http://codepen.io/Paulie-D/pen/dfpFq

…and so on

[Chester]

So I guess I’d go with the HTML5 header/footer tags inside a div wrapper just like my first code. But I’ll go with your naming.

Thanks a lot.

> Ah…bands.

Is that how it’s called? Just curious. Not a native English either.

[Paulie_D]

>Is that how it’s called?

Not an ‘official’ term…that’s just an English word that is appropriate.

[Author]

Posts