Zentrieren mit CSS

[Detlef G.]

Hallo Ingo

Somit habe ich mir nun doch mal den Quelltext Deines
Beispiels angesehen. Ich hoffe, das ist in Ordung.

Selbstverständlich, oder hast du ";)" übersehen.

Wenn ich das nun richtig verstanden habe, hast Du die Navi
sozusagen in den 11em breiten linken padding der Centerer-Box gepackt.
Und diese dann eben absolut mit left:0 und top:0 in die
obere linke Ecke davon geheftet.

Ja, das ist einer der Fälle, bei dem ausnamsweise eine absolute
Positionierung nötig ist, statt mit float und margin zu arbeiten.
Dabei darf position:relative für das Elternelement nicht vergessen werden.
Außerdem ermöglicht es dir, die Navigation an einer beliebigen Stelle im
Quelltext (innerhalb von #centerer) anzuordenen, damit bei Browsern ohne CSS
die Produktbeschreibung vor dieser angezeigt wird.

Was mir da natürlich noch Schwierigkeiten verursacht,
ist die Art, wie Du die CSS aufgebaut hast.

Das ist vielleicht auch noch nicht optimal.

Aber ich nehme mal an, dass das dieser Kaskaden-Aufbau
mit Vererbung der Angaben ist ... auch richtig?

Nein, das weniger.
Ich habe zum großen Teil identische Eigenschaften gleich mehreren Elementen
zugeordnet (h1, h2, p, #footerlinks, dl {...}) und für Elemente die durch
ein Vorfahrenelement eindeutig bestimmt werden können, den
Nachfahrenselektor verwendet (#Navigation li {...}).
Außerdem habe ich mich bemüht, Eigenschaften, deren Werte vonneinander
abhängen möglichst nahe zusammen zu notieren, damit bei Änderungen möglichst
keine übersehen wird, die auch geändert werden müsste.

Von der Funktion her ist es egal, ob CSS-Eigenschaften für jedes Element
einzeln, für eine Gruppe von Elementen zusammen oder über den
Nachfahrenselektor gesetzt oder bereits gestzte Eigenschaften wieder
überschrieben werden.
Man muss nur darauf achten, dass z.B. Schriftangaben vererbt werden und sich
relative Schriftgrößen bei ineinandergeschachtelten Elementen
multiplizieren, oder dass Abstände und Borderstärken bei den Maßen der
Elternelemente berücksichtigt werden müssen.

Mein CSS ist durchaus auch noch nicht optimal.

Da würde ich natürlich als Anfänger auch noch eher dahin
tendieren, für jede Klasse und jede ID alles wieder neu anzugeben :)

Du solltest es so machen, wie es für dich am übersichtlichsten ist, wobei
ich nicht denke, dass ein langer Schwanz von identischen Eigenschaften für
jedes Element einzeln übersichtlicher ist.

Aber so ists natürlich viel besser.
Ob ich das selbst schon so hinbekommen hätte, möchte ich
doch ernsthaft bezweifeln.

Du beschäftigst dich auch noch nicht lange damit, woher sollten da auch die
nötigen Erfahrungen kommen?

Eine Sache kapiere ich aber nicht.
Die Inhalte der Definitionsliste mit der ID "footerlinks"
sind nicht richtig zentriert.

Ich habe diese Liste in ein zusätzliches Element gepackt, weil ältere IEs
ohne exra Tricks diese sonst nicht wie gewünscht darstellen. Dabei habe ich
vergessen margin und padding auf 0 zu setzen.

Oder hat es was damit zu tun, dass es bei "kaufen" ja eine Klasse ist
und bei "footerlinks" eben eine ID?

Nein, auf welche Art du eine Eigenschaft zuweist, ist nur dann von Belang,
wenn mehrere widersprüchliche Eigenschaften definiert werden, dann gewinnt
der stärkere Selektor (Spezifität - Gewichtung der Selektoren).

zu https://forum.selfhtml.org/?t=114462&m=730248:

Ist denn das "margin: auto;" für den img-Bereich nicht überflüssig?
Weil doch die Pruduktbilder eh mit der Klasse "Bild" auf
padding:0 gesetzt werden.
Und aus dem gleichen Grund würde sich doch auch das "text-align:center;"
in der KLasse "Bild" erübrigen.

Ich habe das Bild in einen Absatz (.Bild) gesteckt, damit sich bei einer
Verbreiterung von #inhalt der Rahmen anpasst, das Bild selbst aber zentriert
bleibt.
Die Doppelung text-align:center für das Elternelement und margin:auto für
das Element, welches zentriert werden soll, ist nötig, weil ältere IEs
margin:auto nicht richtig anwenden, dafür Blockelemente aber
fälschlicherweise bei text-align:center zentrieren.

Auf Wiederlesen
Detlef