CSS: 3 Spalten, "geskinnt"

Vollständig "geskinntes" 3 Spalten CSS & (X)HTML Layout

Warum CSS und nicht Tabellen?

Weil sich Web­sei­ten, die auf Lay­out-Tabel­len auf­ge­baut sind, nicht ver­nünf­tig auf mei­nem Handy lesen las­sen …

Etwas ernster: Weil es den eigent­lichen (X)HTML Code klein und über­schau­bar hält und weil es mit CSS recht ein­fach ist, die Hin­ter­grund­bil­der einer Web­seite ohne große Code-Än­derungen, wie sie in einer auf Tabel­len ba­sier­ten Struk­tur nötig wären, in ihrer Größe ver­än­dern kann — wei­tere Gründe fin­det man auf dieser Seite und dort spe­ziell hier.

Gut, es gibt noch ein paar kleine Ein­schrän­kun­gen wie z.B. dass alle Top und Bottom Hin­ter­grund-Bilder die selbe Höhe haben sollten (nicht müssen!) wie die Kopf- bzw. Fuß­zeile, aber das kann man – meiner Mei­nung nach – ver­schmer­zen.

Grund­legen­der Aufbau

Die im schema­tischen Aufbau gezeig­ten Ele­mente finden sich natür­lich alle im Style Sheet wieder. Es kann nahezu ohne Ver­än­derungen über­nommen werden, ledig­lich An­gaben wie min-width, width, height, margin, padding und background url müssen bei den grün mar­kier­ten Stellen an die gewün­schten Größen ange­passt werden.

Diese kom­men­tierte CSS Datei fin­det bei der 3 Spalten Test Seite ihre Anwen­dung.

Positionierung

body {
margin:0px;
padding:0px;
border:0px;
}

Äußerer Umschlag

div#outer_wrapper {

Da min-width vom IE nicht unterstützt wird, benutze ich ein "blindes" <b> Tag im Markup, siehe Dekoration

min-width:740px;

Dies dient zum "minimieren" eines IE Bugs im Zusammenhang mit dem background "Anstrich", da es aber eine Lücke unterhalb von #footer erzeugt, muss die selbe Deklaration natürlich auch für #footer vorgenommen werden

width:100%;
}

Innerer Umschlag

div#wrapper {
}

Kopfzeile

div#header {
border: 0px;

Muss bei Verwendung von "blinden" <b> Tags zur Hintergrundgestaltung transparent sein, sonst können die nicht durchscheinen

background:transparent;

eigentlich obsolet, da per default relative, aber einige Browser verstehen sonst den z-index nicht

position: relative;

Dies ist "um dem Kind ein Layout zu geben" da der IE (v6 sp2) einen kleinen Bug hat

width:100%;

Die oben stehende Deklaration verursacht horizontale Scrollbalken im IE, hiermit bekommt man sie wieder weg

margin:0 -1px
}

Positionierungs - Container

div#container {
float:left;
width:100%;

Der IE verdoppelt margins bei floats, dies korrigiert das

display:inline;

Ab hier weiche ich vom ALA Artikel ab und "gehe in die andere Richtung". Das vermeidet überflüssige floats und stellt NN4 Kompatibilität sicher

margin-left:-200px;
}

Navigationsleiste

div#navbar {
float:left;
width:150px;

Der IE verdoppelt margins bei float, dies korrigiert das

display:inline;
margin-left:200px;
}

Inhalt

div#main {

Die width von #left (150px) + die negative margin von #container (200px)

margin-left:350px;
}

Seitenleiste

Anmerkung am Rande: Wenn #sidebar immer kürzer als #main ist, dann benötigt man diese Regel nicht

div#sidebar {

Dies passt #main an die Länge der rechts liegenden #sidebar an, selbst wenn der Inhalt von #main "kürzer" ist

padding-left:100%;

Dies holt die auf Grund des padding Wertes verschobene #sidebar wieder "zurück"

margin-left:-200px;
}

Dies stellt sicher, dass der IE (v6 sp2) dieses Element anzeigt (Gleiches Problem wie bei #header, aber andere Lösung)

div#sidebar p {
position:relative;
}

Fußzeile

div#footer {

Siehe #outer_wrapper

width:100%;

Um #container aufzuräumen

clear:both;
}

Diese class wird bei 2 strukturellen Hacks (sorry) im Markup angewandt. Das erste semantisch bedeutungslose Element wird benötigt, um #left im NN6 aufzuräumen, das zweite, um den #container im NN4 aufzuräumen.

div.clearing {height:0px;clear:both;}

Ab hier nur Dekoration

Allgemein

body {background: #ffe url(main.gif);}

Kopfzeile

Verwendung von absolut positionierten <b> Elementen, da sie keine semantische Bedeutung haben, kürzer als span sind und nahezu überall eingesetzt werden können. Alle <b> Elemente gehören zu class="topdeco"

b.topdeco {
position:absolute;

Damit einige der Browser das überhaupt darstellen

display:inline;
}

Minimale Breite

für min-width Simulation bei IE < 7

b#blind {

gleiche width wie min-width

width:740px;

damit man es nicht sieht...

height:0px;

... und zwar auf keinen Fall

z-index:0;
}

Höhe und vertikale Position der Dekoration

Wichtig, damit alles die selbe Höhe hat und man keine bösen Überraschungen erlebt. height = Bildhöhe

div#header, b#topleft, b#topmiddle, b#topright {
height:100px;
top:0;
}

bei den folgenden 3 Deklarationen muss width an die jeweilige Bildbreite angepasst werden

Oben Links

b#topleft {
left:0;
width:300px;
background:#f00 url(topleft.gif) no-repeat top left;

damit es über dem body background Bild zu sehen ist

z-index:2;
}

Oben Mitte

b#topmiddle {
left:0;
width:100%;

Das Bild sollte in X-Richtung kachelbar sein

background:#ff0 url(topmiddle.gif) repeat-x;

damit es über dem body background Bild zu sehen ist aber unter den rechten und linken Bildern bleibt

z-index:1;
}

Oben Rechts

b#topright {
right:0;
width:300px;
background:#0f0 url(topright.gif) no-repeat top right;

damit es über dem body background Bild zu sehen ist

z-index:2;
}

Navigation

"Gefälschte Voll-Spalten" (faux-column) Technik, wie in ALA. transparent ist wichtig, damit der body background durchscheinen kann. Bildbreite = Spaltenbreite. Dies ist die linke Spalte

div#outer_wrapper {
background:transparent url(left.gif) repeat-y left;
}

Seitenleiste

"Gefälschte Voll-Spalten" (faux-column) Technik, wie in ALA - siehe #outer_wrapper. Dies ist die rechte Spalte

div#wrapper {
background:transparent url(right.gif) repeat-y right;
}

Fußzeile

#footer, b#bottomleft, b#bottomright {
height:100px;
}
#footer {
background: url(bottommiddle.gif) top left;
}
#footer div {
position:absolute;
z-index:2;
}
b.bottomdeco {
position:absolute;
z-index:1;
}

#bottomleft {
left:0;width:160px;
background:#f00 url(bottomleft.gif) top left;
}
#bottomright {
right:0;width:210px;
background:#0f0 url(bottomright.gif) top left;
}