Body zentrieren und gleichzeitig Elemente danach ausrichten?

[mikethet]

Hallo,

folgendes Problem. Ich will meine Seite zentrieren. Wird das Browser-Fenster verkleinert sollen die "margin"-ränder bis zur width des bodies gehen. Danach erscheint ein Scollbalken. Funktioniert alles super. Hier der Code:

html {background-color: lightblue; height: 100%;}
body {background-color: #ffb440; min-height: 100%; margin: 0px auto; padding: 0; width: 1000px; border: 1px solid black;}

( Ich weiß ich weiß, 1000px sind ungünstig für 800x600 Auflösung, aber es wird sonst einfach zu eng ;)).

Das min-height habe ich einfach mal zur Testweise herangezogen, allerdings ist mir nicht ganz verständlich wie das funktionieren soll. Der height von body richtet sich am der height vom HTML-Körper aus. D.h. minimiere ich das Fenster ist die neue Größe wieder 100% (eh klar). Deswegen schrumpft der "body" mit anstatt dass er einen Scollbalken erzeugt. (Ich will bei vollen Fenster das die Höhe das komplette Fenster(abhängig von der Auflösung) ausfüllt, und bei minimierten Fenster auf der Höhe des vollen Fenster stehen bleibt).

Aber das ist noch nicht das gröbste Problem *g*: Der body hat ja nun die position: static. D.h ich kann keine weiteren Elemente nach ihm Ausrichten, da sich position absolute ja auf das nächst-höhere Element mit position:absolute bezieht. Dadurch passiert, wenn ich neue Elemente einfüge, dass sich die alten verschieben und der Aufwand wäre einfach zu groß sich damit rumzuspielen. Es muss leichter gehen.

Danke im voraus und LG Mike

[misterunknown]

Moin,

