HTML - Layout mit CSS

CSS Box-Modell

Um Layouts mit CSS zu erstellen, müssen Sie das CSS Box-Modell verstehen. Jedes HTML-Element wird vom Browser als Box behandelt, und das Box-Modell beschreibt, wie diese Boxen dimensioniert und angeordnet werden.

Das Box-Modell besteht aus vier Hauptteilen: Inhalt, Innenabstand, Rahmen und Außenabstand. Der Inhaltsbereich ist der Platz, in dem der eigentliche Inhalt des Elements, wie Text oder Bilder, angezeigt wird. Um den Inhaltsbereich herum befindet sich der Innenabstand, der Platz zwischen dem Inhalt und dem Rahmen schafft. Der Rahmen ist eine Linie, die den Innenabstand und den Inhalt umgibt und eine Dicke, einen Stil und eine Farbe haben kann. Der Außenabstand ist der Raum außerhalb des Rahmens, der das Element von anderen Elementen auf der Seite trennt.

Standardmäßig wird die Größe eines Elements basierend auf der Inhaltsbox berechnet, was bedeutet, dass die angegebene Breite und Höhe eines Elements nur für den Inhaltsbereich gelten. Sie können dieses Verhalten jedoch mit der Eigenschaft box-sizing ändern. Durch die Einstellung von box-sizing: border-box; werden der Innenabstand und der Rahmen in die angegebene Breite und Höhe einbezogen, wodurch es einfacher wird, die Gesamtgröße eines Elements zu kontrollieren.

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

Das .box-Element hat einen Inhaltsbereich von 200 Pixeln Breite und 100 Pixeln Höhe. Es hat auch 20 Pixel Innenabstand auf allen Seiten, einen 1 Pixel breiten schwarzen Rahmen und einen 10 Pixel Außenabstand auf allen Seiten. Die Gesamtbreite des Elements wäre 242 Pixel (200px Inhalt + 20px linker Innenabstand + 20px rechter Innenabstand + 1px linker Rahmen + 1px rechter Rahmen), und die Gesamthöhe wäre 142 Pixel (100px Inhalt + 20px oberer Innenabstand + 20px unterer Innenabstand + 1px oberer Rahmen + 1px unterer Rahmen).

Durch Ändern der Werte für Inhalt, Innenabstand, Rahmen und Außenabstand können Sie die Abstände und das Layout von Elementen auf Ihrer Webseite steuern. Das CSS Box-Modell ist ein grundlegendes Konzept im Webdesign, und sein Verständnis ist notwendig, um Layouts mit CSS zu erstellen.

Anzeigeeigenschaft

Die display-Eigenschaft in CSS steuert, wie ein Element auf der Webseite angezeigt wird. Sie bestimmt die Art der Box, die ein Element erzeugt, wie es in Bezug auf andere Elemente angeordnet ist und wie seine Inhalte dargestellt werden. Die am häufigsten verwendeten Werte für die display-Eigenschaft sind block, inline, inline-block, flex und grid.

Block-Level-Elemente wie <div>, <p>, <h1> bis <h6> und <ul> erzeugen eine Block-Level-Box. Diese Elemente beginnen in einer neuen Zeile, nehmen standardmäßig die volle verfügbare Breite ein und stapeln sich vertikal aufeinander. Sie können Breite, Höhe, Innenabstand, Außenabstand und Rahmeneigenschaften für Block-Level-Elemente festlegen.

Inline-Elemente wie <span>, <a>, <strong> und <em> erzeugen eine Inline-Level-Box. Diese Elemente beginnen nicht in einer neuen Zeile und nehmen nur so viel Breite ein, wie zur Anzeige ihres Inhalts erforderlich ist. Inline-Elemente fließen innerhalb des Textes und stören das Layout des umgebenden Inhalts nicht. Sie können für Inline-Elemente keine Breite, Höhe, oberen oder unteren Außenabstände oder vertikalen Innenabstand festlegen.

Inline-Block-Elemente haben Eigenschaften sowohl von Inline- als auch von Block-Level-Elementen. Sie fließen inline wie Inline-Elemente, können aber wie Block-Level-Elemente eine bestimmte Breite, Höhe, Außen- und Innenabstände haben. Inline-Block-Elemente sind nützlich, wenn Sie Elemente nebeneinander platzieren möchten, während Sie trotzdem ihre Abmessungen kontrollieren können.

.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
}

Flexbox und Grid sind zwei leistungsstarke Layout-Systeme in CSS, die fortgeschrittenere Möglichkeiten bieten, um flexible und responsive Designs zu erstellen.

