HTML5 / CSS3 - Praxistutorial 1 - Die Inhalte
1. Die Abschnitte
- Überblick
- Die Basisdefinitionen
- Die Hauptnavigation
- Die Infobereiche
- Die Inhalte
- Der Footer
- Das Ausklappmenü Teil 1
- Das Ausklappmenü Teil 2
2. Zeit zum Aufräumen
Bis jetzt sieht das alles noch ziemlich unordentlich aus, weil die beiden Infobereiche nicht parallel zum Inhalt stehen. Ist ja auch kein Wunder, da haben wir noch nichts gemacht. Aber das habe ich aber mit Absicht getan, denn wenn man richtig gut mit CSS umgehen kann, so stören solche Dinge nicht besonders. Wohlan, jetzt wird Ordnung geschaffen.
div.content {
width: 470px;
float: left;
margin: 0 10px 20px 10px;
}
Wenn ihr genau hinschaut, so werdet ihr sehen, dass der rechte Infobereich um einen Pixel über die Hauptnavigation herausragt. Fragt mich bitte nicht, woher das kommt, denn rein rechnerisch müsste alles passen. Allerdings habe ich ehrlich gesagt keine große Lust gehabt, nach den Ursachen zu forschen. Wer die Lösung dafür kennt, schicke mir doch bitte eine Mail.
3. Standardanweisungen
Also dazu sage ich nichts mehr. Das solltet ihr drauf haben.
div.content p {
margin-bottom: 10px;
}
div.content ul {
list-style: disc;
}
div.content li {
margin-left: 10px;
}
4. Die Überschriften
h1, h2 {
color: #00f;
margin-bottom: 10px;
text-shadow:2px 2px 1px #0049ff,
4px 4px 1px #0078ff,
6px 6px 1px #00beff,
8px 8px 1px #0ff;
}
Auch das ist nichts Besonderes. Beim Textschatten erfolgt vier Mal alle zwei Pixel ein Farbwechsel. Darum auch das Schema [2px] [4px] [6px] [8px]
.
Schaurig. Es ist, ist es nicht?
5. Und jetzt wird es krude
An dieser Stelle zeige ich euch, was man für Dinge mit Kontext-Selektoren machen kann. Aber obacht! Die folgenden Beispiele dienen zu Lehrzwecken und werden euch bei realen Umsetzungen mit ziemlicher Sicherheit große Probleme bereiten. Besonders wenn sich die Struktur eines HTML-Dokuments ändert.
6. Direkter Nachbar-Selektor
div.content p + ul {
border: 1px solid #dadada;
border-radius: 20px;
padding: 20px;
margin-bottom: 10px;
}
Erläuterung
Obiger Code wirkt sich also nur auf die Elemente aus ... wer weiß es, wer weiß es? Auf die ungeordneten Listen, die unmittelbar(!) auf einen Absatz folgen.
In unserem Fall wird also nur das erste <ul>
entsprechend formatiert.
7. Kind-Selektor
div.content > ul > li:nth-child(2n),
div.content ul > li > ul > li:nth-child(3n+2) {
color: #00f;
}
Erläuterung
Das ist noch ein wenig verrückter, darum zerlegen wir die beiden Selektoren in ihre Einzelteile, damit ihr das besser versteht.
div.content > ul > li:nth-child(2n)
Hier passiert Folgendes. Man nehme alle <ul>
s, die direkt(!) unterhalb des <div class="content">
liegen
(div.content > ul
). Das bedeutet auch, dass weiteres <ul>
s innerhalb einer verschachtelten Liste hier ignoriert werden.
Danach greifen wir auf alle <li>
s zu, die direkt unter obigen <ul>
s liegen (ul > li
). Und von denen gilt
die Anweisung dann nur für jedes zweite Element (li:nth-child(2n)
). Letztendlich dreht sich hier alles nur um Listenelemente der ersten Ebene.
div.content ul > li > ul > li:nth-child(3n+2)
Hier geht es zunächst nur(!) um Listen der zweiten Ebene (div.content ul > li > ul
). Von denen kommen aber nur (genau wie oben) diejenigen in
Frage, die sich nicht auf einer möglichen weiteren Ebene befinden (ul > li > ul > li
). Und dann nehmen wir nur jedes dritte Listenelement, angefangen
bei Position 2 (li:nth-child(3n+2)
).
8. Indirekter Nachbar-Selektor
div.content h1 ~ ul ul {
border-top: 1px solid #00f;
border-bottom: 1px solid #00f;
margin: 5px 0;
padding: 5px 0;
}
Erläuterung
Auch das ist etwas kompliziert. Zunächst mal muss das <div class="content">
über Überschriften der ersten Ordnung verfügen
(div.content h1
). Dabei spielt es überhaupt keine Rolle, auf welcher Ebene Letztere liegen. Die müssen einfach nur da sein.
Dann muss es ungeordnete Listen geben, die sich auf derselben Ebene befinden wie die Überschrift (h1 ~ ul
). Und diese Listen dürfen weitere beliebig
viele Unterleisten beinhalten (ul ul
).
9. Ein Tipp
Wer jetzt dreinschaut wie Homer Simpson, wenn der mal denken muss, sollte einfach mit den Listen herumspielen. Weitere Ebenen einfügen, zusätzliche CSS-Anweisungen anlegen und so weiter und so fort. Kurz gesagt, spielt wirklich mal intensiv damit herum, dann werdet ihr das Prinzip schnell begreifen.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt