Sie sind hier: Start > Artikel

EfA 2004 – Teil 3

Die Unterseiten

Auf den folgenden Unterseiten sieht das Layout natürlich anders aus. Der in der vorangegangenen Folge besprochene Newsbereich fällt hier weg und macht Platz für die Fachartikel.

Tags: , ,

Autor: tc

Unterseiten ohne Newsbereich im Opera 7.5 / Win2k

Statt des Style Sheets »hauptmenue.css« wird hier »artikel.css« referenziert. Die Änderungen sind im Style Sheet »content.css« definiert, das dort anstelle von »home.css« steht.

Seitenkopf und Navigation bleiben gleich, daher beschreiben wir im Folgenden nur den unterschiedlichen Mittelbereich. Er wird im Wesentlichen durch die id="artikel" des body-Elements gebildet, in dem sich #content und die schon von der Startseite bekannte #navigation befinden.

  1. <div id="content">
  2. <h1>Gute Gestaltung und gute Zugänglichkeit. <abbr title="Cascading Style Sheets">CSS</abbr> hilft allen</h1>
  3. <p id="datum">19.03.2004, <a href="/autoren/#jc" title="Autor: Joe Clark">JC</a></p>
  4. <p id="abstract" class="abstract"> <img src="/artikel/gestaltung-hilft/aufmacher_gestaltung.jpg" class="imgright" alt="" width="150" height="150"> Bevor es richtig losgeht...</p>

Das hier verwendete #content wird wie bereits auf der Startseite durch die Angaben

  1. #content {
  2. width: 77%;
  3. float: left;
  4. margin: 1.3em 0 0 .5%;
  5. background: #fff;
  6. }

in der Datei »chrome.css« bemaßt. Im Unterschied zu den dreispaltigen Layouts der Start- und Verteilerseiten entfallen aber hier die zusätzlichen Blöcke für die linke und mittlere Spalte, so dass sich der Inhalt von #content nun automatisch auf die zur Verfügung stehende Breite ausdehnt.

Weitere Angaben zur Positionierung des Inhaltsblocks sind somit unnötig und es felgen nur noch Angaben zur Typografie der Inhalte. Diese stehen in der »content.css« und sind größtenteils mit Kontext-Selektoren aufgebaut. Dadurch wird sichergestellt, daß zum Beispiel nur die Elemente <h1> - <h4>, <p>, <ul> etc., die innerhalb von #content stehen, mit diesen Formatierungen versehen werden. Mit diesen Kontext-Selektoren kann die unnötige Vergabe von Klassen (<h1 class="wichtigsteueberrschrift">, <p class="Textabsatziminhalt) weitestgehend vermieden werden und der HTML-Code bleibt schlank und rank. Stattdessen genügt die einmalige Angabe z. B. aller Elemente <h1>, die innerhalb eines Elementes mit der id="content" stehen:

  1. #content h1 {
  2. border-bottom: 1px solid #bcbcd0;
  3. margin: 1em 0 0 0;
  4. text-shadow: #ddd 0.2em 0.2em 0.2em;
  5. width: 98%;
  6. }

Nach den Inhalten folgen wie auf der Homepage die Bereiche mit weiterführenden Links und die Fußzeile:

  1. <div id="related">

Im HTML- und CSS-Code von einfach-fuer-alle.de gibt es auch darüber hinaus einiges zu entdecken. Die gesamten Style Sheets finden Sie als Archiv zum Herunterladen im Bereich Downloads. In der nächsten Folge startet dann der Relaunch des 2006er-Jahrgangs von ›Einfach für Alle‹.

Diese Serie basiert auf einem Text von Tomas Caspers aus der dritten Auflage des Buchs »CSS-Praxis« von Kai Laborenz und wird hier mit freundlicher Genehmigung der Autoren veröffentlicht.

Diskutieren Sie mit!

Wir würden gerne Ihre Meinung wissen: Teilen Sie uns Ihre Erfahrungen mit und diskutieren Sie diesen Artikel mit anderen Experten.