CSS/Anwendung und Praxis/mehrspaltige Layouts

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Artikel lernen Sie Schritt für Schritt mehrspaltige Layouts zu gestalten. Dabei entwickeln wir nach dem Grundsatz „Mobile first“ ein responsives Layout, das wir dann flexibel an größere Viewports anpassen, indem Seitenelemente in mehreren Spalten nebeneinander angeordnet werden.

Inhaltsverzeichnis

[Bearbeiten] Grundstruktur

Als Grundstruktur verwenden wir unsere Webseite aus dem HTML5-Tutorial:

Beispiel: HTML5-Seite mit Grundstruktur ansehen …
<body>
  <header>
    <!--- Kopfzeile --->
  </header>
 
  <article>
     <!--- Inhalt --->
  </article>
 
  <aside>
    <!---weiterführende Informationen --->
  </aside>
 
  <footer>
    <!--- Fußzeile --->
  </footer>
</body>

[Bearbeiten] maximale Breite festlegen

Um die Breite des Inhaltsbereichs zu begrenzen und zu lange Textzeilen zu vermeiden, wurde dem body der Beispielseite eine maximale Breite zugewiesen.

Beispiel: Seite mit flexibler Breite
body {
    margin: 0 auto;
    max-width: 60em;
}

Mit margin: 0 auto wird die Seite zentriert.

Für <body> ist die CSS-Eigenschaft max-width: 60em; angegeben, um der Seite eine maximale Breite zu geben. Bei kleineren Viewports verringert sich die Breite, sodass die Seite nie breiter als der Bildschirm wird.


Empfehlung:
Verwenden sie für Ihr Layout keine festen Breitenangaben in Pixel. Wenn ein Benutzer die Schriftgröße im Browser ändert, wird im schlimmsten Fall Ihr Layout zerschossen.
Breitenangaben in relativen em passen Ihre Webseite flexibel an die Schriftgröße an!

[Bearbeiten] Zweispaltiges Layout

Die klassische Anwendung eines zweispaltigen Layouts ist die Anordnung einer Navigation neben dem Inhaltsbereich.

Für die Navigationspunkte wird hier eine Aufzählungsliste verwendet, deren Elternelement nav später als Selektor für die CSS-Definitionen dient.

Die Elemente des Inhaltsbereichs werden mit einem main-Element gruppiert, das die spätere Formatierung des Inhaltsbereichs und seiner Elemente über CSS erleichtert.

[Bearbeiten] Boxgröße mit box-sizing

Eine der großen Hürden im Webdesign ist die Berechnung der Breiten. So ist eine Box mit einer Breite von 200px, der man noch einen Innenabstand von 10px zugibt, plötzlich 220px groß. Auch die Dicke des Rahmens wird zur Breite hinzugefügt. Hier gibt es eine einfache Lösung:

Beispiel: box-sizing
html { 
  box-sizing: border-box; 
} 
*, ::before, ::after { 
  box-sizing: inherit; 
}

Mit der CSS-Eigenschaft box-sizing lässt sich angeben, welche Abstände in die Breite integriert werden sollen, sodass es leichter wird, die Container zu platzieren.

[Bearbeiten] Navigation

Um die Navigation zu formatieren, wird das folgende Stylesheet in die HTML-Datei eingebunden.

Beispiel: Seite mit klarer Struktur ansehen …
body {
    max-width: 25em;
    margin: 0 auto;
}
nav {
  font-size: 0.91em;
  padding: 0;
  background: #fffbf0;
  border-color: #e7c157;
  }
nav ul {
  padding:0;
}
 
nav li {
  list-style: none;
  margin: 0;
  padding: 0.5em;
}
 
nav a {
  display: block;
  padding: 0.2em 10px;
  font-weight: bold;
  text-decoration: none;
  background-color: #e7c157;
  color: #333;
}
 
nav ul a:hover,
nav ul a:active  {
  color: #fffbf0;
  background-color: #dfac20;;
}
Die Aufzählungspunkte der Listenelemente sind entfernt worden und die Präsentation der übrigen Elemente passend definiert, um sie nicht den Voreinstellungen der Browser zu überlassen.
Die maximale Breite der Webseite beträgt 25em, alle Seitenelemente sind untereinander angeordnet. So sieht Ihre Webseite auf mobilen Bildschirmen aus.


Empfehlung:
Entwickeln Sie zuerst ein Layout für mobile Geräte mit kleinen Viewports. Dies ist einfacher als es klingt.
Verzichten Sie im Standardlayout auf

So nehmen die Seitenelemente genau die passende Breite ein und Sie haben keine horizontalen Scrollbalken.

[Bearbeiten] 2 Spalten für größere Viewports

Erst wenn die Bildschirmbreite dafür ausreicht, wird die Navigation links neben dem Inhaltsbereich platziert. Dabei verwenden Sie Medienabfragen (media queries), die für bestimmte Medienmerkmale andere CSS-Festlegungen ermöglichen.

Beispiel: zweispaltiges Layout ansehen …
body {
  margin: 0 auto;
  min-width: 16em;
  max-width: 60em;
}
 
@media (min-width: 32em)  {	/* zweispaltiges Layout für breitere Viewports */ 
  nav {
    float: left;
    width: 15em;
  }
  main {
    margin-left: 15em;
  }	
}
}
Für den body eine Mindestbreite angegeben, um einen Umbruch der Überschrift zu vermeiden und sicherzustellen, dass der Inhaltsbereich in sehr kleinen Fenstern nicht zu schmal wird.

Wenn eine Breite von 32em erreicht wird, haben Navigation und Inhaltsbereich nebeneinander Platz: Die Navigation nav wird jetzt links "gefloatet" und ihre Breite in em passend zum längsten Linktext angegeben, wodurch sie sich an eine Schriftgradänderung anpassen kann (dies ist übrigens auch bei Grafiken möglich, wenn für <img> die Breite und/oder Höhe in em angegeben wird).

Für den Inhaltsbereich wird über margin-left ein Abstand zum linken Seitenrand definiert, der etwas größer als die Breite der Navigation ist. Die relative Einheit em richtet sich hier nach der Schriftgröße (font-size), die für die Navigation geringer angegeben ist.

Wenn Sie den Darstellungsbereich dieser Seite zusammenziehen, werden die Seitenelement wieder nebeneinander dargestellt.

Beachten Sie: Lässt man den Abstand weg, würde der Inhalt die Navigation umfließen, d.h. unterhalb der Navigation am Seitenrand fortgesetzt. Dies ermöglicht eine optimale Ausnutzung des Anzeigebereichs.

[Bearbeiten] Dreispaltiges Layout

Häufig sieht man ein Layout mit einer linksseitigen Navigation, einem mittleren Inhaltsbereich mit flexibler Breite und rechts einer Spalte für zusätzliche Informationen. Dieses CSS-basiert umzusetzen, erfordert lediglich eine weitere Box mit der CSS-Eigenschaft float: right und einer geeigneten Angabe zu width. Diese Infobox zeichnen wir mit dem aside-Element aus.

Beispiel: Seite mit 3 Spalten ansehen …
  <nav>
  </nav>
 
  <main>
    <aside id="info">
      <h2>Info-Box</h2>
      <p>Auch wenn diese Info-Box am Bildschirm als letzte angezeigt wird, ist sie
        im Quelltext vor dem im Fluss belassenen Inhaltsbereich zu notieren.
      </p>
    </aside>  
 
    <article>
    </article>
  </main>
Der Inhaltsbereich wird in einen article und ein aside-Element getrennt. Dieses soll bei einer ausreichenden Viewportbreite rechts floatend dargestellt werden.
@media (min-width: 32em)  {	/* zweispaltiges Layout für mittlere Viewports */ 
  nav {
    float: left;
    width: 15em;
  }
  main {
    min-width: 20em;  
    margin-left: 15em;
  }	
 
  aside {
    float: right;
    width: 12em;
  }  
}
 
@media (min-width: 45em)  {	/* dreispaltiges Layout für breitere Viewports */ 
  article {
    margin-right: 15em;
  }
}}
Um mehrere Boxen mithilfe von float nebeneinander zu setzen, kann bei einer Box – hier dem Inhaltsbereich – auf die Definition von float und width verzichtet werden. Hierdurch nimmt sie den gesamten zur Verfügung stehenden Raum ein. Dies erfordert allerdings, die floatenden Boxen vorher in den Quelltext zu setzen, damit sie zuerst ihre definierte Breite reservieren können.

Ab einer Breite von 32em haben Navigation und aside nebeneinander Platz. Der Inhaltsbereich article erhält eine Mindestbreite von 20em, damit sich die Textüberschrift nicht in einen zu kleinen Raum zwischen den anderen Seitenlementen drängt.

Erst ab einer Viewportbreite von 45em werden alle Seitenelemente nebeneinander dargestellt. Dafür erhält article dann einen rechten Rand, in dem das aside Platz findet.


Damit der Inhaltsbereich die nebenstehenden Boxen nicht umfließt, wird er über margin-left und margin-right eingegrenzt. Die Werte für margin beziehen sich auf die Seitenränder und entsprechen den Breiten der nebenstehenden aus dem Fluss genommenen Boxen zuzüglich eines hierzu gewünschten Abstandes.

Anhand des Beispiels sehen Sie auch, dass sich Boxen nicht gegenseitig in ihrer Höhe beeinflussen. Dies muss kein Nachteil sein, sondern kann bewusst zur Gestaltung der Seite eingesetzt werden, erfordert allerdings ein Umdenken und die Abkehr vom althergebrachten „Spaltendenken“ bei Tabellenlayouts.

[Bearbeiten] Gestaltungstipps

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.


Nutzen Sie die erweiterten Möglichkeiten, die ein CSS-basiertes Layout bietet und denken Sie nicht in Spalten, sondern lassen Sie ein Umfließen von Elementen zu.

Empfehlung:
  • Lassen Sie floatende Elemente bei zu schmalen Fenstern mittels media queries untereinander anordnen - das ist benutzerfreundlicher, als einen Text horizontal zu scrollen.



[Bearbeiten] Wie geht es weiter?

Durch Kombination der hier aufgeführten Beispiele sollte es Ihnen nun auch möglich sein, ein solches Layout mit durchgehendem Spaltenhintergrund ohne Begrenzung der Seitenbreite oder mit drei Spalten zu erstellen. Falls Sie mehr als drei Spalten benötigen, definieren Sie für die weiteren Boxen die CSS-Eigenschaften float und width. Sie können dabei stets die zuletzt im Quelltext notierte Box im Elementenfluss belassen und dadurch auf die Angabe einer Breite verzichten.

Empfehlung: Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage. Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite und passen Sie das CSS nach Belieben Ihren Vorstellungen an: experimentieren Sie mit den Größenangaben, Farben und Rändern und fügen Sie z.B. individuelle grafische Elemente ein.

Unter CSS/Anwendung und Praxis finden Sie einige Tutorials, die ihnen die nächsten Schritte nahebringen:

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML