12-Spalten Grid und Header und Footer über gesamte Breite

**Marchie** · 23.02.2015, 12:21

Hallo,

ich möchte gerne das 12-Spalten Grid nutzen, aber der Header und Footer sollen farblich über die gesamte Bildschirmbreite laufen. Für nur Footer hab ich das schon mla gemacht, indem ich den Footer außerhalb des Wrappers im Template gesetzt habe. Würdet ihr das dann mit dem Header auch so machen? Ich trau mich irgendwie nicht .... man könnte es oben natürlich auch mit einem kachelnden Hintergrundbild lösen, ist aber irgendwie unelegant, oder? Habt ihr einen anderen Ansatz? DANKE!

**Marchie** · 23.02.2015, 17:34

Hallo!

meine Frage hat schon 27 Hits, aber noch keine Antwort. Ist das so außergewöhnlich, was ich machen möchte. Ich habe jetzt mal mit einem eigenen Layoutbereich über dem umschließenden Element probiert, aber das wir irgendwie auch nicht so wie ich mir das vorstelle. Der Footer hingegen passt schon - mehr oder weniger.

Findet sich vlt. doch noch jemand der mir einen Ansatz liefert? Bin etwas am Verzweifeln.

**tab** · 23.02.2015, 18:02

Ich würde es zumindest erst mal probieren mit Header und Footer außerhalb des Wrappers.

**Dirch** · 23.02.2015, 18:34

Das müßte es eigentlich sein:

PHP-Code:


#wrapper {    width: 100%;}
#header .inside,#main .inside,#footer .inside,#kontakt .inside {    width: 960px;    margin: 0 auto;}

Mache das aktuell bei einer Seite auch so. Bei kleineren Breakpoints Mut du entsprechend die Breite dann auf .inside anpassen.

**derRenner** · 23.02.2015, 20:33

Hallo,

so wie auch Dirch das schon schreibt ... ich habe dies auch schon bei dem einen oder anderen Projekt umgesetzt - jetzt auch aktuell mit grid12.

Code:

#wrapper {width:100%; }
#header { width:100%; }
#header .inside { width:960px; margin:0 auto; }
#main { width:100%; } 
#main .inside { width:960px; margin:0 auto; }
#footer { width:100%; } 
#footer .inside { width:960px; margin:0 auto; }

**Wian** · 24.02.2015, 15:20

Ich mache in solchem Fall um den container noch ein div drum, das ich auf 960px beschränke und dann funktioniert auch der Layoutbilder (left/right) normal weiter.

Die Idee, den Header aus dem Wrapper zu nehmen, muss ich mal überdenken.

Grüße!

**Marchie** · 25.02.2015, 15:55

Hallo ihr drei letzten die geantwortet haben!!

Ich habe das erst jetzt gesehen, keine Ahnung warum ich keine Mails dazu bekommen habe. Vielen Dank euch!

Inzwischen habe ich es so gelöst, dass ich tatsächlich den header und den footer aus dem wrapper entfernt habe. Ich hoffe natürlich, dass mir das nicht ein anders mal um die Ohren fliegt :-/ Aber es tut. Den anderen Ansatz finde ich sehr interessant und werde das mal beim nächsten Projekt versuchen.

**mtbler999** · 03.11.2018, 13:50

Hallo,

das Thema ist zwar schon etwas älter, aber ich habe das gleiche Problem.

Ich habe es jetzt so umgesetzt wie oben beschrieben,
leider habe ich dann das Problem, dass die Seite nicht mehr Responsive ist.

ich habe folgendes gemacht.
#wrapper, #header, #main, #footer
auf width:100%

#header .inside,
#main .inside,
#footer .inside {
min-width:768px;
max-width:960px;
margin-right:auto;
margin-left:auto;
margin 0 auto

mit width:960px hab ich es auch schon probiert, geht auch nicht.

Hat jemand eine Lösung?

**MacKP** · 03.11.2018, 17:07

Hallo mtbler999,
wenn die eine min-width oder eine width haben, dann halten die sich auch daran. Wenn du die width von 960px aktuell weg lässt bei den inside Bereichen, dann wird das auch schon wieder responsive.
Ob du dann aber glücklich wirst weiß ich nicht. Du wirst dich glaube ich noch ein wenig mit den Grundlagen von CSS befassen müssen, bevor du noch weiter bastelst und dann für dich am Ende alles nur noch schwieriger wird, weil du dir den ein oder anderen Bock da eingebaut hast.

Viele Grüße

**mtbler999** · 03.11.2018, 18:10

Also ist es nicht möglich ein Grid System, wo der Header und Footer über die gesamte Breite des Bildschirms geht und Responsive zu erstellen?

Gesendet von iPhone mit Tapatalk

**tab** · 03.11.2018, 18:18

Natürlich geht das.
Aber was du oben an CSS geschrieben hast, das finde ich in deiner Test-Website nur zum Teil wieder. Insbesondere das fehlerhafte

Code:

margin 0 auto

Da fehlt schlicht ein Doppelpunkt.
Aber den Selektor sehe ich so nicht, wenn ich mir z.B. #header .inside anschaue, dann ist da nur

Code:

#header .inside {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin 0 auto: ;
}

Also nichts von max-width, statt width. Wie schon von MacKP geschrieben.

**mtbler999** · 03.11.2018, 21:12

das mit dem Doppelpunkt beim margin stimmt natürlich.
Aber das max-width und min-width wird bei mir schon angezeigt.
inside.PNG
Oder liege ich falsch?

**tab** · 03.11.2018, 21:22

Also bei mir kommt da immer noch

Code:

#footer .inside {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin 0 auto: ;
}

Wahrscheinlich bist du im Backend angemeldet und ich sehe noch die Seite und das CSS aus dem Cache. Ja, Neuladen der Seite bringt jetzt ein anderes CSS.

**mtbler999** · 03.11.2018, 21:28

Aber die Website ist jetzt auch noch nicht responsive.

**tab** · 03.11.2018, 21:29

Hmm, das liegt dann wohl an deinem min-width:768px; Wozu soll das gut sein? Damit wird das inside-div natürlich nie kleiner als 768px und du bekommst deshalb eine horizontale Scrollbar.