Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS: Das eigene flexible Seitenlayout schnell erstellt

Auf der Suche nach dem richtigen Seitenlayout stößt man schnell auf diverse Spaltensysteme und Generatoren, die einem den Aufbau des eigenen Layout erleichtern sollen. Trotz den meist schnell zu verstehenden angewandten Klassen der einzelnen Blockelemente umfassen diese fertigen Grid-Systeme Eigenschaften und Optionen, die oftmals gar nicht zum Einsatz kommen und für die individuelle Umsetzung nicht vonnöten sind. Das kann die spätere Überarbeitung sogar erschweren.

Möchte man sich von Vorgegebenem lösen, ist die Umsetzung eines eigenen flexiblen Seitenlayouts durch einfache CSS-Befehle schnell realisierbar.

Einzelne Teilelemente definieren

Sei es ein Kopf-, Inhalts- oder Fußbereich: Um die einzelnen Spalten definiert ein Blockelement die Höchst- und Mindestbreite des gesamten Bereiches, setzt diesen vertikal zentral und kann weitere gestalterische Informationen beinhalten. In dem folgenden Beispiel ist die Breite des Elementes mindestens 600px und maximal 1000px, zwischen diesen Werten passt sie sich automatisch der Fensterbreite an.

.bereich {
	width: 100%;
	max-width: 1000px;
	min-width: 600px;
	overflow: hidden;
	margin: 0 auto;
}

Spaltenbreite errechnen und festlegen

Nachdem die einzelnen Bereiche festgelegt wurden, können sie mit den Spalten gefüllt werden. Für die Bestimmung der Breite der einzelnen Spalten reicht einfache Mathematik: Soll die Gesamtbreite (100%) auf fünf Spalten gleich verteilt werden, erhält jede Spalte eine Breite von 20 Prozent. Sollen zwischen den Spalten Freiräume bestehen, so können diese der Spaltenbreite subtrahiert und als Außenabstand angegeben werden. Wichtig dabei ist zu beachten, dass der letzten Spalte kein rechter Außenabstand hinzugefügt werden soll, da sonst am rechten Seitenrand des Blockelementes ein Freiraum entsteht, der nicht gewünscht wird. Somit haben die fünf Spalten eine Breite von 90% (5 mal 18%) plus einen Zwischenbereich von insgesamt 10% (4 mal 2,5%).

.spalte {
	width: 18%;
	margin-right: 2,5%;
	float: left;
}

Der letzten Spalte muss folglich eine Klasse hinzugefügt werden, die dieser den rechten Außenabstand wieder entzieht:

.letzte { margin-right: 0; }

Aufbau der HTML-Struktur

Nachdem alle CSS-Klassen für die Blockelemente, sowie die flexiblen Spalten definiert wurden, ist es einfacher Schritt, das HTML-Grundgerüst zu errichten. Der folgende Aufbau zeigt ein einfaches Blockelement mit den oben verwendeten fünf Spalten:

<div class="bereich">
	<div class="spalte">Erste Spalte</div>
	<div class="spalte">Zweite Spalte</div>
	<div class="spalte">Dritte Spalte</div>
	<div class="spalte">Vierte Spalte</div>
	<div class="spalte letzte">Fünfte Spalte</div>
</div>

Flexibles Seitenlayout mit verschiedener Spaltenanzahl

Möchte man in der Spaltenanzahl zwischen einzelnen Elementen variieren, so können verschiedene Klassen für Spalten erstellt und eingesetzt werden. Sind die Verhältnisse zwischen Spaltenbreite und dem Zwischenraum festgelegt (immer in Prozent), können durch die beiden folgenden Formeln die richtigen Angaben berechnet werden.

  • Spaltenbreite:
    (100 - Spaltenanzahl * Breite des gewünschten Zwischenabstandes) / Spaltenanzahl
  • Zwischenabstand:
    (100 - Spaltenanzahl * Spaltenbreite) / (Spaltenanzahl - 1)

Zusammenfassend ist es keine Kunst, das auf die eigenen Wünsche zugeschnittene flexible Seitenlayout zu erstellen, sodass der Einsatz von fertigen Grid-Systemen nicht weiter notwendig ist. Mit diesem Verständnis ist es ein vielfaches leichter, ein ideal optimiertes und auf die Ansprüche komprimiertes Seitenlayout zu erstellen.

Bitte beachte unsere Community-Richtlinien