Flexbox oder Flexible Box Layout ist ein eindimensionales Layout-System, das es ermöglicht, Layouts zu erstellen, bei denen Elemente basierend auf dem verfügbaren Platz wachsen, schrumpfen und ihre Reihenfolge ändern können. Es eignet sich gut für die Erstellung von Navigationsmenüs, Karten-Layouts und anderen flexiblen Komponenten.

CSS Grid ist ein zweidimensionales Layout-System, das es ermöglicht, komplexe rasterbasierte Layouts mit Zeilen und Spalten zu erstellen. Es bietet eine Möglichkeit, die Größe und Position von Elementen innerhalb eines Rastercontainers zu definieren, wodurch es einfacher wird, responsive Layouts zu erstellen, ohne auf Floats oder Positionierung angewiesen zu sein.

Sowohl Flexbox als auch Grid werden später in diesem Tutorial ausführlicher behandelt.

Durch die Verwendung der display-Eigenschaft und ihrer verschiedenen Werte können Sie steuern, wie Elemente auf Ihrer Webseite angezeigt und angeordnet werden. Das Verständnis der Unterschiede zwischen Block-, Inline- und Inline-Block-Elementen sowie der Grundlagen von Flexbox und Grid wird Ihnen helfen, flexiblere und responsivere Layouts mit CSS zu erstellen.

Positionierung

CSS-Positionierung ermöglicht es Ihnen, die Platzierung von Elementen auf einer Webseite zu steuern. Es gibt fünf Hauptarten der Positionierung: statisch, relativ, absolut, fixiert und sticky.

Statische Positionierung ist die Standardpositionierung für alle Elemente. Ein Element mit position: static; wird nicht auf besondere Weise positioniert und folgt dem normalen Fluss des Dokuments. Statische Elemente werden nicht von den Eigenschaften top, right, bottom oder left beeinflusst.

Relative Positionierung ermöglicht es, ein Element relativ zu seiner normalen Position im Dokumentfluss zu verschieben. Wenn Sie position: relative; für ein Element festlegen, können Sie die Eigenschaften top, right, bottom und left verwenden, um das Element von seiner normalen Position weg zu bewegen. Der ursprünglich vom Element belegte Platz bleibt im Dokumentfluss erhalten, und andere Elemente werden von der Neupositionierung nicht beeinflusst.

.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

Absolute Positionierung entfernt ein Element aus dem normalen Dokumentfluss und positioniert es relativ zu seinem nächsten positionierten Vorfahren oder dem anfänglichen Containerelement, wenn kein positionierter Vorfahr existiert. Ein Element mit position: absolute; kann mit den Eigenschaften top, right, bottom und left positioniert werden. Andere Elemente verhalten sich so, als ob das absolut positionierte Element im Dokumentfluss nicht existiert.

.absolute {
  position: absolute;
  top: 50px;
  right: 20px;
}

Fixierte Positionierung ähnelt der absoluten Positionierung, aber das Element wird relativ zum Browserfenster positioniert, anstatt zu einem enthaltenden Element. Ein Element mit position: fixed; bleibt auch dann an der gleichen Position, wenn die Seite gescrollt wird. Dies wird oft für fixierte Kopfzeilen, Fußzeilen oder Navigationsmenüs verwendet.

.fixed {
  position: fixed;
  bottom: 20px;
  left: 20px;
}

Sticky-Positionierung ist eine Kombination aus relativer und fixierter Positionierung. Ein Element mit position: sticky; verhält sich wie ein relativ positioniertes Element, bis es einen bestimmten Abstand zum Viewport erreicht. An diesem Punkt "klebt" es wie ein fixiertes Element an seiner Position. Dies ist nützlich für Elemente, die am oberen Bildschirmrand haften sollen, wenn der Benutzer über einen bestimmten Punkt hinaus scrollt.

.sticky {
  position: sticky;
  top: 20px;
}

Durch die Verwendung der verschiedenen Positionierungstechniken können Sie komplexe Layouts erstellen und Elemente präzise auf Ihrer Webseite platzieren. Es ist wichtig zu verstehen, wie jede Positionierungsart funktioniert und wie sie den Dokumentfluss beeinflusst, um die am besten geeignete Methode für Ihren speziellen Anwendungsfall zu wählen.

Floats

Floats waren eine der Hauptmethoden zur Erstellung von Layouts in CSS vor der Einführung von Flexbox und Grid. Die float-Eigenschaft ermöglicht es, Elemente links oder rechts ihres umschließenden Elements zu positionieren, während der umgebende Inhalt sich um sie herum anordnet.

