Mitgliederversammlung 2018


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 8.9.2018 um 10:00 Uhr in Dortmund statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite https://forum.selfhtml.org/events/3.

Interessierte Gäste sind gern gesehen.

CSS/Tutorials/Einstieg/Box-Modell

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Einstieg
Wechseln zu: Navigation, Suche

Mit CSS können Sie Elementen (feste) Breiten, Höhen und Abstände geben und diese nebeneinander positionieren. Die rechteckigen Blöcke, die im Elementbaum erzeugt und auf dem Bildschirm dargestellt werden, folgen einem Schema, dem „Box-Modell“. Es ist somit Grundlage jeden Layouts.

das Box-Modell[Bearbeiten]

Jedes Block-Element wie Textabsätze (p), -Abschnitte (div, article, main, aside, …) und Überschriften (h1, h2, …) bildet eine rechteckige Box, die Sie frei formatieren können.

In den vorherigen Kapiteln haben wir Überschriften oft eine Text-und Hintergundfarbe zugewiesen. Im folgenden Beispiel wollen wir die um Randlinien und Abstände erweitern:

Beispiel: Block-Elemente gestalten ansehen …
h1 {
  color: midnightblue;
  background-color: yellow;
  border: 1px solid;
  margin: 0;
  padding: 0;
}

p {
  width: 200px;
  color: green;
  background-color: lightyellow;
  border:  2px solid red;
  border-radius: 0 1em 1em 1em;
  margin:  20px auto;
  padding: 2em;
}
Das Beispiel erhalten Überschrift h1 und Textabsatz p zusätzlich mit border noch eine Randlinie. Die Eigenschaft ist eine zusammenfassende „shorthand“-Eigenschaft der drei Werte für die Randstärke border-width, die Form border-style und den optionalen Wert für die Randfarbe border-color. Wird dort kein Wert zugewiesen, wird die Textfarbe des Elements verwendet.


Mit margin können Sie einen Abstand zum Elternelement und benachbarten Elementen festlegen. Die Überschrift „klebt“ durch margin: 0; am oberen Rand der Seite. Der Textabsatz erhält mit margin: 20px auto; einen Abstand von 20px nach oben (und unten), sowie mit auto einen gleichmäßig verteilten Abstand nach rechts und links. In Verbindung mit der Festlegung für die Breite width: 200px; wird der Textabsatz zentriert.
Die Überschrift stößt fast gegen die Randlinie; der Textabsatz hat mehr Platz. Des erreichen Sie durch eine Angabe eines Innenabstands padding (engl. für Polsterung)

  • Betrachten Sie das Beispiel im Frickl (einfacher Klick auf "Ansehen").
  • Verändern Sie im Frickl die Werte für Breite, Höhe, Randlinien und Abstände. Was beobachten Sie?

Alle diese Eigenschaften verwenden Längenangaben. Dabei können Sie absolute Werte in Pixel, aber auch relative Werte wie Prozentangaben und die Längeneinheit em, die die Größe der verwendeten Schriftart als Basisschriftgröße verwendet, verwenden.

Rechtecke nebeneinander[Bearbeiten]

Damit Text auf unserer Webseite gut lesbar ist, wollen wir ein Drei-Spaltenlayout entwerfen. Die Seite erhält eine feste Breite von 600px, die drei Spalten von je 200px.

Beispiel: Drei-Spaltenlayout ansehen …
.container {
  width: 600px; 
  height: 400px;
  border: 1px solid;
  padding: 0;

}

.spalte  {
  width:  200px;
  height: 200px;
  border:  1px solid red;
  margin:  5px;
  padding: 5px;
  display: inline-block;
}
Das Beispiel besteht aus dem Container-Element, das eine feste Breite von 600px und eine feste Höhe von 200px besitzt.

