überlappendes wrapper-Element

[Steffen Schwartz]

Hallo da draußen,

ich bastle an einem Programmierfehler herum, und komme nicht weiter:

ich habe innerhalb eines div-Elements body das div-Element wrapper eingefügt. "wrapper" soll 80% der Bildschirmbreite von "body" einnehmen, und zentriert sein. Auf der angegebenen Seite funktioniert es nur noch bei "Buchkunst" richtig. Seit ich mit Bootstrap experimentiert hatte, entwickelt die Darstellung eine Art Eigenleben: Das wrapper-Element überlappt auf der rechten Seite über die 80 % hinaus. Merkwürdig ist, daß die Dateien, die auf meinem Computer gespeichert sind, so aussehen, wie sie sollen, nur die vom Web-Server nicht, obwohl ich die css-Datei schon mehrfach synchronisiert habe. Ich weiß im Moment nicht, wpo ich den Fehler suchen soll. Hat jemand von Euch eine Idee? Dafür wäre ich dankbar.

Hier die css-Regeln für die beiden Elemente:

 #wrapper {
width: 80%;
height:100%;
border-radius:0px;
border-left: 1px solid white;
border-right: 1px solid white;
margin: 0 auto;
background: #cac5c1;
overflow: hidden;
}

body{
	height: 100%;
	width: 100%;
	background: #cac5c1;
	font-family: Verdana Geneva, sans-serif;
	font-size: 6px;
	margin:0;
}

Viele Grüße Steffen

[Gunnar Bittersmann]

@@Steffen Schwartz

Auf der angegebenen Seite funktioniert es nur noch bei "Buchkunst" richtig. […] Das wrapper-Element überlappt auf der rechten Seite über die 80 % hinaus.

Das liegt am Box-Modell. width gibt die innere Breite an, padding kommt noch hinzu.

Du willst ein anderes Box-Modell.

Außerdem solltest du dich mit den Elementen für die Seitenstruktur vertrautmachen und die ganzen div durch passende Elemente ersetzen: header, footer, nav, …

<div id="main-content"> wäre gern ein main-Element.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

<div id="main-content"> wäre gern ein main-Element.

das main-Element 😝

Bis demnächst
Matthias

[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

[Steffen Schwartz]

Herzlichen Dank für die hilfreichen Hinweise, und die Zeit die Ihr Euch dafür genommen habt. Viele Grüße Steffen