Um ein Element schweben zu lassen, können Sie die float-Eigenschaft mit dem Wert left oder right verwenden. Wenn ein Element schwebt, wird es aus dem normalen Dokumentfluss entfernt, und der umgebende Inhalt fließt darum herum.

.float-left {
  float: left;
  margin-right: 20px;
}

.float-right {
  float: right;
  margin-left: 20px;
}

In diesem Beispiel wird das .float-left-Element links in seinem Container positioniert, und das .float-right-Element rechts. Die Eigenschaften margin-right und margin-left fügen etwas Abstand zwischen den schwebenden Elementen und dem umgebenden Inhalt hinzu.

Bei der Verwendung von Floats ist es wichtig, sie richtig zu bereinigen, um Layoutprobleme zu vermeiden. Wenn ein umschließendes Element nur schwebende Kindelemente enthält, schrumpft seine Höhe auf Null, da die schwebenden Elemente aus dem normalen Dokumentfluss entfernt sind. Um dies zu beheben, können Sie die clear-Eigenschaft auf einem Element nach den schwebenden Elementen verwenden, um den Fluss zurückzusetzen.

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Die .clearfix-Klasse wird auf das umschließende Element angewendet. Das ::after-Pseudo-Element wird verwendet, um einen leeren Raum nach dem Inhalt des Containers hinzuzufügen, und die Eigenschaft clear: both; wird angewendet, um den Fluss zurückzusetzen und die Höhe des Containers so zu erweitern, dass er die schwebenden Elemente umschließt.

Obwohl Floats in der Vergangenheit weit verbreitet waren, bringen sie einige Herausforderungen und Einschränkungen mit sich:

Aufgrund dieser Herausforderungen sind in den letzten Jahren moderne Layouttechniken wie Flexbox und Grid beliebter geworden. Sie bieten mehr Flexibilität, bessere Ausrichtungsmöglichkeiten und einfachere Responsivität im Vergleich zu float-basierten Layouts.

Dennoch ist das Verständnis der Funktionsweise von Floats nach wie vor wichtig für die Wartung älterer Websites und die Arbeit mit Legacy-Code, der auf float-basierten Layouts basiert.

Flexbox

Flexbox, kurz für Flexible Box Layout, ist ein leistungsstarkes CSS-Layoutsystem, das es ermöglicht, flexible und responsive Designs zu erstellen. Es bietet eine Methode, um Elemente innerhalb eines Containers anzuordnen, auszurichten und den Platz zwischen ihnen zu verteilen, selbst wenn ihre Größe unbekannt oder dynamisch ist.

Die Hauptidee hinter Flexbox ist das Konzept eines Flex-Containers und von Flex-Elementen. Ein Flex-Container ist ein Element, auf das display: flex; angewendet wird, und seine direkten Kinder werden automatisch zu Flex-Elementen. Durch das Setzen von display: flex; erstellen Sie einen neuen Flex-Formatierungskontext für den Container und seine Elemente.

<div class="flex-container">
  <div class="flex-item">Element 1</div>
  <div class="flex-item">Element 2</div>
  <div class="flex-item">Element 3</div>
</div>

.flex-container {
  display: flex;
}

Flexbox führt das Konzept einer Hauptachse und einer Querachse ein. Die Hauptachse ist die primäre Achse, entlang derer Flex-Elemente angeordnet werden, und sie kann entweder horizontal (Standard) oder vertikal sein. Die Querachse verläuft senkrecht zur Hauptachse. Sie können die Richtung der Hauptachse mit der Eigenschaft flex-direction steuern, die Werte wie row (Standard), row-reverse, column oder column-reverse haben kann.

Eine der Hauptfunktionen von Flexbox ist die Möglichkeit, Inhalte innerhalb des Flex-Containers auszurichten und zu verteilen. Die Eigenschaft justify-content steuert die Ausrichtung und Verteilung der Flex-Elemente entlang der Hauptachse, während die Eigenschaft align-items die Ausrichtung entlang der Querachse steuert.

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Im obigen Beispiel verteilt justify-content: space-between; die Flex-Elemente gleichmäßig entlang der Hauptachse, wobei das erste Element am Anfang und das letzte Element am Ende steht. Die Eigenschaft align-items: center; zentriert die Flex-Elemente vertikal entlang der Querachse.