Als Spalten dienen drei section-Elemente, die eine feste Breite und Höhe von je 200px (ein Drittel von 600px) besitzen.
Damit die Divs nebeneinander platziert werden, erhalten sie ein display: inline-block;.

  • Betrachten Sie das Beispiel im Frickl als auch in einem neuen Tab. Was beobachten Sie?
  • Verändern Sie im Frickl die Werte für Breite, Höhe, Randlinien und Abstände. Was beobachten Sie?

Das Beispiel zeigt unerwünschtes Verhalten:

  • Warum werden die drei Boxen nicht nebeneinander dargestellt? Ein Blick in den Seiteninspektor (erreichbar mit F12) zeigt uns, dass die Spalten aus Boxen mit je 200px Breite, einer Randlinie von 1px und einem Innen- und Außenrand von ja 5px, also ingesamt einer Gesamtbreite von 222px bestehen:

Box-Modell-Screenshot.png

Box-Modell-Screenshot-1.png

  • Die Boxen haben zuwenig Platz und ragen über die Elternelemente heraus: Obwohl das Container-Element eine vermeintlich ausreichende Höhe von 200px hat, ragen die beiden ersten Blöcke teilweise und der dritte Block ganz aus dem von uns falsch berechneten Rechteck heraus.
  • Im Frickl beträgt der Viewport des Beispiels weniger als die angegebenen 600px Breite, sodass ein horizontaler Scrollbalken erscheint.

Theorie: das klassische Box-Modell[Bearbeiten]

Wie im oben gezeigten Beispiel demonstriert, werden im Box-Modell alle Bestandteile einer Box addiert. Die Gesamtbreite errechnet sich aus:

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Die Gesamthöhe einer Box wird ebenso errechnet.

Darstellung des CSS Box-Modells

In dieser interaktiven Demo können Sie die verschiedenen Möglichkeiten ausprobieren:

Fazit: Beim Layout müssen Sie zur angegebenen Breite alle Abstände und die Stärke der Randlinien dazurechnen, da dies die tatsächliche Breite des Block-Elements ergibt. Die mühselige Rechenart wurde früher weiter erschwert, da der Internet Explorer in den Versionen 5 und 5.5 einen als Box-Model-Bug bekannten Fehler hatte. Durch diesen Fehler wurden die Maße einer Box falsch berechnet: Die Maße für Rahmen und Innenabstände wurden nicht zu Breite und Höhe addiert, sondern davon abgezogen.

Dieser Fehler wurde in Version 6 behoben, jedoch im Quirks-Modus beibehalten. Das bedeutete, dass der Box-Modell-Fehler auch in neueren Internet Explorer Versionen auftrat, wenn nicht der standardkonforme Modus verwendet wurd.e


modernes WebDesign[Bearbeiten]

Um die Jahrtausendwende mussten WebDesigner mit Papier und Bleistift Breiten und Abstände zusammenrechnen, um ein pixelgenaues Layout für eine feste Größe von 640x480px (später auch 1024x768px) zu erstellen. Heute ist dies nicht mehr nötig:

Lösung 1: Der mathematische Weg[Bearbeiten]

Mit der calc()-Funktion können Sie eine mathematische Berechnung als Wert verwenden:

Beispiel: Drei-Spaltenlayout ansehen …
section, aside  {
  width: calc(33.3% - (2px + 10px + 10px));
  height: calc(200px - (2px + 10px ));
  border:  1px solid red;
  margin:  0 5px;
  padding: 5px;
  float: left;
}
Die Breitenangabe der Elemente mit der Klasse .spalte erhalten nun die Berechnung aus der Breite von einem Drittel als Prozentangabe und der Summe der Ränder: calc(33.3% - (2px + 10px + 10px))