body {background-color: #ffb440; min-height: 100%; margin: 0px auto; padding: 0; width: 1000px; border: 1px solid black;}
Das min-height habe ich einfach mal zur Testweise herangezogen, allerdings ist mir nicht ganz verständlich wie das funktionieren soll.

Die Eigenschaft width legt eine feste Breite fest, während min-width eine minimale Breite festlegt. Wenn der Body also keine feste Breite hat, oder width einen relativen Wert hat (beispielsweise 100%), wird er jedoch nicht kleiner als min-width.

Der height von body richtet sich am der height vom HTML-Körper aus. D.h. minimiere ich das Fenster ist die neue Größe wieder 100% (eh klar). Deswegen schrumpft der "body" mit anstatt dass er einen Scollbalken erzeugt. (Ich will bei vollen Fenster das die Höhe das komplette Fenster(abhängig von der Auflösung) ausfüllt, und bei minimierten Fenster auf der Höhe des vollen Fenster stehen bleibt).

Ich verstehe dein Problem nicht ganz.

Aber das ist noch nicht das gröbste Problem *g*: Der body hat ja nun die position: static. D.h ich kann keine weiteren Elemente nach ihm Ausrichten, da sich position absolute ja auf das nächst-höhere Element mit position:absolute bezieht. Dadurch passiert, wenn ich neue Elemente einfüge, dass sich die alten verschieben und der Aufwand wäre einfach zu groß sich damit rumzuspielen. Es muss leichter gehen.

Was ist mit position:relative; ?

Ein sehr gutes Tutorial zum Umgang mit position hat Matthias Apsel hier online gestellt.

Grüße Marco

[Gunther]

Hallo Mike!

folgendes Problem. Ich will meine Seite zentrieren. Wird das Browser-Fenster verkleinert sollen die "margin"-ränder bis zur width des bodies gehen. Danach erscheint ein Scollbalken.

Du meinst, du möchtest dein Body-Element auf dem Viewport zentrieren. Dazu setzt du den linken und rechten Außenabstand auf "auto". Ist der Viewport schmaler als die von dir vorgebene Breite des Body-Elements, erscheint eine horizontale Scrollleiste.

Funktioniert alles super. Hier der Code:

html {background-color: lightblue; height: 100%;}
body {background-color: #ffb440; min-height: 100%; margin: 0px auto; padding: 0; width: 1000px; border: 1px solid black;}

Besser:

  
html, body {height: 100%; width: 100%; margin: 0; padding: 0;}  
body {margin: 0 auto; width: 1000px; background-color: #ffb440; border: 1px solid black;}  

( Ich weiß ich weiß, 1000px sind ungünstig für 800x600 Auflösung, aber es wird sonst einfach zu eng ;)).

Von den Benutzern mit mobilen Endgeräten wie Smartphones mal ganz zu schweigen ...! ;-)

Das min-height habe ich einfach mal zur Testweise herangezogen, allerdings ist mir nicht ganz verständlich wie das funktionieren soll. Der height von body richtet sich am der height vom HTML-Körper aus. D.h. minimiere ich das Fenster ist die neue Größe wieder 100% (eh klar).

Das 'min-height' ist hier m.E.n. überflüssig, denn das Root-Element des Viewports (und nicht "Fenster" oder "Bildschirm"), also der Anzeigebereich der Seite im Browser, ist das HTML-Element und dieses hat (automatisch) die entsprechenden Maße. Für die Vererbung im CSS sagst du dem Browser jetzt noch, dass diese Maße (Höhe + Breite) jeweils 100% entsprechen.

Somit sorgt ein 'body {height: 100%;}' eben auch dafür, dass das Body-Element so hoch ist, wie der Viewport. Und solange du nicht die Overflow-Eigenschaft auf 'hidden' setzt, vergrößert sich die Höhe des Body-Elements automatisch, falls der Inhalt es erfordert.

Deswegen schrumpft der "body" mit anstatt dass er einen Scollbalken erzeugt. (Ich will bei vollen Fenster das die Höhe das komplette Fenster(abhängig von der Auflösung) ausfüllt, und bei minimierten Fenster auf der Höhe des vollen Fenster stehen bleibt).

Das verstehe ich nicht ...!?

Aber das ist noch nicht das gröbste Problem *g*: Der body hat ja nun die position: static.

Ja, das ist der Defaultwert für position.

D.h ich kann keine weiteren Elemente nach ihm Ausrichten, da sich position absolute ja auf das nächst-höhere Element mit position:absolute bezieht.

Nicht ganz richtig. Es bezieht sich auf das nächste Eltern-Element dessen Wert für position nicht static ist, d.h. er kann u.a. auch 'relative' sein.

Dadurch passiert, wenn ich neue Elemente einfüge, dass sich die alten verschieben und der Aufwand wäre einfach zu groß sich damit rumzuspielen.

Elemente "ohne zwingenden Grund" aus dem "normalen Fluss" zu nehmen, war ist noch nie eine gute Idee gewesen. Belasse deine Elemente vom Grundsatz her im normalen Fluss, dann "ordnen" sie sich schon von alleine entsprechend an, sodass du dich auch nicht "damit rumspielen" musst.

Es muss leichter gehen.

Bestimmt! Was denn jetzt eigentlich?

Gruß Gunther

[mikethet]

Hallo Mike!

folgendes Problem. Ich will meine Seite zentrieren. Wird das Browser-Fenster verkleinert sollen die "margin"-ränder bis zur width des bodies gehen. Danach erscheint ein Scollbalken.

Du meinst, du möchtest dein Body-Element auf dem Viewport zentrieren. Dazu setzt du den linken und rechten Außenabstand auf "auto". Ist der Viewport schmaler als die von dir vorgebene Breite des Body-Elements, erscheint eine horizontale Scrollleiste.

Funktioniert alles super. Hier der Code:

html {background-color: lightblue; height: 100%;}
body {background-color: #ffb440; min-height: 100%; margin: 0px auto; padding: 0; width: 1000px; border: 1px solid black;}

Besser:

html, body {height: 100%; width: 100%; margin: 0; padding: 0;}
body {margin: 0 auto; width: 1000px; background-color: #ffb440; border: 1px solid black;}

>   
> > ( Ich weiß ich weiß, 1000px sind ungünstig für 800x600 Auflösung, aber es wird sonst einfach zu eng ;)).  
>   
> Von den Benutzern mit mobilen Endgeräten wie Smartphones mal ganz zu schweigen ...! ;-)  
>   
> > Das min-height habe ich einfach mal zur Testweise herangezogen, allerdings ist mir nicht ganz verständlich wie das funktionieren soll. Der height von body richtet sich am der height vom HTML-Körper aus. D.h. minimiere ich das Fenster ist die neue Größe wieder 100% (eh klar).  
>   
> Das 'min-height' ist hier m.E.n. überflüssig, denn das Root-Element des Viewports (und nicht "Fenster" oder "Bildschirm"), also der Anzeigebereich der Seite im Browser, ist das HTML-Element und dieses hat (automatisch) die entsprechenden Maße. Für die Vererbung im CSS sagst du dem Browser jetzt noch, dass diese Maße (Höhe + Breite) jeweils 100% entsprechen.  
>   
> Somit sorgt ein 'body {height: 100%;}' eben auch dafür, dass das Body-Element so hoch ist, wie der Viewport. Und solange du nicht die Overflow-Eigenschaft auf 'hidden' setzt, vergrößert sich die Höhe des Body-Elements automatisch, falls der Inhalt es erfordert.  
>   
> > Deswegen schrumpft der "body" mit anstatt dass er einen Scollbalken erzeugt. (Ich will bei vollen Fenster das die Höhe das komplette Fenster(abhängig von der Auflösung) ausfüllt, und bei minimierten Fenster auf der Höhe des vollen Fenster stehen bleibt).  
>   
> Das verstehe ich nicht ...!?  
>   
> > Aber das ist noch nicht das gröbste Problem \*g\*: Der body hat ja nun die position: static.  
>   
> Ja, das ist der Defaultwert für position.  
>   
> > D.h ich kann keine weiteren Elemente nach ihm Ausrichten, da sich position absolute ja auf das nächst-höhere Element mit position:absolute bezieht.  
>   
> Nicht ganz richtig. Es bezieht sich auf das nächste Eltern-Element dessen Wert für position nicht static ist, d.h. er kann u.a. auch 'relative' sein.  
>   
> > Dadurch passiert, wenn ich neue Elemente einfüge, dass sich die alten verschieben und der Aufwand wäre einfach zu groß sich damit rumzuspielen.  
>   
> Elemente "ohne zwingenden Grund" aus dem "normalen Fluss" zu nehmen, war ist noch nie eine gute Idee gewesen. Belasse deine Elemente vom Grundsatz her im normalen Fluss, dann "ordnen" sie sich schon von alleine entsprechend an, sodass du dich auch nicht "damit rumspielen" musst.  
>   
> > Es muss leichter gehen.  
>   
> Bestimmt! Was denn jetzt eigentlich?  
>   
> Gruß Gunther  
  
  
Hallo,  
  
erstmal danke an euch beiden und Marco, der Link hat sehr geholfen!  
  
Jedenfalls tun sich mir noch drei Fragen auf:  
  
1)Das bedeutet, ich weise dem Body relative zu und kann dann jedes Kind-Element mit absolute nach dem Body ausrichten und aus dem Textfluss nehmen(Feststellung und Frage! gg)  
  
