SELFHTML/Navigationshilfen Stylesheets CSS-basierte Layouts
Mehrspaltige CSS-basierte Layouts
Zweispaltiges Layout
Dreispaltiges Layout
Mehrspaltiges Layout mit Kopf- und Fußzeile
Gestaltungstipps
| SELFHTML/Navigationshilfen Stylesheets CSS-basierte Layouts |
|
|
Mehrspaltige CSS-basierte Layouts |
|
|
|
| | |
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.
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>
Für die Navigationspunkte wird hier eine 
Aufzählungsliste verwendet, deren ID Navigation später als Selektor für die CSS-Definitionen dient. Die Elemente des Inhaltsbereichs werden mit einem div-Element gruppiert, das ebenfalls eine ID (Inhalt) erhält und die spätere Formatierung des Inhaltsbereichs und seiner Elemente über CSS erleichtert.
Im HTML-Quelltext sind Elemente, die Sie über die CSS-Eigenschaft float ausrichten wollen, zuerst zu notieren.
Verwenden Sie eine Dokumenttyp-Deklaration für den standardkonformen Modus, um Anzeigefehler zu vermeiden.
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 Stylesheet in die HTML-Datei eingebunden.
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;
min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
}
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;
}
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 Layout mit fixem Bereich 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.
Dem Inhaltsbereich ist keine Breite zugewiesen, wodurch eine Anpassung der Seite an die Fenstergröße ermöglicht und auch der Box-Modell-Fehler des Internet Explorers kompensiert wird. Für moderne Browser, die min-width unterstützen, ist für den Inhaltsbereich eine Mindestbreite angegeben, um einen Umbruch der Überschrift zu vermeiden und sicherzustellen, dass der Inhaltsbereich in sehr kleinen Fenstern nicht zu schmal wird.
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.
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.
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) */
body {
min-width: 20em; /* Mindestbreite (der Navigation) verhindert Anzeigefehler in modernen Browsern */
}
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.
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.
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>
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 Kind-Selektor html>body auch von einer speziellen CSS-Browserweiche Gebrauch gemacht, um die von anderen Browsern abweichende farbliche Umsetzung des 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.
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.
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;
min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
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>
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.
Über eine geeignete Angabe zu min-width kann in modernen Browsern bei zu schmalen Fenstern ein Umbruch der Boxen verhindert werden.
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.
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, was eine Barriere für Benutzer darstellen kann.
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 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.
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;
min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
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>
Über die sogenannte 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.
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 welchem bei normalem Schriftgrad ein passender Ausschnitt dargestellt wird.
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>
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:
[
]
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 Box-Modell-Fehler des Internet Explorers nicht über eine CSS-Browserweiche korrigieren.
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 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 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 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 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 Vordergrundfarben und 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.
|
| |
 |
Fixe Bereiche mit CSS-basierten Layouts
|
 |
Einführung in CSS-basierte Layouts
|
| SELFHTML/Navigationshilfen Stylesheets CSS-basierte Layouts |
|
© 2005 Impressum