Ein CSS Hack ist verantwortlich für die stabile Darstellung der Spalten in Dkret. Sowohl in aktuellen als auch in bereits veralteten Browsern sollten die Spalten ähnlich dargestellt werden, was leichter aussieht, als es in Wirklichkeit ist.

Ein großes Problem stellt der sogenannte Box model bug in älteren Internet Explorer Versionen dar. Außerdem wurde Spaltendarstellung früher meist mit Hilfe von HTML umgesetzt. Moderne Webseiten sollten jedoch “barrierefrei” programmiert werden, weshalb statt HTML lieber CSS benutzt werden sollte. CSS sieht allerdings keine Spaltendarstellung vor.

Alle “Divisions” (DIV) von dkret werden durch das DIV #wrapper umschlossen.

Das Headerbild und der Name des Blogs werden innerhalb von #header angezeigt.

Alle Links des “Suckerfish”-Menus (die Links unterhalb des Seitenkopfes) befinden sich innerhalb von #access.

Die einzelnen Beiträge schließlich werden in #content dargestellt. Dieses DIV ist selber von #container umschlossen.

Das #container DIV ist ein wichtiger design trick. Dadurch ist dkret in der Lage, die Seitenleiste (Sidebar) beliebig auszurichten. Außerdem kann dadurch der oben erwähnte Box-Mode-Bug des Internet Explorers umgangen werden.

Alle Widgets, die man im WordPress-Admin-Bereich der “Primary Sidebar” hinzufügt, werden in #primary dargestellt. Alle Widgets der “Secondary Sidebar” werden #secondary hinzugefügt. Im Verlaufe dieses Beitrags werde ich noch erklären, wie die Seitenleisten plaziert werden können und wie ihre Größe geändert werden kann.

Alle Widgets, die man “Bottombar Column1″, “Bottombar Column2″ oder “Bottombar Column3″ hinzufügt, werden innerhalb der dazu passenden DIVs innerhalb #bottombars hinzugefügt.

Obwohl einige DIVs nebeneinander als Spalten dargestellt werden, sind sie innerhalb des Sourcecodes nacheinander plaziert.

Ändern der festen Breite von Dkret

Kein DIV kann breiter als #wrapper sein, weil alle DIVs ja in dieses eingeschlossen sind.

Um ein 600 Pixel breites Blog zu erhalten, muss nur die Breite des DIVs #wrapper entsprechend angepasst werden.

#wrapper { width: 600px; }

Sollte eine flexible Breite gewüscht werden, muss die Breite auf “auto” eingestellt werden.

#wrapper { width: auto; }

Der Schlüssel zu Layout-Änderungen: Ändern von CSS

Ein Blick in die style.css ist notwendig, um nachvollziehen zu können, wie das Dkret-Layout erzeugt wird.

Alle CSS-Stile des Dkret-Layouts sind in der style.css gruppiert:

/*
LAYOUT: Two-Column (Right)
DESCRIPTION: Two-column fluid layout with one sidebar(s) right of content
*/
div#wrapper {
	margin: 0 auto;
	width: 890px;
	min-width: 650px;
}
div#container {
	clear: both;
	float: left;
	margin: 0 -320px 50px 0;
	width: 100%;
}
div#content {
	margin: 25px 320px 0 0;
	overflow: hidden;
	padding: 0 20px;
}
div.sidebar {
	float: right;
	overflow: hidden;
	padding: 0 15px;
	width: 290px;
}
div#primary	{
	margin: 15px 0 0;
}
div#secondary	{
	margin: 0 0 20px;
	clear: right;
}

Stylen von #wrapper

#wrapper { width: 890px; }

Das Blog ist 890 Pixel breit.

#wrapper { min-width: 650px; }

Sollte mit Hilfe einer Scheme-Datei eine automatische Breite von #wrapper erzwungen werden, bewirkt die Angabe “min-width”, dass das Blog zwar unendlich vergrößert werden kann, mindestensaber 650 Pixel breit ist. Auch “min-width” kann auf “auto” gestellt werden, die Seitenleiste kann dann aber nicht immer neben dem Inhalt dargestellt werden und “rutscht” möglicherweise nach unten.

#wrapper { margin: 0 auto; }

Die “margin”-Definition zentriert das Blog. Die Abstände des Blogs nach oben und unten werden auf 0 Pixel gesetzt. Der rechte und linke Rand von #wrapper wird je nach Auflösung automatisch gesetzt.

The “margin”-Definition ist eine Kurzform. Der oben dargestellte CSS-Code bewirkt das gleiche wie:

#wrapper {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

Stylen von #container

#container { clear: all; }

Kein DIV No vor und außerhalb #container (z.B. #access) kann neben #container vorbeifließen (float).

#container { width: 100%; }

Das DIV soll genauso groß sein, wie #wrapper. Da #wrapper 890 Pixel breit ist, ist #container so ebenfalls 890 Pixel breit.

#container { float: left; }

Beide Seitenleisten (#primary und #secondary) werden nicht vom DIV #container umschlossen. Damit sie später neben #content vorbeifließen (floaten) können, muss #container die “float”-Definition zugewiesen werden. Wenn diese Definition gelöscht wird, “rutschen” die Seitenleisten unter die Beiträge.

#container { margin: 0 -320px 50px 0; }

Diese Definition ist sehr wichtig für das Layout von dkret. Anhand einer kleinen Grafik möchte ich das verdeutlichen:

Es soll keine Lücke zwischen den Beiträgen und der Top-Navigation entstehen. Deshalb muss die “top-margin” auf 0 gesetzt werden.

Der zweite Wert ist besonders wichtig. Der rechte Abstand (margin-right) wird auf -320px eingestellt, was der Breite der Seitenleiste entspricht.

Der untere Abstand kann vergrößert und verkleinert werden, um den Abstand zwischen den Beiträgen und dem Fußteil der Seite anzupassen.

Da beide Seitenleisten am rechten Rand dargestellt werden sollen, muss links kein Rand gelassen werden (left-margin = 0). Ergänze einen negativen linken Rand, falls Du Seitenleisten auf beiden Seiten wünschst.

Die negativen Ränder sind unsichtbar, weil sie außerhalb #container ergänzt werden. Dieser Hack ist erforderlich, um den bereits erwähnten Box-Model-Bug zu umgehen.

Stylen von #content

Alle Beiträge werden dem DIV #content hinzugefügt.

#content { margin: 25px 320px 0 0; }

Wahrscheinlich ist Dir schon alles klar. Der zweite Wert (margin-right) ist wieder wichtig. Ohne einen rechten Abstand wäre kein Platz für die Seitenleisten vorhanden. Der Wert entspricht deshalb exakt dem negativen rechten Rand von #container (allerdings positiv, da der Rand ja innen hinzugefügt werden soll).

#content { padding: 0 20px; }

Mit Abstand zwischen den Beiträgen und den Seitenleisten sieht es einfach besser aus. Hier setzte ich erneut eine Kurzform für ”padding-top”, “padding-right” usw. ein.

Stylen von  .sidebar

Obwohl sowohl #primary als auch #secondary mit CSS verändert werden können, ist es einfacher für gemeinsame Stile, die gemeinsame Klasse “sidebar” anzupassen.

.sidebar { padding: 0 15px; }

Etwas Abstand zwischen den Widgets der Seitenleiste und den Beiträgen ist definitiv besser.

.sidebar { width: 290px; }

Die Seitenleisten sollen exakt 320 Pixel breit sein. Warum muss also die Breite aber auf 290 Pixel festgelegt werden? Wegen des hinzugefügten extra Abstandes (padding) oben. Etwas einfache Mathematik wird helfen: 15 Pixel (padding-left) + 15 Pixel (padding-right) = 30 Pixel. Füge diese den 290 Pixel hinzu und du bekommst —–> 320 Pixel!

.sidebar { float: right; }

Diese letzte Definition macht die “Magie”. Beide Seitenleisten fließen nach rechts und springen in die geschaffene Lücke im DIV #container.