Der Wert für height berechnet sich aus der absoluten Höhe, von der die Randstärke und der Innenabstand (der margin oben und unten beträgt 0) abgezogen werden.
Beachten Sie: Diese Lösung hat einige große Nachteile:
  • Bei jeder Änderung der Werte für Abstände und Randlinien müssen Sie die Formel anpassen!
  • Die Browser rechnen intern mit Integer-Werten anstatt „echten“ Pixeln (, die es im Gewirr zwischen physikalischen und logischen Pixeln gar nicht gibt). Deshalb kann es zu geringfügigen Rundungsfehlern kommen.
  • Die float-Eigenschaft ist dafür gedacht, Bilder oder andere Elemente innerhalb eines Textes umfließen zu lassen. Für mehrspaltige Layouts ist eine Umsetzung mit Flexbox oder dem Grid Layout Stand der Technik.
  • Die einzelnen Spalten haben eine feste Höhe. Wenn Sie, wie im zweiten section-Element, mehr Inhalt haben, ragt dieser über die Grenzen des Elements hinaus. („zerschossenes Layout“).

Hinweis

Die hier vorgestellte Positionierung mit float ist heute verpönt, da sie viele Nachteile aufweist. Pixelgenaue Layouts sind immer nur für eine Auflösung optimiert und führen bei anderen Viewportgrößen zu Rändern oder einem „zerschossenen“ Layout.

Stand der Technik ist eine Umsetzung mit Flexbox oder dem Grid Layout:

Lösung 2: Das alternative Boxmodell[Bearbeiten]

Mit CSS3 wurde das starre Konzept des Boxmodells angepasst. Mithilfe der Eigenschaft box-sizing lässt sich spezifizieren, worauf sich die Angaben von width bzw. height beziehen sollen.


Beispiel: alternatives Boxmodel mit box-sizing: border-box; ansehen …
* {
  box-sizing: border-box;
}  
article {
  width: 40em; 
  border: 2px solid;
  display: table:
}

section, aside  {
  width: 33.333%;
  border:  1px solid red;
  margin:  0;
  padding: .5em;
  display: table-cell;
}
Durch box-sizing: border-box werden Innenabstand und Randlinie nun ohne weitere Berechnung von uns durch den Browser bei der Breitenberechnung berücksichtigt.

Bei der Verwendung von display:inline-block bilden sich kleine Abstände zwischen den Elementen. Durch die Verwendung von display:table für das Elternelement und display:table-cell für die Kindelemente können die drei Spalten direkt nebeneinander wie in einer Tabelle platziert werden.

Die Breite wird mit einem Prozentwert angegeben und muss bei einer eventuellen Änderung der Containerbreite nicht mehr angepasst werden.

Hinweis

Durch die Verwendung von box-sizing: border-box lassen sich viele Schwierigkeiten beim Layouten umgehen. Dies gilt vor allem dann, wenn prozentuale Angaben für Abmessungen mit anderen Längenangaben kombiniert werden sollen.

Lösung 3: flexibles Layout[Bearbeiten]

Flexbox ist eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen. Dabei kann nicht nur die Größendarstellung, sondern auch die Reihenfolge der Elemente unabhängig vom HTML-Code durch CSS festgelegt werden.

Beispiel: flexibles Layout ansehen …
article {
  border: 1px solid;
  display: flex;  
}

section, aside  {
  border:  1px solid red;
  padding: 5px;
  flex: 1;
}
Dieses Beispiel besticht durch seine Einfachheit:
  • Das div wird durch display: flex zum flexiblen Container.
  • Die einzelnen section-Elemente verteilen sich, da die Flex-basis mit flex: 1 gleich ist, gleichmäßig auf den verfügbaren Raum.

Fügen Sie im Frickl eine neue Spalte ein. Was können Sie beobachten?
Empfehlung:

Dieses Layout hat mehrere Vorteile:

  • Es passt sich flexible an den vorhandenen Platz an.
  • Bei einer Änderung des Markups sind keine oder nur wenig Änderungen am CSS nötig.

Lösung 4: flexibel mit Grid Layout[Bearbeiten]

Mit dem Grid Layout Module ist es möglich, responsive zweidimensionale Layouts zu erstellen. Dabei wird ein Raster angelegt, indem sich die Kindelemente ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear bequem und flexibel positionieren (lassen).

