Skalierbares & Flüssiges Webdesign

von Alex, Tags: css design layout web

Wer eine Webseite entworfen hat, und einen großen Bildschirm sein eigen nennt, der kennt das Problem. Auf dem Bildschirm sieht die Schrift akzeptabel aus, auf anderen Bildschirmen mit niedrigerer Auflösung riesig.

Hinzu kommt, dass in aller Regel dann auch horizontale Scrollleisten auftauchen. Ein meistens ungewolltes Ergebnis. Wenn dann das Layout angepasst wird, bleibt oft zu viel freier Platz übrig.

Um diesen Problemen abzuhelfen, sollte man sich an erster Stelle von starren Tabellen im HTML Code verabschieden, denn sie verhindern, dass man das Layout schnell und effektiv in wenigen Minuten umstellt.

<div id="main">
		<div id="sidebar">
			<!-- Sidebar Inhalt hier -->
		</div>
		<div id="content">
			<!-- Content Inhalt hier -->
		</div>
</div>

Mit diesem Grundlegenden Gerüst lässt sich schon eine Menge Anstellen. Mehr als es auf den ersten Blick scheint. Es lässt sich Beispielsweise ein zweispaltiges Layout anlegen. Es lässt sich die Reihenfolge der Elemente ändern. Es lassen sich Abstände, Rahmen und Hintergründe festlegen welche an Bedingungen geknüpft sein können.

Selektoren und Eigenschaften

Um CSS ganz zu verstehen sollte man erkennen dass ein HTML Dokument von einem Browser immer wie ein Baum gelesen wird. Um dies zu veranschaulichen, kann man auch zu einem anderen Model greifen. Das HTML Dokument besteht so aus mehreren Schachteln, in denen wiederrum andere Schachteln enthalten sind. Jedes Element, also jede Schachtel hat ein umgebendes Element (Elternelement) und manche haben in sich selbst Elemente (Kinderelemente).

Um mit CSS Dokumente zu formatieren und Elemente direkt anwählen zu können verwendet man sogenannte Selektoren.

body{ 
	font:12px Verdana #333; 
}

Hier ist body der Selektor. Damit wird der HTML Tag body ausgewählt. Dann wird innerhalb der geschweiften Klammern der Schrift (font) die Größe, die Schriftart und die Farbe zugewiesen.

Soweit ist das ganze noch relativ einfach. Etwas komplizierter wird es, wenn man komplexere Selektoren verwendet. Wie in dem Beispiel oben zu sehen, habe ich zwei Schachteln (div Containern) eine ID gegeben. Jede ID darf in einem HTML Dokument nur einmal verwendet werden. Sonst würde die ID den Zweck, eine eindeutige Identifikation genau dieses einen Elements zu bieten, nicht mehr erfüllen.

Um den komplexeren einsatz von Selektoren zu zeigen, im folgenden ein neues HTML Beispiel.

<div id="main">
		<div id="sidebar">
			<!-- Sidebar Inhalt hier -->
			<p class="new">Neuer Absatz</p>
		</div>
		<div id="content">
			<!-- Content Inhalt hier -->
			<p class="new">Neuer Absatz<p/>
		</div>
		<p class="new">Der Eigentliche Inhalt</p>
	</div>

Hier sieht man nun dass den Absätzen sogenannte Klassen (class="new") zugewiesen wurden. Klassen können in HTML Dokumenten beliebig oft vorkommen. Sie ermöglichen es schnell im HTML Dokument auf den jeweiligen Stil zuzugreifen den man in seiner CSS Datei festgelegt hat.

Mit diesen Klassen kann man beliebige Verschachtelungen vornehmen. Daher hat CSS auch seinen Namen.

#main p.new{
	font-size:20px;
}
 #sidebar .new{
	color:#999999;
}
.new{
  font-style:italic;
}
 * p{
	padding:5px;
}
 #main > .new{
	font-family: Arial;
}
 #sidebar + div{
	background-color:#333333;
}

Um nun die IDs auszuwählen (z.B. main) schreibt man #main. Klassen formatiert man mit .new. Als nächster Schritt verbindet man die Selektoren miteinander. Dies ist auf vier verschiedene Arten möglich.

• Mit Leerzeichen zwischen den Selektoren. (#sidebar .new)

Damit werden alle Elemente mit dem entsprechenden Selektor in dem Element ausgewählt. In diesem Fall alle Klassen .new innerhalb der ID #sidebar.

• Ohne Leerzeichen zwischen den Selektoren. (p.new)

Damit werden alle p Tags mit der Klasse .new ausgewählt. Dies funktioniert genauso mit Klassen, Tags und IDs an erster oder zweiter Stelle.

• Mit einem > zwischen den Selektoren. (#main > .new)

Damit werden alle Klassen .new die exakt eine Ebene unter der ID #main liegen ausgewählt. Also <div id="main"> <p class="new"> Hallo </p> </div> aber nicht <div id="main"> <p> <p class="new"> Hallo </p> </p> </div>.

• Mit einem + zwischen den Selektoren. (#sidebar + div)

Damit werden alle div Tags welche auf der selben Ebene wie die ID #sidebar liegen und ihr direkt folgen ausgewählt. Also <div id="sidebar"> </div> <div> </div>.

Eigenschaften und Einheiten

Es gilt auch bei CSS wie bei vielen anderen Sprachen das Prinzip der Vererbung. Jedes Kind-Element erbt die Eigenschaften seines Elternelementes. Das bedeutet, wenn dem body Tag eine Schriftart zugewiesen wird, wird diese von allen Elementen innerhalb des Bodys übernommen.

Die meisten Webdesigner sind, aufgrund der am Anfang des Artikels genannten Gründe, dazu übergegangen, nicht mehr das Layout mit starren Einheiten zu definieren sondern dynamische Einheiten zu verwenden. Starre Einheiten sind in diesem Fall Pixel. Wie groß ein Pixel jedoch auf dem Bildschrim ist, hängt bekanntermaßen von der Auflösung ab. Daher eignen sich Pixel nicht unbedingt für das Layout.

Dynamisch ist anders

Viel eher hingegen kann man mit prozentualen Angaben und der Einheit em eine sinnvolle Einteilung erreichen.

#main{
width:60%;
margin:6em auto;
}
 #sidebar{
width:20em;
padding:2em;
float:right;
}

Mit width:60% setzt man die Breite auf 60% des Elternelementes, in diesem Fall der gesamten HTML Seite. Um das Element in der Mitte zu zentrieren und auch Abstand nach oben und unten zu lassen notiert man im CSS margin:6em auto;.

Wenn man möchte kann man ein Element aus dem Textfluss nehmen (float:right;). Es steigt dann ganz nach oben an die Oberkante des umgebenden Elternelementes. Hier ist außerdem ein Innenabstand von 2em angegeben, und die Weite auf die zwanzigfache Höhe der Schrift gesetzt (width:20em;).

Die Beispielwebseite

Durch den Einsatz von float und relativen Einheiten wird die Seite viel flexibler, reagiert auf das vergrößern und verkleinern des Browserfensters und selbst bei unterschiedlichen Bildschirmgrößen bleibt der Text immer noch gut lesbar.

Tips

Wer gerne mehr erfahren möchte, sollte sich bei A List Apart durchs Archiv klicken, dort sind für Webdesigner einige interessante Beiträge von sehr guten Webdesignern nachzulesen.

Außerdem bietet Selfhtml auch wie immer Hilfe an.

Zum Schluss bleibt nur die selbe Empfehlung wie immer. Selbst ausprobieren und nachlesen im Quelltext bei interessanten Webseiten hilft so gut wie sonst kein anderes Tutorial.