15 Reaktionen
Fabian

overflow:hidden hat durchaus Vorteile für einzelne Spalten, wenn die platzierten Inhalte "über den Rand" hinauslaufen. Dann platzt das ganze Layout auseinander und es entstehen andere Seiteneffekte.

Antworten
Queron

@Andreas Mitschke: Was würdest du anstelle von overflow:hidden ansonsten einsetzen? Etwa extra ein Element nach den floatenden Elementen einfügen und diesem ein clear:left zuweisen? Und was für "stilisierende Auswirkungen" hat overflow:hidden so?

Antworten
K_Pliester

Alle am rumtrollen hier. Danke für den Tipp @Redaktion! :-)

Antworten
Michael Schulze

Es kann bei diesem Beispiel noch zu Fehlern im Internet Explorer kommen. Gerade der IE7, vielleicht sogar der IE8, weisen hier ab und zu Rundungsfehler auf. Das kann dazu führen, dass die letzte Spalte umbricht.
Dies kann man dann ganz einfach mit einem negativen margin umgehen:
.letzte { float: right; margin-right: 0; margin-left: -5px }

Dann ist das ganze auch IE-sicher.
Einen Nachteil sehe ich persönlich noch in der Prozentangabe der Spaltenabstände. Wenn die Spalten einen Abstand von 2,5% haben, dann sieht das bei 960px zwar gut aus, weil es 24px entspricht. Bei 480px Breite sind es allerdings nur noch 12px, was optisch vielleicht zu wenig sein könnte.

Aus diesem Grund würde ich eher mit festen Abständen arbeiten. Diese kann man dann der .spalte als Padding geben und das box-sizing auf border-box setzen. Dafür gibt es auch einen IE7 Polyfill.
Möchte man ohne Polyfill arbeiten, so kann man innerhalb einer Spalte noch einen Container anlegen, der dann das Padding enthält.

Antworten
Thomas

Ich finde den Tipp nicht schlecht. Immerhin liest man ständig von CSS-Frameworks und ich hab mich schon gefragt, ob ich der einzige bin, der das nicht braucht ;-)

Wir setzen zwar auch 960 und sass ein, aber ich bin nicht unbedingt der Ansicht, dass dadurch alles einfacher wird.

Vielleicht sollte auch mal jemand nen Artikel schreiben, wie man OHNE reset.css ein Layout baut ;-)

Antworten
felix

Lustig, dass man den Leuten inzwischen erklären muss, wie man *ohne* CSS-Framework Layouts umsetzt. Was für eine seltsame Welt...

Antworten
Comstrate

Perfekt wäre ein gemeinsames HTML-Rendering worauf die Hersteller aufsetzen, denn dann wären viele Sorgen los.

Antworten
jens_richter

und das 2,5%; float: left; fehlt :)

Antworten
andreas

Kleiner Fehler bei dem margin-right-Wert von .spalte:
es sollte wohl 2.5% (mit Punkt statt Komma) lauten, nicht?

Antworten
Andreas

wenn man aber etwas den grips anstrengt beim css schreiben, dann muss man nicht für alte optimieren, sondern sie können es automatisch auch und da hat man nicht mehr aufwand bei.

das man nicht jede css3 eigenschaft auf alte browser anpassen muss - ok, gibts eben keine runden ecken, verläufe... aber das grundlayout sollte schon stimmen.

Antworten
Queron

Wen interessiert schon der IE7? Die (paar) Benutzer dieses Browsers müssten es doch schon gewohnt sein, dass die meisten Seiten mittlerweile bescheiden damit aussehen. Man sollte solche alten, schlechten Browser nicht noch länger künstlich am Leben halten, indem man seine Seiten für diese optimiert, zumal sich der Aufwand dafür gar nicht lohnt. In einem Artikel sollte es auch nicht darum gehen, ein auf den IE7 optimiertes Beispiel aufzuzeigen, sondern sich am aktuellen Standard zu richten (soll ja schließlich auch ein aktueller Artikel sein und nicht einer, den man auch vor 5 Jahren hätte schreiben können).

Antworten
Andreas

deswegen sollte man vorne anfangen, denn first-child können auch die älteren ie und man gibt die abstände nach links.

Antworten
Queron

Für die letzte Spalte ist keine eigene Klasse nötig. Mann kann auch einfach

.spalte:last-child { margin-right: 0; }

schreiben.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen

Finde einen Job, den du liebst