Flexbox bietet auch Eigenschaften zur Steuerung der Reihenfolge und Größe von Flex-Elementen. Mit der Eigenschaft order können Sie die visuelle Reihenfolge der Flex-Elemente ändern, ohne die HTML-Struktur zu verändern. Die Eigenschaften flex-grow, flex-shrink und flex-basis ermöglichen es Ihnen zu steuern, wie Flex-Elemente innerhalb des Flex-Containers wachsen, schrumpfen und ihre ursprüngliche Größe festlegen.

.flex-item:first-child {
  order: 2;
}

.flex-item:nth-child(2) {
  flex-grow: 2;
}

In diesem Beispiel wird das erste Flex-Element visuell ans Ende verschoben, indem order: 2; verwendet wird, und das zweite Flex-Element wird so eingestellt, dass es doppelt so stark wächst wie die anderen Elemente, indem flex-grow: 2; verwendet wird.

Flexbox ist ein vielseitiges Werkzeug zur Erstellung flexibler und responsiver Layouts. Es vereinfacht viele gängige Layout-Aufgaben wie vertikale und horizontale Zentrierung, Spalten gleicher Höhe und dynamische Größenänderung von Elementen. Mit Flexbox können Sie anpassungsfähigere und wartbarere Layouts erstellen, die auf verschiedenen Bildschirmgrößen und Geräten gut funktionieren.

CSS Grid

CSS Grid ist ein zweidimensionales Layout-System, das die Erstellung komplexer und responsiver gitterbasierter Designs ermöglicht. Es bietet eine Möglichkeit, Zeilen und Spalten innerhalb eines Grid-Containers zu definieren und die Platzierung und Größe von Grid-Elementen zu steuern.

Um ein Grid-Layout zu erstellen, setzen Sie die display-Eigenschaft eines Container-Elements auf grid oder inline-grid. Der Container wird zu einem Grid-Container und seine direkten Kinder werden automatisch zu Grid-Elementen.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

.grid-container {
  display: grid;
}

Sobald Sie einen Grid-Container haben, können Sie die Zeilen und Spalten mit den Eigenschaften grid-template-rows und grid-template-columns definieren. Diese Eigenschaften akzeptieren eine durch Leerzeichen getrennte Liste von Werten, die die Größe jeder Zeile oder Spalte darstellen. Sie können feste Größen (z.B. Pixel), flexible Größen (z.B. Prozente oder fr-Einheiten) oder eine Kombination aus beidem verwenden.

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-template-columns: 1fr 2fr 1fr;
}

Dieser Code definiert einen Grid-Container mit zwei Zeilen mit Höhen von 100 Pixeln und 200 Pixeln. Er hat auch drei Spalten, wobei die erste und dritte Spalte jeweils eine Brucheinheit des verfügbaren Platzes einnehmen und die zweite Spalte zwei Brucheinheiten einnimmt.

Um Grid-Elemente innerhalb der definierten Zeilen und Spalten zu platzieren, können Sie die Eigenschaften grid-row und grid-column verwenden. Mit diesen Eigenschaften können Sie die Start- und Endlinien eines Grid-Elements mithilfe von Zeilennummern oder benannten Linien angeben.

