WebDesign - Ingo Turski

Tips und Tricks:Code-Generator für ein barrierefreies CSS-Layout

Eine Seitenaufteilung ist mit Frames, Tabellen oder über CSS zu realisieren. Frames erscheinen zunächst am einfachsten, haben allerdings erhebliche Nachteile, die nur teilweise und aufwendig kompensiert werden können. Tabellen mögen im Einzelfall zwar von Vorteil sein, ergeben jedoch meist einen aufgeblähten und unübersichtlichen Quellcode und sind sehr unflexibel.

Die wesentlichen Vorteile eines CSS-Layouts:

Seitenaufteilung: [Menü links] [Menü rechts] [Menü rechts im Textfluß] [Menü oben]
[Seitenbreite 760px und Menü oben] [Seitenbreite 760px und alle Elemente integriert]

Farbschema: [blau] [braun] [violett] [schwarz-weiss]

Wenn Sie ein Layout auswählen, wird (sofern Sie es zulassen) ein Cookie bei Ihnen gespeichert und diese Seite bei weiteren Besuchen in dem von Ihnen gewählten (oder über den unteren Link zur Kombination angegebenen) Layout darstellt. Ansonsten wird jeweils ein zufälliges Layout verwendet.

[Link zur Kombination: blau-links] ... und wie würde die Seite ohne CSS aussehen?


Das Layout dieser Seite besteht aus vier Bereichen: Titel, Menü, Inhalt und Fußzeile.
Die logische XHTML-Auszeichnung der Vorlage ist verkürzt:

<div id="seite">

<h1 id="titel">Seitentitel <span>- kleiner Zusatz</span></h1>

<ul id="imenu">
  <li><strong><a href="/">Startseite</a></strong></li>
  <li><a href="seite2.html">Link 2</a></li>
  <li><a class="aktuell" href="seite3.html">Übersicht</a></li>
  <li><span>angezeigte Seite</span></li>
  <li><a href="seite5.html">Link 5</a></li>
</ul>

<div id="text">
  <h2><img src="teaser.png" alt="Beschreibung" />Seitenüberschrift</h2>
  <p>Inhalt der Seite...</p>
  <h3>Textüberschrift</h3>
  <p>Neuer Textabsatz...<br />neue Zeile...<br /><br />Leerzeile im Absatz.</p>
</div>

<p id="fuss">
  Fußzeile...
  [<a href="#titel" title="nach oben"> &uarr; </a>]
</p>

</div>

Die Selektoren seite, titel, imenu, aktuell, text und fuss sowie die Elemente h1, h2, h3, p, img, ul, li, a und span werden über CSS formatiert und damit das Seitenlayout bestimmt. Mögliche Änderungen wurden im untenstehenden CSS-Quellcode übernommen:

/* ------------------------------------------------ */
/* CSS-Layout (c) 2004 by Ingo Turski (www.1ngo.de) */
/*  (mit Anpassungen fuer den IE im 'quirks mode')  */
/* ------------------------------------------------ */

/* allgemeine Definitionen */
html, body {
  margin:0;
}
body {
  font-size:100.1%;
  padding:7px;
  background:#069;
  text-align:center;
}
#seite {
  text-align:left;
  margin:auto;
  width:auto;
}
a {
  text-decoration:underline;
  color:navy;
}
a:visited, a:hover, a:active {
  color:black;
}
a:hover, a:active {
  background:white;
}
a:active {
  text-decoration:none;
}
img {
  border: 0 none;
}

/* Header */
h1 {
  font: bold 1.5em Tahoma,"Adobe Helvetica",Helvetica,Arial,sans-serif;
  letter-spacing:1em;
  text-align:center;
  padding:5px;
  margin: 0 0 2em;
  color:white; background:#069;
  border-width:1px; border-style:solid;
  border-color:#6cf;
}
h1 span {
  font-size:0.55em;
  letter-spacing:0.66em;
}

/* Textbereich */
#text {
  float:left;
  clear:none;
  width:73%;
  margin: 0 0 1em 3em;
  padding:1em;
  color:black; background:#eee;
  border-width:3px; border-style:solid; border-color: white #999 #999 white;
  border-top-width:3px; border-bottom-width:3px;
}
html>body #text {
  width:69%;
  margin: 0 0 1em 3em;
}
h2 {
  font: bold 1em "Century Gothic","Trebuchet MS",Tahoma,Helvetica,sans-serif;
  color:black;
}
h2 img {
  float:left;
  width:98px;
  height:85px;
  margin: 0 7px 3px 0;
  background:white;
}
h3 {
  font: bold 0.91em Tahoma,"Adobe Helvetica",Helvetica,Arial,sans-serif;
  margin: 2em 0 0.5em;
  color:black;
}
p {
  text-align:justify;
}
p, #text li {
  font: normal 0.91em "Century Gothic","Trebuchet MS",Verdana,Tahoma,sans-serif;
  word-spacing:0.2em;
}
#text ul {
  margin: 0 0 0 1em;
  padding-left:0;
}

/* Menue */
#imenu {
  font: normal 0.8em Tahoma,"Adobe Helvetica",Helvetica,Arial,sans-serif;
  float:left;
  width:12em;
  margin: 3em 0;
  padding: 0 1px;
  height:auto;
  background-color:transparent;
  border: 0 none;
}
html>body #imenu {
  margin-right:0;
}
#imenu li {
  list-style:none;
  font-size:1em;
  float:none;
  width:auto;
  margin:0;
}
#imenu li a, #imenu li span {
  display:block;
  text-decoration:none;
  margin-bottom:0.5em; margin-top:0.5em;
  color:white; background:#39c;
  border-width:1px; border-style:solid; border-color: #5bd #035 #068 #6cf;
  border-left: 1em solid #fc0;
  padding: 0.25em 0.5em 0.4em 0.75em;
  width:99%;
}
html>body #imenu li a, html>body #imenu li span {
  width:auto;
}
#imenu li span {
  border-color: #069 #6cf #5bd #f30;
  background:#069;
  padding: 0.4em 0.35em 0.25em 0.9em;
}
#imenu li a.aktuell {
  border-color: #5bd #035 #068 #f30;
}
#imenu li a:hover, #imenu li a.aktuell:hover {
  border-color: #069 #6cf #5bd #fc0;
  color:white; background:#28b;
  padding: 0.4em 0.35em 0.25em 0.9em;
}
#imenu li a:active, #imenu li a.aktuell:active {
  border-color: #069 #6cf #5bd white;
  color:white; background:#069;
  padding: 0.4em 0.35em 0.25em 0.9em;
}

/* Footer */
#fuss {
  clear:both;
  font: normal 0.83em Verdana,"Adobe Helvetica",Helvetica,Arial,sans-serif;
  text-align:right;
  padding:0.2em;
  margin: -3.5em 0 0 0;
  color:white;
  border-left: 0 none;
  border-bottom: 0 none; border-right: 0 none;
}
html>body #fuss {
  margin-top:1em;
}
#fuss a {
  color:black;
  text-decoration:none;
  font-weight:bold;
}

@media print {
  #imenu { display:none; }
  #text { border:0 none; float:none; width:auto; margin:0; }
}

Diese beiden Codeblöcke benötigen noch ein HTML-Grundgerüst:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <title>Seitentitel</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
  » hier die ausgelagerte CSS-Datei einbinden über:
    @import url(/style.css);
  » oder den CSS-Code direkt einfügen...
  </style>
</head>
<body>
  » ...und hier kommt der xHTML-Code rein.
</body>
</html>

Der XML-Prolog in der ersten Zeile setzt den Internet Explorer 6 in den 'quirks mode', in dem er nahezu dieselben Fehler (die im CSS korrigiert werden) wie seine Vorgänger hat.

Diese Vorlage ist bewußt in XHTML Strict geschrieben und die Elemente sind einzeln formatiert. So können Fehler in Verbindung mit einer Validation leichter vermieden werden und das Einfügen weiterer Inhalte erfordert die Nutzung der bereits formatierten Elemente oder CSS-Definitionen für andere Elemente, die sinnvoll und logisch passend zu ihrem Inhalt gewählt werden sollten.

Ausführliche Beschreibungen zu CSS-Layouts sowie weitere Layout-Beipiele von mir finden Sie im neuen Kapitel CSS-basierte Layouts der SELFHTML-Dokumentation.

Zufalls-Layout beim Seitenaufruf

Bei aktiviertem JavaScript wird diese Seite beim Aufruf unterschiedlich dargestellt. Die über <body onload="initCSS()"> aufgerufene Funktion prüft über self.location.search zunächst, ob mit der URL ein Parameter übergeben wurde. Falls nicht, wird über document.cookie versucht, einen Parameter auszulesen. Ist auch hier kein Parameter verfügbar, wird über var Seite = new Date().getTime() %6; eine recht zufällige Wahl aus den sechs möglichen Layouts von 0 bis 5 (sowie auch aus den Farbeinstellungen) getroffen.
Die verschiedenen Layouts sind auf dieser Seite in mehreren <style>-Elementen definiert. Zunächst ein Basis-CSS, dann die Styles für die verschiedenen Layouts und Farben und am Schluß ein weiteres Basis-CSS mit den "normalen" Einstellungen. Anhand des ermittelten Parameters werden nun alle individuellen <style>-Elemente in einer Schleife über document.getElementsByTagName("style")[i].disabled=true ausgeblendet - bis auf das ausgewählte.

Fußzeile...