HTML Wars: Return of the CSS …

Wie bereits im letzten Teil zu sehen war, ist ein Layout mit Tabellen nicht unbedingt das Wahre, wenn es um die Wartbarkeit des Codes geht. Nach dem "schlechten" Beispiel folgt nun ein "gutes":

<div id="container">
	<div id="header">
		Hier kommt die Kopfzeile
	</header>
	<div id="wrapper">
		<div id="content">
			Hier steht der Inhalt …
		</div>
	</div>
	<div id="navigation">
		Hier befindet sich die Navigation
	</div>
	<div id="extra">
		hier zusätzlicher Inhalt
	</div>
	<div id="footer">
		Hier kommt die Fußzeile
	</div>
</div>

Alle Elemente zeigen durch ihre ID an, welche Funktion sie erfüllen, die logische Struktur ist so gewählt, dass der Inhalt als erstes kommt.

Was sind die Vorteile?

  • Durch den Aufbau mit strukturiertem (X)HTML wird der "Overhad" einer Webseite massiv reduziert.
  • Durch die eindeutigen IDs sind die Elemente nahezu frei auf der Webseite positionierbar
  • Die Breite der Webseite lässt sich einfach und ohne zusätzlichen Scriptcode an die Breite des Darstellungsfensters anpassen
  • Der Seitenstil ist vom Seiteninhalt getrennt. Stil-Änderungen der Webseite werden Zentral über eine CSS Datei durchgeführt.

Frei positionierbar? Geht das?

Kurze Antwort: Ja! Sehen Sie sich diese Seite mit identischem Seitencode an, lediglich die CSS Dateien wurden ausgetauscht. Überzeugen Sie sich selbst, indem sie in den Quelltext der Seite sehen zwinker.

Wird fortgesetzt …

  1. Thema: (X)HTML und CSS
    1. Die Macht der CSS
    2. Return of the CSS Part I & II
  2. HTML5 und CSS: 40 unterschiedliche Layouts mit identischem HTML5
  3. CSS: 40 unterschiedliche Layouts mit identischem (X)HTML
  4. "Geskinntes" 3-Spalten (X)HTML & CSS Layout
  5. CSS Pseudo-Tabelle mit gerundeten Ecken (veraltet)
  6. HTML5 und CSS3 - Scrolling und Fading Experiment - ohne Javascript