SELFHTML

Mehrspaltige CSS-basierte Layouts

Informationsseite

nach unten Zweispaltiges Layout
nach unten Dreispaltiges Layout
nach unten Mehrspaltiges Layout mit Kopf- und Fußzeile
nach unten Gestaltungstipps

 nach unten 

Zweispaltiges Layout

Die klassische Anwendung eines zweispaltigen Layouts ist die Anordnung einer Navigation neben dem Inhaltsbereich. Hierzu wird im HTML-Quelltext zunächst der Inhalt logisch ausgezeichnet und die Struktur vorgegeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's ohne CSS aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zweispaltiges Layout - Struktur</title>
</head>
<body>

<ul id="Navigation">
  <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
  <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
  <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
  <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
  <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>

<div id="Inhalt">
  <h1>CSS-basierte Layouts</h1>
  <h2>HTML-Struktur ohne CSS</h2>
  <p>Diese Seite enthält zunächst nur die Struktur und den Inhalt.
     Das Aussehen wird erst im folgenden Beispiel über CSS definiert.</p>
  <p>Dennoch ist diese Seite schon nutzbar und wird vom Browser
     entsprechend dessen Voreinstellungen bereits sinnvoll angezeigt.</p>
</div>

</body>
</html>

Erläuterung:

Für die Navigationspunkte wird hier eine Seite Aufzählungsliste verwendet, deren Seite ID Navigation später als Selektor für die CSS-Definitionen dient. Die Elemente des Inhaltsbereichs werden mit einem Seite div-Element gruppiert, das ebenfalls eine ID (Inhalt) erhält und die spätere Formatierung des Inhaltsbereichs und seiner Elemente über CSS erleichtert.

Beachten Sie:

Im HTML-Quelltext sind Elemente, die Sie über die CSS-Eigenschaft float ausrichten wollen, zuerst zu notieren.
Verwenden Sie eine Seite Dokumenttyp-Deklaration für den standardkonformen Modus, um Anzeigefehler zu vermeiden.

 nach obennach unten 

Um die Navigation links neben dem Inhaltsbereich zu platzieren, aber auch die Aufzählungspunkte der Listenelemente zu entfernen und die Präsentation der übrigen Elemente selbst zu definieren und nicht den Voreinstellungen der Browser zu überlassen, wird das folgende Seite Stylesheet  in die HTML-Datei eingebunden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's mit CSS aus

body {
  color: black; background-color: white;
  font-size: 100.01%;
  font-family: Helvetica,Arial,sans-serif;
  margin: 0; padding: 1em;
}

ul#Navigation {
  font-size: 0.91em;
  float: left; width: 22em;
  margin: 0; padding: 0;
  border: 1px dashed silver;
}
ul#Navigation li {
  list-style: none;
  margin: 0; padding: 0.5em;
}
ul#Navigation a {
  display: block;
  padding: 0.2em;
  font-weight: bold;
}
ul#Navigation a:link {
  color: black; background-color: #eee;
}
ul#Navigation a:visited {
  color: #666; background-color: #eee;
}
ul#Navigation a:hover {
  color: black; background-color: white;
}
ul#Navigation a:active {
  color: white; background-color: gray;
}

div#Inhalt {
  margin-left: 22em;
  padding: 0 1em;
  border: 1px dashed silver;
}
div#Inhalt h1 {
  font-size: 1.5em;
  margin: 0 0 1em;
}
div#Inhalt h2 {
  font-size: 1.2em;
  margin: 0 0 1em;
}
div#Inhalt p {
  font-size:1em;
  margin: 1em 0;
}

Erläuterung:

Die Navigation wird hier 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 wie im Beispiel zum Seite Layout mit fixem Bereich angegeben wird). Für den Inhaltsbereich wird über margin-left ein Seite Abstand zum linken Seitenrand definiert, der etwas größer als die Breite der Navigation ist. Die Seite relative Einheit em richtet sich hier nach der Seite Schriftgröße (font-size), die für die Navigation geringer angegeben ist.

Dem Inhaltsbereich ist keine Breite zugewiesen, wodurch eine Anpassung der Seite an die Fenstergröße ermöglicht und auch der Seite Box-Modell-Fehler des Internet Explorers kompensiert wird.

Beachten Sie:

Um Anzeigefehler - besonders bei einer Schriftgradänderung im Internet Explorer - zu vermeiden, ist bei der Verwendung von em die Schriftgröße für das äußerste Element in der Einheit % anzugeben und hierbei exakt 100% zu vermeiden. In diesen Beispielen wird daher body {font-size:100.01%} notiert.

 nach obennach unten 

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, wie dieses Anzeigebeispiel einer rechts-floatenden Navigation zeigt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

/* Folgende Modifikationen sind am vorherigen Beispiel vorgenommen: */

  ul#Navigation {
    font-size: 0.91em;
    float: right; width: 22em;
    margin: 0 0 1em 1em; padding: 0;
    border: 1px dashed silver;
  }

  div#Inhalt { }  /* keine Formatierungen (das div kann wegfallen) */

Erläuterung:

Die Navigation wird hier per float:right platziert, was sich besonders gut für einen Textumfluss eignet und über margin-left und margin-bottom auf Abstand zum Inhaltsbereich gehalten, für den selbst kein Abstand mehr definiert ist.

 nach obennach unten 

Um die Breite des Inhaltsbereichs zu begrenzen und zu lange Textzeilen zu vermeiden, werden im folgenden Beispiel alle Elemente der Seite in einem zusätzlichen div-Element gruppiert, welches eine feste Breite von 760px aufweist und zentriert wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zweispaltiges Layout mit fester Breite</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }

  div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    padding: 0.5em;
    border: 2px ridge silver;
  }
  html>body div#Seite {
    border-color: gray;  /* Farbangleichung an den Internet Explorer  */
  }

  ul#Navigation {
    font-size: 0.91em;
    float: left; width: 22em;
    margin: 0; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Inhalt {
    margin-left: 22em;
    padding: 0 1em;
    border: 1px dashed silver;
  }
  div#Inhalt h1 {
    font-size: 1.5em;
    margin: 0 0 1em;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0 0 1em;
  }
  div#Inhalt p {
    font-size:1em;
    margin: 1em 0;
  }
</style>
</head>
<body>

<div id="Seite">
  <ul id="Navigation">
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
  </ul>

  <div id="Inhalt">
    <h1>CSS-basierte Layouts</h1>
    <h2>Seite mit fester Breite</h2>
    <p>Diese Seite ist hat eine feste Breite von 760px und ist zentriert.</p>
    <p>Die Breite ist so gewählt, dass in 800px breiten Fenstern nicht horizontal
       gescrollt werden muss und auch ein Ausdruck keine Probleme bereiten sollte.</p>
  </div>
</div>

</body>
</html>

Erläuterung:

Das zusätzliche Block-Element <div id="Seite"> ist erforderlich, um der Seite eine feste Breite zu geben und sie zu zentrieren; der Rahmen ist nur zur Verdeutlichung angeführt und kann weggelassen werden. Für <body> ist die CSS-Eigenschaft text-align:center angegeben (und für div#Seite wieder zurückgesetzt), da der Internet Explorer ab Version 6 im standardkonformen Modus zwar Block-Elemente über margin:auto zentriert, allerdings text-align fälschlich auch auf Block-Elemente anwendet.

In diesem Beispiel wird mit dem sogenannten Seite Kind-Selektor html>body auch von einer Seite speziellen CSS-Browserweiche Gebrauch gemacht, um die von anderen Browsern abweichende farbliche Umsetzung des Seite Rahmentyps "ridge" des Internet Explorers zu kompensieren.

Die Breite ist mit 760px angegeben, damit die Seite auch in ein 800px breites Fenster mit vertikalem Scrollbalken passt und auf einer DIN-A-4-Seite bei normalen Randeinstellungen vollständig ausgedruckt werden kann. Hierzu wurde auch auf einen seitlichen Randabstand verzichtet.

 nach obennach unten 

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.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dreispaltiges Layout</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
  }

  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0; padding: 0;
    border: 1px dashed silver; background-color: #eee;
  }
  div#Info strong {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }

  div#Inhalt {
    margin: 0 12em 0 16em;
    padding: 0 1em;
    border: 1px dashed silver;
  }
  div#Inhalt h1 {
    font-size: 1.5em;
    margin: 0 0 0.5em;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }
</style>
</head>
<body>

  <ul id="Navigation">
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
  </ul>

  <div id="Info">
    <strong>Info-Box</strong>
    <p>Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
       im Quelltext vor dem im Fluss belassenem Inhaltsbereich zu notieren.</p>
    <p>Dadurch, dass für den Inhaltsbereich kein float definiert ist, kann auf
       die Angabe einer Breite verzichtet werden und die Seite den ihr zur
       Verfügung stehenden Raum ausnutzen.</p>
    <p>Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
       Breitenangabe verzichten zu können, hat außerdem den Vorteil, Abweichungen
       durch das falsche Box-Modell des Internet Explorers auszugleichen.</p>
  </div>

  <div id="Inhalt">
    <h1>CSS-basierte Layouts</h1>
    <h2>3-spaltiges Layout</h2>
    <p>In diesem Beispiel ist die Breite der Navigation etwas reduziert,
       um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen;
       die Schriftgröße der Navigation und Info-Box ist etwas verringert,
       um den relativ geringen Breiten Rechnung zu tragen.</p>
    <p>Nur für die äußeren Boxen ist eine Breite und float angegeben.
       Durch die Angabe der Breiten relativ zur Schriftgröße in 'em'
       können sich die Boxen einer Änderung des Schriftgrades anpassen.</p>
    <p>Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand
       gehalten und passt sich flexibel an die Fensterbreite an.</p>
  </div>

</body>
</html>

Erläuterung:

Um mehrere Boxen über 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.

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 einem hierzu gewünschten Abstand. Falls Sie sich wundern, warum der Wert von margin hier gleich oder sogar kleiner als der Wert von width für die nebenstehenden Boxen ist und sich trotzdem ein Abstand ergibt: die verwendete Einheit em ist bei Längenangaben abhängig von der Schriftgröße des Elements - diese ist für den Inhaltsbereich größer definiert.

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 Tabellen-Layouts.

Beachten Sie:

Die für ein Element in em angegebene Schriftgröße wird an darin enthaltene Elemente vererbt.

In diesem Beispiel ist für div#Info die Schriftgröße mit font-size:0.9em angegeben. Der für div#Info strong erhöhte Wert font-size:1.33em ergibt nach Anwendung auf die zuvor notierte Größe von 0.9em als Resultat 1.197em (0.9 mal 1.33), was in etwa der für div#Inhalt h2 mit font-size:1.2em angegebenen Schriftgröße entspricht.

Berücksichtigen Sie die Vererbung bei allen verschachtelten Elementen, denen Sie eine von 1em oder 100% abweichende Schriftgröße mittels relativer Einheiten zuweisen. Sie können sich den Umrechnungsaufwand ersparen, wenn Sie nur für die äußersten oder nur für die innersten Elemente eine Schriftgröße angeben. Im ersten Fall wird die Schriftgröße an alle enthaltenen Elemente vererbt (wobei der Internet Explorer allerdings mit der Vererbung auf Tabellenzellen Probleme hat) und im zweiten Fall ist die Basis für die Schriftgröße der innersten Elemente dieselbe.

Die Problematik der Vererbung stellt sich nicht, wenn Sie die Einheit px für Schriftgrößen verwenden. Allerdings haben Sie dann auch nicht mehr die Möglichkeit, die Längenangaben passend zur Schriftgröße in em anzugeben, damit sich das Layout an den jeweils eingestellten Schriftgrad anpasst. Darüber hinaus unterbindet der Einsatz von px die Anpassung von Schriftgrößen im Internet Explorer 6, was eine Barriere für Benutzer darstellen kann.

 nach obennach unten 

Mehrspaltiges Layout mit Kopf- und Fußzeile

Viele Layouts werden von einem "Header" und einem "Footer" umschlossen, wobei in der Kopfzeile die Seitenüberschrift oder ein grafischer Banner platziert wird und die Fußzeile eine Copyright-Angabe oder allgemeine Links (z.B. 'nach oben', 'Impressum' oder 'Sitemap') enthält. Dies hat für CSS-Layouts auch praktische Vorteile:

Die Kopfzeile wird am Anfang des Quelltextes notiert und als Seitenüberschrift mit h1 ausgezeichnet, was in den folgenden Boxen die hierarchisch korrekte Verwendung von Überschriften zweiten Grades ermöglicht. Über die CSS-Eigenschaft clear der Fußzeile wird der Umfluss (float) der seitlich platzierten Elemente aufgehoben, was z.B. bei Verwendung eines Seitenhintergrundes erforderlich sein kann, wie das nach unten letzte Beispiel zeigen wird.
Außerdem beinhalten diese beiden Beispiele einen Workaround für den Internet Explorer gegen die um 3px erweiterte Einrückung des Textes neben der Navigation.

