Das CSS des Templates
Im ersten Teil der Reihe rund um HTML 5 bis zum fertigen WordPress-Theme ging es um das Markup des Templates. Nun folgt der Beitrag, der sich mit der Erstellung des Stylesheets beschäftigt.
- Teil: Das HTML 5 Markup
- Teil: Erstellung des Stylesheets
- Teil: HTML 5 Darstellung im IE
Vorweg
Ich werde im Folgenden nicht auf alle Einzelheiten eingehen. Formatierungen der Absätze, Hyperlinks etc. sollten klar sein. Im Wesentlichen geht es um die generelle Struktur des Templates.
Zur Vereinfachung wird auf ein komplexes Reset des Stylesheets verzichtet und stattdessen mit folgendem gearbeitet:
* {margin:0; padding:0; border:0;}
Die HTML 5 Elemente mittels CSS ansprechen
Die neuen HTML 5 Tags werden wie gewohnt mit CSS angesprochen. Allerdings hat der Browser nicht – wie bei bekannten Tags – eine Vorstellung wie er sie darstellen soll. Daher sollte man erst einmal grundlegendes festlegen. So entsprechen die verwendeten neuen Elemente den Block-Elementen wie div oder blockquote.
section, aside, article, header, footer, nav {display:block;}
Breite festlegen und zentrieren
Das Ergebnis soll später wie auf folgendem Bild aussehen:
Ich habe mich dabei auf eine Breite von 960px festgelegt und den Inhalt des section-Tags mit der ID ‘wrap’ zentriert.
#wrap {
width:960px;
margin:0 auto;
overflow:hidden;
}
Das overflow:hidden sorgt letztlich dafür, dass ich später keine Probleme habe ‘floats’ innerhalb der section zu benutzen.
Formatierung des Dokumentkopfes
Der Kopf des Dokuments enthält das Logo und die Seitennavigation. Der header des wrap-section-Elements ist mithilfe des Kind-Selektors ansprechbar. Er bekommt eine feste Höhe und wird relativ positioniert, da das Logo innerhalb absolut positioniert wurde.
section#wrap > header {
width:100%;
height:100px;
position:relative;
}
Die Positionierung des Logos werde ich überspringen, da hier lediglich das Hyperlink-Element mit den nötigen Formatierungen ausgestattet wurde und das h1 schließlich ausgeblendet. Man erinnere sich daran, dass man mit HTML 5 Blockelemente innerhalb des a-Inlineelements haben darf.
Die Navigation nav innerhalb des headers soll die Seitennavigation werden. Die Positionierung erfolgt durch:
header > nav {
margin-left: 380px;
}
Formatierung der Sidebar
aside {
width:310px;
float:left;
margin:40px 0 0 0;
height:1%; }
Die Sidebar wird mittels “float” an den linken Rand des section#wrap gesetzt. Um etwas Abstand nach oben zu wahren wird mithilfe der Kurzschreibweise ein Außenabstand von 40px nach oben gesetzt.
Formatierund des Inhalts
Der Inhalt des Blogs wird wieder durch ein section-Tag gruppiert, welches wie folgt formatiert wurde:
#content {
width:580px;
margin:40px 0 0 380px;
}
Auch hier wird neben einer Breitenangabe der Außenabstand noch oben festgelegt. Zudem wird ein Außenabstand nach links integriert, damit die Sidebar nicht gestört wird!
Das header-Tag des Inhalts enthält genauso wie das header-Tag der Sidebar und wie die Seitennavigation im header semantische Inhalte, die vom Benutzer automatisch richtig aufgefasst werden, und somit mittels des Stylesheets ausgeblendet werden.
section > header h3, aside > header > h2, section > header > h2 {display:none;}
Die Formatierung des arictle-Tags legt im Großen und Ganze lediglich Schriftformatierungen fest und ist daher eher uninteressant.
Zusammengefasst
Die Formatierung der neuen HTML5 Elemente ist nicht anders zu handhaben wie vorher auch. Warum auch? – an den Cascading Stylesheets hat sich ja nichts geändert. Ein wesentlicher Punkt möchte ich nochmal erwähnen: Da der Browser keine Vorstellung hat wie er mit den neuen Elementen umzugehen hat, ist es sinnvoll festzulegen, ob es sich um ein Inline-Element oder ein Block-Element handelt.
Das komplette Stylesheet kann man sich hier anschauen. Der komplette Aufbau des Templates mit ein paar graphischen Elementen ist hier zu begutachten.
Kommentieren