2) Kann ich dann Elemente auch Einfügen, ohne das Sie andere Elemente verschieben, wenn Sie ja mit absolute aus dem Textfluss genommen sind?  
  
2)Zu Günthers Ansatz: Wenn ich width auf 100% setze, zieht er die Seite immer so breit wie der viewport ist.(Gefällt mir gut aber,..) Was passiert allerdings wenn ich zig Elemente im Body ausgerichtet habe und ich verändere die Größe der Seite. Dann verschieben sich die ja alle in relation zum Body mit, und damit übereinander(im Falle eine Viewport-Verkleinerung). Weil das width der Elemente ja nicht automatisch angepasst wird, wie kann ich das Problem lösen?  
Außerdem habe ich mit Günther CSS-Code jetzt ununterbrochen Scollbalken horizontal und vertikal obwohl ich Margin auf 0px gesetzt habe?  
  
Danke und LG

[mikethet]

Ok, der Rahmen erzeugt die Scrollbalken..

[Gunther]

Ok, der Rahmen erzeugt die Scrollbalken..

Genau!

Dagegen hilft:

  
* {  
   -webkit-box-sizing: border-box;  
   -moz-box-sizing: border-box;  
   box-sizing: border-box;  
}  

Gruß Gunther

[Gunther]

Hallo Mike!

