# Header & Footer 100% breit, Content feste Breite ?



## LLeerrooyy (17. Mai 2011)

Hi,

ich arbeite mit dem 960 Grid System.
Jetzt will ich aber gerne den  Header und Footer Bereich auf 100% bringen, den Rest aber in der festen Breite lassen.
Header und Footer sollen über die komplette Breite einfach eine Hintergrundfarbe haben.
Ich weiß nicht wie ich das realisieren kann.
Es soll quasi so werden wie auf chip.de z.B.
Kann mir jemand sagen wie ich das realisieren kann ?

Gruß


----------



## mgraf (17. Mai 2011)

Morgen,
genauso wie auf chip.de
Einfach für Header und Footer eigene Divs anlegen - außerhalb des GridSystems.

Und erst für den Content die 960.gs-Klassen anwenden.

TIP: Installier dir eine kleine Hilfe, für FF - Firebug, Chrome - Chromebug, IE - Developer Tool
Damit kannst du relativ einfach die anderen Seiten ausspionieren und nachsehen, wie die das gemacht habe.

lg
michi


----------



## LLeerrooyy (17. Mai 2011)

Hi,

aber wenn ich doch eigene Divs anlege, dann verschieben die sich nicht mit.
Bzw. der Footer. Um den gehts eigentlich.
Wenn ich mal mehr mal weniger Content habe, soll sich der Footer natürlich auch nach unten verschieben.
Müssen dann nicht alle Divs von einem Div umschlossen werden ?

PS: Firebug ist installiert.


----------



## Parantatatam (17. Mai 2011)

Der Trick liegt darin, dass du in deiner Content-Box oberhalb und unterhalb jeweils noch eine weitere Div-Box hast, welche die gleiche Höhe haben wie dein Header bzw. den Footer. Sollte es nun passieren, dass der Content eigentlich unterhalb des Footers verschwinden sollte, dann sorgt die unter Div-Box dafür, dass sich die Rollleisten einblenden.


----------



## LLeerrooyy (17. Mai 2011)

Hmm, ich verstehe es immer noch nicht so richtig.
Wenn ich doch noch 2 weitere Divs in meinem Contentbereich habe, dann kann ich nicht über die feste Breite von 960 Pixel gehen, weil es ja vom Contentdiv umschlossen ist.


----------



## LLeerrooyy (19. Mai 2011)

Jemand noch nen konkreten Tipp ? Ich bekomme es nicht hin


----------

