HTML5 / CSS3 - Praxistutorial 1 - Die Infobereiche
1. Die Abschnitte
- Überblick
- Die Basisdefinitionen
- Die Hauptnavigation
- Die Infobereiche
- Die Inhalte
- Der Footer
- Das Ausklappmenü Teil 1
- Das Ausklappmenü Teil 2
2. Alles nach unten
nachdem unsere Navigation jetzt richtig "hübsch" ist, muss zuerst mal der Rest ein wenig nach unten.
div.main {
margin-top: 20px;
}
So!
Und jetzt muss ich mich mal selber ganz heftig kritisieren. Denn als ich die CSS-Anweisungen für dieses Tutorial aufgebaut habe, war ich an dieser Stelle extrem schludrig.
Und weil das ein ziemlicher Bockmist ist, habe ich es gelassen, um euch einen wichtigen Tipp zu geben. Denn normalerweise sollte man immer noch oben nach unten arbeiten.
In diesem Fall hätte also der <header>
ein margin-bottom: 20px;
bekommen müssen. Warum? Ganz einfach, man ist einfach flexibler. Und hier
rede ich aus Erfahrung.
3. Die Infobereiche
aside {
width: 180px;
float: left;
margin: 10px;
padding: 5px;
color: #000;
border-radius:5px;
box-shadow: 0 0 0 2px #c8c8c8, 0 0 0 4px #d2d2d2,
0 0 0 6px #dcdcdc, 0 0 0 8px #e6e6e6,
0 0 0 10px #f0f0f0, 0 0 0 11px #b4b4b4;
}
Erläuterung
Auch hier gibt es eigentlich nur eine wirklich interessante Stelle. Und das ist box-shadow
. Denn hier wird ein insgesamt 11 Pixel dicker Schatten erstellt, bei
dem sich alle zwei Pixel der Grauton weiter verdunkelt. Die letzte Anweisung (0 0 0 11px #b4b4b4;
sorgt dann noch für einen dünnen "Rahmen". So bekommt man
einen netten "3D"-Effekt. Ach ja, man das wirklich ohne Probleme in mehrere Zeilen packen.
4. Die Überschriften
aside h3 {
background: -webkit-linear-gradient(#0ff, #00f);
background: linear-gradient(#0ff, #00f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#0000ff);
border-radius: 5px 5px 0 0;
color: #fff;
padding: 3px;
font-weight: normal;
margin: -16px -16px 0 -16px;
}
Keine Angst
Die interessanten Sachen kommen noch. Darum gehe ich hier auch nur auf die wichtigen Dinge ein.
Erläuterung
Negative Margins
Keine Ahnung, ob ich das hier schon mal gezeigt habe. Darum mach ich es einfach. Also die Überschrift soll oben komplett bündig zum Infobereich verlaufen. Und da der
einen 16 Pixel dicken Schatten hat, muss man oben rechts und links jeweils mit einem -16px
arbeiten, damit das funktioniert. Und nein, negative Paddings
gibt es nicht.
Die Rundungen
Bisher gab es die bei allen vorherigen Elemente an jeder Ecke. Hier aber wollen wir nur die oberen abrunden. Also links und rechts oben 5 Pixeln, links und rechts unten
0 Pixel macht folglich 5px 5px 0 0;
.
5. Die Absätze
Zwei kleine Anweisungen und das war es. Jetzt könnt ihr übrigens schön sehen, wie komisch Blocksatz bei manchen Schriften aussieht.
aside p {
text-align: justify;
font-size: 0.95em;
}
Der Absatz im rechten Bereich
... soll sich optisch noch mal vom linken abheben. Früher benötigte man dafür eine Klasse, heute reicht eine einfache Pseudoklasse aus.
aside:last-child p {
...
}
Erläuterung
Also, wir haben in unserem HTML-Dokument zwei <aside>
-Elemente. In diesem Fall wollen wir auf das zweite zugreifen und das ist bekanntlich das letzte.
Gäbe es noch mehr davon, müsste man mit nth-child
arbeiten. Aber dazu komme ich gleich.
Die Anweisungen
aside:last-child p {
color: #0ff;
background: #00f;
margin: 0 -5px -5px -5px;
border-top: 1px solid #c8c8c8;
border-radius: 0 0 5px 5px;
padding: 5px;
}
Erläuterung
margin: 0 -5px -5px -5px;
Ja wofür benötigen wir denn das jetzt? Na, eine Idee? Wenn nicht, so schaut euch mal die Anweisungen für aside
an. Seht ihr da ein padding
?
border-radius: 0 0 5px 5px;
Was jetzt kommt, ist ganz wichtig. Der border-radius
eines überordneten Elements (hier das <aside>
) hat keine Auswirkungen auf das
untergeordnete. Das spielt aber keine große Rolle, so lange Letzteres keine Hintergrundfarbe hat. Denn dann sieht man es. Kommentiert die Zeile ruhig aus.
Folglicherweise müssen daher die linke und rechtere untere Ecke abgerundet werden. Wir haben hier also das genaue Gegenteil von den <h3>
s.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt