body mittig ausrichten mit Rand

[Julia]

Hallo Forum,

ich möchte den body meiner Web-Seite mittig horizontal zentrieren. Das habe ich wie folgt realisiert:

body {
   margin-left: auto;
   margin-right: auto;  
}

Wenn ich aber den View-Port sukzessiv kleiner ziehe, geht der body ab einer bestimmten Breite sowohl links, als auch rechts ganz an die Grenze des Fensters. Ich hätte aber gerne 2em Außenabstand.

Beides gleichzeitig gelingt mir leider nicht.

Kann mir jemand einen Tipp geben?

Danke im Voraus!

Julia

[beatovich]

hallo

Wenn ich aber den View-Port sukzessiv kleiner ziehe, geht der body ab einer bestimmten Breite sowohl links, als auch rechts ganz an die Grenze des Fensters. Ich hätte aber gerne 2em Außenabstand.

max-width:100%;

[Julia]

Hallo,

max-width:100%;

Der body steht schon auf max-width, aber in Pixel. Das sollte auch so bleiben, gibt es eine andere Möglichkeit?

body {
   max-width: 1000px;
   margin: 2em;
   font-size: 1em;
   margin-left: auto;
   margin-right: auto;
}

Julia

[beatovich]

hallo

Der body steht schon auf max-width, aber in Pixel. Das sollte auch so bleiben, gibt es eine andere Möglichkeit?

Du sagst also:

auch wenn der viewport < 1000px ist, darf der Content 1000px breit sein.

Du bekommst genau, was du willst.

Aber eventuell willst du ja

width:1000px; max-width:100%;

[Julia]

Hallo,

Aber eventuell willst du ja

width:1000px; max-width:100%;

Du meinst:

body {
   width:1000px; max-width:100%;
   margin: 2em;
   font-size: 1em;
   margin-left: auto;
   margin-right: auto;
}

Das ändert aber gar nichts.

Julia

[Matthias Scharwies]

Servus!

Hallo,

max-width:100%;

Der body steht schon auf max-width, aber in Pixel. Das sollte auch so bleiben, gibt es eine andere Möglichkeit?

body {
   max-width: 1000px;
   margin: 2em;
   font-size: 1em;
   margin-left: auto;
   margin-right: auto;
}

Und was machst du mit einem Handy mit nur 30em Breite (ca. 480px)?

Bitte nimm

html { 
  box-sizing: border-box; 
} 

*, ::before, ::after { 
box-sizing: inherit; 
}

body {
  max-width: 60em;    /* oder max. 75em; maximale Breite, damit Zeilen nicht zu lang sind */
  margin: 2em auto;     /* zentriert, 2em Abstand oben und unten */
  padding: 2em;       /* sorgt für Innenabstand, wenn die Breite 100% beträgt */
}

Das box-sizing sorgt dafür, dass der Innenabstand zu den 100% gehört und nicht dazugerechnet wird.

Herzliche Grüße

Matthias Scharwies

[Julia]

Hallo,

Bitte nimm ...

Dankeschön, damit funktioniert genau das, was ich haben will. Und auch, wenn ich anstatt 60em 1000px nehme, das brauche ich nämlich so. Ich brauche eine absolute Breite der gesamten Seite.

Aber kannst du mir auch genau erklären, was ich nun gemacht habe? Ich verstehe das nämlich noch nicht so ganz.

Julia

[Gunnar Bittersmann]

@@Matthias Scharwies

Bitte nimm

html { 
  box-sizing: border-box; 
} 

*, ::before, ::after { 
box-sizing: inherit; 
}

Bitte nicht. Sondern

*, ::before, ::after { 
  box-sizing: border-box; 
} 

Begib dich direkt dorthin; gehe nicht über Vererbung.

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Bitte nimm

html { 
  box-sizing: border-box; 
} 

*, ::before, ::after { 
box-sizing: inherit; 
}

Bitte nicht. Sondern

*, ::before, ::after { 
  box-sizing: border-box; 
} 

Begib dich direkt dorthin; gehe nicht über Vererbung.

Ok, aber warum?

Chris Coyier: Inheriting box-sizing Probably Slightly Better Best-Practice By Chris Coyier On July 15, 2014

LLAP 🖖

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Begib dich direkt dorthin; gehe nicht über Vererbung. Ok, aber warum?

“There’s a reason that box model doesn’t inherit by default, and there’s no reason that it should inherit. We don’t inherit margins, we don’t inherit borders. Layouts should not be inherited; layouts don’t nest in that way. So I don’t recommend this solution.”
—Miriam Suzanne, Don’t use my grid system or any others (ab 8:15)

Danke an Robert fürs Raussuchen.

LLAP 🖖

[Matthias Scharwies]

Servus!

@Gunnar Bittersmann

Danke, hab's so in's Wiki übernommen.

Herzliche Grüße

Matthias Scharwies

[MrMurphy1]

Hallo

Ich würde folgendes CSS für den body verwenden:

         width: calc(100% - 4em);
         max-width: 1000px;
         margin: 2rem auto;

Gruss

MrMurphy

[Julia]

Ich würde folgendes CSS für den body verwenden:

         width: calc(100% - 4em);
         max-width: 1000px;
         margin: 2rem auto;

Hallo,

danke, damit funktioniert es auch sehr schön.

Aber welche Lösung ist nun die bessere?

Einfacher zu verstehen ist diese hier.

Julia

[MrMurphy1]

Hallo

Aber welche Lösung ist nun die bessere?

Das kommt darauf an was du mit dem body noch so vorhast.

Wenn du beispielsweise dem body noch einen Rahmen oder eine Hintergrundfarbe geben willst, die nicht bis an den Fensterrand reichen sollen, ist meine Lösung besser geeignet.

Meine Lösung ist zudem deiner ursprünglichen Fragestellung näher, bei der es dir ja nur um den margin ging.

Gruss

MrMurphy

[Julia]

Hallo,

Wenn du beispielsweise dem body noch einen Rahmen oder eine Hintergrundfarbe geben willst, die nicht bis an den Fensterrand reichen sollen, ist meine Lösung besser geeignet.

Meine Lösung ist zudem deiner ursprünglichen Fragestellung näher, bei der es dir ja nur um den margin ging.

Zu 1, das will ich nicht. Und zu 2, ja, es ging mir nur um margin. Und Dein Code ist mir auch etwas verständlicher.

Dann bedanke ich mich bei Dir und auch bei Matthias, dessen Code auch prima funktioniert, und würde gerne Deinen Code nehmen, weil ich ihn besser verstehe. Das Einzige, was ich nicht ganz verstehe, ist die Reihenfolge Deiner Zeilen. Warum nicht zuerst die max-width-Zeile und danach die Zeile mit der Kalkulation?

Julia

[MrMurphy1]

Hallo

Die Reihenfolge spielt in diesem Fall keine Rolle. Die kannst du beliebig ändern.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Wenn du beispielsweise dem body noch einen Rahmen oder eine Hintergrundfarbe geben willst, die nicht bis an den Fensterrand reichen sollen, ist meine Lösung besser geeignet.

Nö, von besser würde ich da nicht sprechen.

In dem Fall kann man auch ganz einfach padding sowohl fürs html-Element als auch für body angeben.

LLAP 🖖

[Gunnar Bittersmann]

@@Julia

Aber welche Lösung ist nun die bessere?

Die einfachere. Ich würde sagen: die mit padding ohne calc() …

Einfacher zu verstehen ist diese hier.

… aber wenn jene für dich einfacher ist, nimmste eben jene.

LLAP 🖖

[Gunnar Bittersmann]

@@Julia

ich möchte den body meiner Web-Seite mittig horizontal zentrieren. […] Ich hätte aber gerne 2em Außenabstand.

Eine weitere einfache Möglichkeit, das zu erreichen, bietet CSS Grid. Siehe Bologna.

LLAP 🖖