Beispiel: flexibles Layout ansehen …
article {
  border: 1px solid;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-gap: 1em;
}

section, aside  {
  border:  1px solid red;
  padding: 5px;
}
Dieses Beispiel besticht durch seine Einfachheit:
  • Das div wird durch display: grid zum Grid-Container.
  • grid-template-columns: 1fr 1fr 1fr; legt drei gleichbreite Spalten an
  • grid-gap: 1em; lässt zwischen den Spalten (aber nicht am Außenrand) einen 1em breiten Rand
  • Die section-Elemente benötigen keine eigene Festlegungen!

Fügen Sie im Frickl eine neue Spalte ein. Was können Sie beobachten?
Empfehlung:

Dieses Layout hat mehrere Vorteile:

  • Es passt sich flexible an den vorhandenen Platz an.
  • Bei einer Änderung des Markups sind keine oder nur wenig Änderungen am CSS nötig.

Mehr über das bereits von allen Browsern unterstützte Grid layout erfahren Sie im nächsten Kapitel!

Fazit[Bearbeiten]

Empfehlung:
  • Verzichten Sie auf den Versuch ein pixelgenaues Layout erzeugen zu wollen.
    • Verzichten Sie auf Höhenangaben. Wenn der Inhalt größer wird, setzt er sich automatisch nach unten fort.
    • Verzichten Sie auf feste Breitenangaben. Verwenden Sie Eigenschaften wie min-width, um sicherzustellen, dass das Element breit genug für den Inhalt ist.
  • Verwenden Sie moderne, responsive Layout-Modelle wie Flexbox oder Grid Layout. Sie sind für alle Viewports geeignet und passen sich flexibel an den verfügbaren Platz an.

Einen Nachteil hat unser Beispiel noch: Im Frickl und auf mobilen Geräten mit kleinen Viewports sind die drei Spalten sehr schmal. Wie Sie einstellen, dass die Spalten nur bei ausreichender Breite angezeigt werden, erfahren Sie im nächsten Kapitel!

Exkurs: Gestaltungstipps[Bearbeiten]

CSS-basierte Layouts und die Möglichkeiten der neuen CSS3-Eigenschaften können dazu verleiten, jede Box mit einem durchgehenden, gestrichelten oder gar gepunkteten Rahmen abzugrenzen. Dies ist bei den hier aufgeführten Beispielen nur zu Demonstrationszwecken der Fall.

Empfehlung:
  • Seien Sie kreativ und nutzen Sie die CSS-Eigenschaft border für Rahmen sinnvoll und sparsam.
  • Wenn Sie Bereiche mit Rahmen, Schatten, einfachen Linien oder über eine Hintergrundfarbe abgrenzen, setzen Sie für den enthaltenen Text auch einen passenden Innenabstand.


Bringen Sie Farbe in Ihre Seiten - aber übertreiben Sie es nicht.

Empfehlung:
  • Wählen Sie zueinander passende, ähnliche Farbtöne. Darüber hinaus können Sie Akzente in Komplementärfarben setzen. Achten Sie aber bitte auf einen ausreichenden Farb- und Helligkeitskontrast, damit Ihre Texte auch ohne Anstrengung gelesen werden können. Hierzu eignet sich dunkle Schrift vor hellem Hintergrund am besten.
  • Setzen Sie bitte auch nicht voraus, dass in jedem Browser Schwarz als Schriftfarbe und Weiß als Hintergrundfarbe voreingestellt ist. Wenn Sie den Hintergrund definieren, vergessen Sie auf keinen Fall, die Vordergrundfarben und Schriftfarben anzugeben, da Sie hier nicht immer mit einheitlichen Voreinstellungen rechnen können.
  • Es ist für Ihre Besucher hilfreich, wenn besuchte Links von unbesuchten farblich zu unterscheiden sind.