Das folgende Beispiel erweitert das vorangegangene dreispaltige Layout um eine Kopf- und Fußzeile.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
  }

  h1 {
    font-size: 1.5em;
    margin: 0 0 0.7em; padding: 0.3em;
    text-align: center;
    background-color: #fed;
    border: 2px ridge silver;
  }
  html>body h1 {
    border-color: gray;  /* Farbangleichung an den Internet Explorer  */
  }

  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0 0 1.2em; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0 0 1.1em; padding: 0;
    background-color: #eee; border: 1px dashed silver;
  }
  div#Info h2 {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }

  div#Inhalt {
    margin: 0 12em 1em 16em;
    padding: 0 1em;
    border: 1px dashed silver;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }

  p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #fed; border: 1px solid silver;
  }
</style>
</head>
<body>

  <h1>CSS-basierte Layouts</h1>

  <ul id="Navigation">
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
  </ul>

  <div id="Info">
    <h2>Info-Box</h2>
    <p>Hatten Sie sich im letzten Beispiel gewundert,
       warum die Überschrift dieser Box nicht als solche ausgezeichnet war?
       Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht
       und erst in diesem die Hauptüberschrift notiert war,
       wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.</p>
    <p>Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert,
       wodurch auch dieses semantische Problem gelöst ist.</p>
  </div>

  <div id="Inhalt">
    <h2>3-spaltiges Layout mit Kopf- und Fußzeile</h2>
    <p>Dieses Beispiel ist um eine Kopf- und Fußzeile erweitert.</p>
    <p>Die Kopfzeile ist als Seitenüberschrift mit <h1> ausgezeichnet
       und kann genauso gut wie ein <div> über CSS formatiert
       - hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden.
       Auch eine Grafik könnte in <h1> als Hintergrundbild definiert
       oder über <img> eingebunden werden.</p>
    <p>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.</p>
  </div>

  <p id="Fusszeile">Diese Fußzeile stellt über die CSS-Eigenschaft 'clear'
     den Elementenfluss wieder her.</p>

</body>
</html>

Erläuterung:

Über die sogenannte Seite Star-HTML-Browserweiche wird dem Inhaltsbereich nur für den Internet Explorer eine Höhe zugewiesen. Die viel zu geringe Höhenangabe wird von diesem Browser erweitert und bewirkt, dass der Internet Explorer den neben der "gefloateten" Navigation stehenden Text nicht mehr wie bei den vorherigen Beispielen um weitere drei Pixel einrückt.

Sie können dieses Beispiel individuell anpassen und erweitern, um ein dreispaltiges Layout zu erstellen, das sich flexibel an Schriftgradänderungen und unterschiedliche Fenstergrößen anpasst. Diese Flexibilität bewirkt allerdings, dass sich die Elemente in zu schmalen Fenstern oder bei zu großer Schrifteinstellung untereinander platzieren und verhindert auch eine optische Aufteilung in Spalten mit unterschiedlicher Hintergrundfarbe, wie Sie es bei herkömmlichen Tabellen-Layouts oft sehen.

 nach obennach unten 

Das letzte Beispiel stellt Ihnen ein zweispaltiges Layout mit festen Breiten zur Verfügung, in dem die links platzierte Navigation optisch durch einen anders farbigen Hintergrund vom Inhaltsbereich abgegrenzt wird. Der Kopfzeile ist hier zur Demonstration als Hintergrundbild das SELFHTML-Logo zugewiesen, von welchen bei normalem Schriftgrad ein passender Ausschnitt dargestellt wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout mit grafischer Spaltenaufteilung</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }

  div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    padding: 0;
    background: #ffffe0 url(hintergrund.gif) repeat-y;
    border: 2px ridge silver;
  }
  html>body div#Seite {
    border-color: gray;  /* Farbangleichung an den Internet Explorer  */
  }

  h1 {
    font-size: 1.5em;
    margin: 0; padding: 0.3em;
    text-align: center;
    background: #fed url(../../../src/logo.gif) no-repeat 100% 45%;
    border-bottom: 1px solid silver;
  }

  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 200px;
    margin: 0 0 1.2em; padding: 0;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: white;
  }
  ul#Navigation a:visited {
    color: #666; background-color: white;
  }
  ul#Navigation a:hover {
    color: black; background-color: #eee;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Inhalt {
    margin: 0 0 1em 220px;
    padding: 0 1em;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
    margin-bottom: 0;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
    color: navy;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }

  p#Fusszeile {
    clear: both;
    font-size: 0.83em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #fed;
    border-top: 1px solid silver;
  }