.grid-item:first-child {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.grid-item:nth-child(2) {
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}

Das erste Grid-Element erstreckt sich von Zeilenlinie 1 bis Zeilenlinie 3 und von Spaltenlinie 1 bis Spaltenlinie 2. Das zweite Grid-Element erstreckt sich von Zeilenlinie 1 bis Zeilenlinie 2 und von Spaltenlinie 2 bis Spaltenlinie 4.

CSS Grid führt auch das Konzept der Grid-Vorlagenbereiche ein, mit dem Sie benannte Bereiche innerhalb des Grids definieren und Grid-Elemente mithilfe der Eigenschaft grid-area diesen Bereichen zuweisen können. Dies kann Ihren Code lesbarer und einfacher zu warten machen.

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Der Grid-Container definiert benannte Bereiche mit der Eigenschaft grid-template-areas. Jede Zeichenfolge stellt eine Zeile dar, und jedes Wort innerhalb der Zeichenfolge repräsentiert einen benannten Bereich. Die Grid-Elemente werden dann diesen Bereichen mit der Eigenschaft grid-area zugewiesen.

Einer der Hauptvorteile von CSS Grid ist die Möglichkeit, responsive Layouts einfach zu erstellen. Durch die Verwendung von Media Queries und die Anpassung der Grid-Vorlagenzeilen, -spalten und -bereiche können Sie Ihr Grid-Layout an verschiedene Bildschirmgrößen und Geräte anpassen.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

Die repeat()-Funktion wird mit dem Schlüsselwort auto-fit verwendet, um ein responsives Grid-Layout zu erstellen. Die minmax()-Funktion gibt eine Mindest- und Maximalgröße für die Spalten an, sodass sie sich automatisch an den verfügbaren Platz anpassen können. Die gap-Eigenschaft fügt Abstände zwischen den Grid-Elementen hinzu.

Responsives Design

Responsives Design ist ein Ansatz in der Webentwicklung, der darauf abzielt, Websites zu erstellen, die auf einer Vielzahl von Geräten - von Desktop-Computern bis hin zu Mobiltelefonen - ein optimales Betrachtungs- und Interaktionserlebnis bieten. Angesichts der zunehmenden Nutzung von Smartphones und Tablets für den Internetzugang ist es wichtig sicherzustellen, dass Ihre Website sich anpasst und auf jeder Bildschirmgröße gut aussieht. Responsives Design basiert auf mehreren Schlüsseltechniken, darunter Media Queries, flexible Layouts, responsive Bilder und responsive Typografie.

Media Queries sind ein grundlegendes Werkzeug im responsiven Design. Sie ermöglichen es, verschiedene Stile auf Ihre Website anzuwenden, basierend auf den Eigenschaften des Geräts, wie Bildschirmbreite, -höhe, -ausrichtung oder Auflösung. Durch den Einsatz von Media Queries können Sie Breakpoints definieren, die unterschiedliche Layouts für verschiedene Bildschirmgrößen festlegen.

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

Wenn die Bildschirmbreite 768 Pixel oder weniger beträgt, wird das .container-Element eine Breite von 100% und einen Innenabstand von 10 Pixeln haben. Dies ermöglicht es Ihnen, das Layout und Styling Ihrer Website für kleinere Bildschirme, wie Tablets oder Mobiltelefone, anzupassen.

Flexible Layouts sind ein weiterer wichtiger Aspekt des responsiven Designs. Anstatt feste Pixelwerte für Breiten und Höhen zu verwenden, nutzen flexible Layouts relative Einheiten wie Prozentangaben oder em-Einheiten. Dies ermöglicht es dem Layout, sich proportional zur Bildschirmgröße anzupassen und zu skalieren.

.container {
  width: 80%;
  margin: 0 auto;
}

Das .container-Element hat eine Breite von 80% seines übergeordneten Elements, und margin: 0 auto; zentriert es horizontal. Wenn sich die Bildschirmgröße ändert, wird sich der Container proportional anpassen und seine relative Breite beibehalten.

Responsive Bilder sind wichtig für die Optimierung der Leistung und Benutzererfahrung Ihrer Website auf verschiedenen Geräten. Durch den Einsatz von Techniken wie dem srcset-Attribut oder dem <picture>-Element können Sie verschiedene Bildgrößen und Auflösungen basierend auf den Fähigkeiten des Geräts bereitstellen.

<img src="image.jpg" srcset="image-small.jpg 400w, image-medium.jpg 800w, image-large.jpg 1200w" alt="Responsives Bild">

Das srcset-Attribut gibt mehrere Bildquellen und ihre entsprechenden Breiten an. Der Browser wählt das am besten geeignete Bild basierend auf der Bildschirmgröße und Auflösung des Geräts aus, wodurch die Menge der übertragenen Daten reduziert und die Ladezeiten verbessert werden.

Responsive Typografie stellt sicher, dass Ihr Text auf verschiedenen Bildschirmgrößen lesbar und gut proportioniert bleibt. Durch die Verwendung relativer Einheiten wie em oder rem für Schriftgrößen und Zeilenhöhen können Sie eine Typografie erstellen, die sich proportional zur Bildschirmgröße skaliert.

body {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Die Basis-Schriftgröße ist für größere Bildschirme auf 16 Pixel eingestellt, wird aber auf 14 Pixel reduziert, wenn die Bildschirmbreite 768 Pixel oder weniger beträgt. Dies hilft, die Lesbarkeit auf kleineren Bildschirmen zu erhalten und gleichzeitig die Gesamtproportionen der Typografie konsistent zu halten.

Durch die Kombination von Media Queries, flexiblen Layouts, responsiven Bildern und responsiver Typografie können Sie Websites erstellen, die sich nahtlos an verschiedene Geräte und Bildschirmgrößen anpassen. Responsives Design verbessert nicht nur die Benutzererfahrung, sondern macht Ihre Website auch zugänglicher und zukunftssicher, da neue Geräte und Bildschirmgrößen aufkommen.