überlappendes wrapper-Element

[Rolf B]

Hallo Steffen,

ich hätte noch etwas - hoffentlich konstruktive - Kritik an deinem HTML/CSS.

Die Höhen deiner Elemente, und damit auch die vertikalen Abstände, schwanken mit der Bildbreite. Das liegt an den Prozentangaben, die sich immer auf die Breite des Elternelements beziehen. Ist das ein von Dir gewünschter Designeffekt oder eher unbeabsichtigt? Wenn es unbeabsichtigt ist, solltest Du die Margins der #col? Elemente in Pixel oder em angeben.

Sodann verwechselt Du die Aufgabe von id und class. Deine Elemente tragen überall IDs wie col1, col2 etc. Das funktioniert mehr oder weniger zufällig. Eigentlich sollen IDs auf einer Seite eindeutig sein. Für deinen Zweck solltest du entweder spezifische Elemente (siehe unten) oder Klassen verwenden (also class="col1" etc). Im CSS notierst Du dann nicht #col1, sondern .col1, um das zu stylen. IDs nimmt man eher für Querverweise (z.B. bei seiteninterner Navigation über eine Hash-URL oder bei Label-Bezügen zu Form-Elementen).

Du kannst auch Styles zusammenfassen. Einige Stilelemente für col1 bis col4 sind gemeinsam (was du möglicherweise über eine CSS Library wie LESS oder SASS löst, das sehe ich nicht), aber ohne eine solche Library ist das unnötige Redundanz. Gunnar hat Dir ja schon empfohlen, dein #main-content div durch ein main Element abzulösen. Ich würde zusätzlich noch die Inhalts-DIVs als Liste aufbauen (also <ol> und <li>), der Du die List-Bullets per CSS wegnimmst. Dann kannst Du einen gemeinsame Style dieser Art machen und brauchst weder id noch class:

main li {
  float: left;
	width: 220px;
	height: 240px;   
	margin: 5%;
}

Die Stile #col1 bis #col4 (oder .col1 bis .col4) sind dann überflüssig. Sie unterscheiden sich ohnehin nicht voneinander (waren offenbar Experimente), außer dem zusätzlichen margin-bottom beim #col3. Auf den würde ich aber eher verzichten und statt dessen dem main Element eine min-height geben. Dadurch wird es bei breiten Viewports nicht zusammengequetscht, und wenn der Viewport schmaler ist, hast Du keinen unnötigen Leerraum.

Statt float könntest Du auch mal schauen, wie weit Dir display:flex und flex-wrap: wrap (auf Ebene des Containers um die Listenelemente) helfen. Dann brauchst Du auch kein overflow:hidden mehr auf Ebene des Main, um die Floats mit einem Block-Formatting-Context einzusperren. Und deine #zeile1 (auf der Buchkunst Seite) ENTHÄLT die Items auch, statt mit Höhe 0 drüber zu hängen (weil nämlich float die Elemente aus dem normalen Flow herausnimmt).

Rolf