</style>
</head>
<body>

<div id="Seite">
  <h1>CSS-basierte Layouts</h1>

  <ul id="Navigation">
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
  </ul>

  <div id="Inhalt">
    <h2>2-spaltiges Layout mit Hintergrundgrafik</h2>
    <p>In diesem Beispiel wird eine Hintergrundgrafik
       zur optischen Trennung der Spalten verwendet.</p>
    <p>Dies erfordert leider, dass die Breite der links stehenden Navigation
       passend zur Hintergrundgrafik in 'px' angegeben wird.
       Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades
       nicht anpassen.</p>
    <p>Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
       des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen.
       Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst
       kein Hintergrund angegeben.<br>
       Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
       und ist unabhängig von deren Höhe.</p>
    <p>Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen,
       damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.</p>
  </div>

  <p id="Fusszeile">Diese Fußzeile stellt innerhalb des umschließenden DIVs
     den Elementenfluss wieder her.</p>
</div>

</body>
</html>

Erläuterung:

Da nebeneinander platzierte Elemente sich nicht in ihrer Höhe beeinflussen, wurden der Hintergrund der linken Spalte und die Trennlinie (zur Demonstration hier als Zierrahmen) über dieses Hintergrundbild realisiert:

[Hintergrundbild]

Es ist nur wenige Pixel hoch und so breit wie die linke Navigationsbox einschließlich des Abstands zum rechten Inhaltsbereich. Als Hintergrundbild für das umschließende div#Seite definiert, wird es in der y-Achse wiederholt und passt sich so dessen Gesamthöhe an. Zusätzlich ist gelbe Farbe als Hintergrund angegeben und füllt den rechten Inhaltsbereich aus.

Diese optische Aufteilung der Seite erfordert eine feste Breitenangabe in px für die Navigation. Achten Sie daher darauf, dass die enthaltenen Linktexte auch bei Schriftvergrößerung noch in die Box passen oder ermöglichen Sie Textumbrüche durch Leerzeichen wie in diesem Beispiel im Menüpunkt "CSS-Browserweichen".

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. Hierdurch vermeiden Sie auch Anzeigefehler und müssen den Seite Box-Modell-Fehler des Internet Explorers nicht über eine Seite CSS-Browserweiche korrigieren.

 nach obennach unten 

Gestaltungstipps

Während sich mit Tabellen erstellte Layouts oft durch gleich hohe, über unterschiedliche Hintergrundfarben voneinander abgesetzte Spalten auszeichnen, können CSS-basierte Layouts dazu verleiten, jede Seite Box mit einem durchgehenden, gestrichelten oder gar gepunkteten Rahmen abzugrenzen. Auch wenn dies bei den hier aufgeführten Beispielen zu Demonstrationszwecken der Fall ist: seien Sie kreativ und nutzen Sie die CSS-Eigenschaft border für Seite Rahmen sinnvoll und sparsam.

Wenn Sie Bereiche mit Rahmen, einfachen Linien oder über eine Hintergrundfarbe abgrenzen, setzen Sie für den enthaltenen Text auch einen passenden Seite Innenabstand.

Nutzen Sie die erweiterten Möglichkeiten, die ein CSS-basiertes Layout im Gegensatz zu Tabellen bietet und denken Sie nicht in Spalten, sondern lassen Sie ein Umfließen von Elementen zu. Tolerieren Sie auch, wenn sich floatende Elemente bei zu schmalen Fenstern untereinander anordnen - das kann benutzerfreundlicher sein, als einen Text horizontal zu scrollen. Andernfalls können Sie ein umschließendes Element mit ausreichender Breite wie im nach oben obigen Beispiel verwenden, um unterschiedliche Anordnungen zu verhindern oder einen Spalteneindruck zu erzeugen.

Bringen Sie Farbe in Ihre Seiten - aber übertreiben Sie es nicht. 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 Seite Vordergrundfarben und Seite Linkfarben anzugeben, da Sie hier nicht immer mit einheitlichen Voreinstellungen rechnen können. Hierbei ist es für Ihre Besucher hilfreich, wenn besuchte Links von unbesuchten zu unterscheiden sind.

 nach oben
weiter Seite Fixe Bereiche mit CSS-basierten Layouts
zurück Seite Einführung in CSS-basierte Layouts
 

© 2005 Seite Impressum