Jedenfalls tun sich mir noch drei Fragen auf:

1)Das bedeutet, ich weise dem Body relative zu und kann dann jedes Kind-Element mit absolute nach dem Body ausrichten und aus dem Textfluss nehmen(Feststellung und Frage! gg)

Ja, aber das solltest du_auf_keinen_Fall_tun!!!
Es ist einer der elementarsten Vorteile, dass Browser Elemente im "normalen Fluss" eben "automatisch" anordnen. Alle deine Probleme rühren doch genau daher, dass du die Elemente aus dem Fluss nimmst. Also lass' es!

2. Kann ich dann Elemente auch Einfügen, ohne das Sie andere Elemente verschieben, wenn Sie ja mit absolute aus dem Textfluss genommen sind?

Absolut positionierte Elemente richten sich nur nach ihrem ersten Elternelement, welches einen anderen Wert als 'static' für seine Position-Eigenschaft hat. Damit kann man dann auch hervorragend Elemente übereinander platzieren oder außerhalb des Viewports!

2)Zu Gunthers Ansatz: Wenn ich width auf 100% setze, zieht er die Seite immer so breit wie der viewport ist.(Gefällt mir gut aber,..) Was passiert allerdings wenn ich zig Elemente im Body ausgerichtet habe und ich verändere die Größe der Seite. Dann verschieben sich die ja alle in relation zum Body mit, und damit übereinander(im Falle eine Viewport-Verkleinerung). Weil das width der Elemente ja nicht automatisch angepasst wird, wie kann ich das Problem lösen?

Ja, indem du die Elemente nicht absolut positionierst!
Bitte mach' dich mit Materie vertraut. Bevor das Positionierungs-Schema nicht verstanden hast, wirst du kein "ordentliches" Layout zustande bringen. Absolute Positionierung ist keine Option dafür!

Außerdem habe ich mit Gunther CSS-Code jetzt ununterbrochen Scollbalken horizontal und vertikal obwohl ich Margin auf 0px gesetzt habe?

Das hat sich ja bereits geklärt.

Und bitte kein TOFU. Zitiere nicht den kompletten Beitrag, sondern nur die wirklich relevanten Teile davon - danke!

Gruß Gunther

[mikethet]

Ja, indem du die Elemente nicht absolut positionierst!
Bitte mach' dich mit Materie vertraut. Bevor das Positionierungs-Schema nicht verstanden hast, wirst du kein "ordentliches" Layout zustande bringen. Absolute Positionierung ist keine Option dafür!

Ich verwende zB jQueryUI um ein Tab zu erstellen mit Reitern. Habe 3 Reiter verwendet und damit ist in diesem "Tab-Element" noch Platz. Da wollte ich eine Suchleiste positionieren, aber ich kann mir nicht erklären, wie ich die im normalen Textfluss einbauen kann, das sie genau dort liegt. (ohne position:absolute zu verwenden).

Ich denke, dass ist für mein Verständnis gut, werde aufjedenfall, wie du gesagt hast, micht jetzt noch genauer mit der Positionierung auseinandersetzen.

LG Mike

[Gunther]

Mike,

Ich verwende zB jQueryUI um ein Tab zu erstellen mit Reitern. Habe 3 Reiter verwendet und damit ist in diesem "Tab-Element" noch Platz. Da wollte ich eine Suchleiste positionieren, aber ich kann mir nicht erklären, wie ich die im normalen Textfluss einbauen kann, das sie genau dort liegt. (ohne position:absolute zu verwenden).

natürlich hat auch die absolute Positionierung ihren legitimen Anwendungsbereich, aber (so gut wie) nie, wenn es um das grundlegende Layout einer Seite geht. Und das scheint mir bei dir aktuell der Fall zu sein. In dem von dir oben beschriebenen Szenario mag es durchaus angebracht sein (obwohl hier ggf. auch 'float' in Frage käme).

Ich denke, dass ist für mein Verständnis gut, werde aufjedenfall, wie du gesagt hast, micht jetzt noch genauer mit der Positionierung auseinandersetzen.

Ja, bitte mach' das. Dieses Kapitel gehört zu den unverzichtbaren Grundlagen. ;-)

Gruß Gunther