Möge die Macht der CSS mit Euch sein …

… schlechtes Adaption des Zitats, zugegeben, aber irgendwie wahr zwinker.

Ein Beispiel für die nahezu unendlichen Gestaltungsmöglichkeiten mittels CSS ist die Seite, die Sie gerade betrachten. Zugegeben, ich bin kein Designer und über Geschmack lässt sich bekanntlich trefflich streiten, aber es dreht sich nicht um meine Fehlgriffe, sondern um die Möglichkeiten, die sich durch CSS für Designer ergeben.

Möglichkeiten durch CSS? Alles chinesisch, ich verwende weiter Tabellen!

Dies sei Ihnen unbenommen, aber überlegen Sie einmal, was Sie alles anstellem nüssen, wenn sie alleine eine so einfache Seite wie diese umgestalten müssen, weil ihr Auftraggeber der Meinung ist, dass seine Firma ein neues Outfit auf der Webseite braucht …

Um eine Seite wie diese mit Layout-Tabellen zu erstellen, müsste man ungefähr folgende Struktur benutzen:

<table>
	<tr>
	    <td colspan="3">Überschrift</td>
	<tr>
	<tr>
		<td>
			<table>
				<tr>
					<td>Haupt-Navlink 1</td>
				</tr>
				<tr>
					<td>Haupt-Navlink 2</td>
				</tr>
				<tr>
					<td>…</td>
				</tr>
			</table>
		</td>
		<td>Inhalt</td>
		<td>
			<table>
				<tr>
					<td>Kapitel-Navlink 1</td>
				</tr>
				<tr>
					<td>Kapitel-Navlink 2</td>
				</tr>
				<tr>
					<td>…</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr colspan="3">
		<td>Fußzeile</td>
	</tr>
</table>

Kommt Ihnen das bekannt vor?

Das Schlimmste ist: In dem obigen Code ist noch keinerlei Styling enthalten, die Tabellenzellen haben einen Abstand zueinander, die Hintergrundbilder müssen irgendwie auf die ganzen Tabellenzellen verteilt werden, Umrandungen fehlen oder müssen entfernt werden und ob sich das Ganze hinterher an die Breite des Bildschirms des Betrachters anpassen kann, ist immer noch eine Frage. Ziemlich viel Aufwand für das bischen Inhalt, nicht wahr?

Weiter: Return of the CSS

  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