Hallo Franz
Im ersten Beispiel wird der header eigentlich nicht zentriert sondern mit left und width bleibt für right wieder 20 %; also keine echte Zentrierung.
Jein.
Das funktioniert im Beispiel, da ich für den Header width: 60%;
angegeben habe, also 20 + 60 + 20 = 100% Viewportbreite.
Wenn du die Breite des Headers in em
angeben willst, aber nach dem selben Schema, also ohne margin zentrieren wolltest, müsstest du sowas wie left: calc(50% - 45em);
bei 90em
Elementbreite angeben, um einen ähnlichen Effekt zu erzielen, was aber Unsinn wäre, weshalb in diesem Fall die Variante mit 0
für left
und right
plus auto-margin besser ist, wie du ja selbst schon gemerkt hast.
Wie wird im ersten Beispiel eigentlich main zentriert?
Dazu, ebenso wie zu margin
, hat dir Matthias ja schon was geschrieben.
Wozu dient (in diesem Fall)
* {
?
Das ist der Universalselektor, der alle Elemente des Dokuments anspricht.
Ebenso warum die body-Formatierung?
Browserdefaults...
In meinem Beispiel bemerke ich, daß bei
display: fixed;
auch der Inhalt fixiert wird. Das ist aber in meinem Fall nicht gewünscht, da ja der Inhalt veränderlich ist.
Ich glaube, hier wäre es gut, wenn du etwas näher beschreiben könntest, was du vorhast.
Innerhalb des Headers kannst du die Kindelemente doch frei positionieren. Sie bleiben natürlich mit dem Header zusammen festgepinnt, aber das ist doch auch der Sinn der Sache, oder?
Gruß,
HAL