Hauptmenü

Untermenü

HTML5 / CSS3 - Praxistutorial 1 - Die Inhalte

1. Die Abschnitte

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 {
  width470px;
  floatleft;
  margin0 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-bottom10px;
}

div.content ul {
  list-styledisc;
}
  
div.content li {    
  margin-left10px;
}

4. Die Überschriften


h1h2 {
  color#00f;
  margin-bottom10px;
  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 {
  border1px solid #dadada;
  border-radius20px;    
  padding20px;
  margin-bottom10px;
}

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-top1px solid #00f;
  border-bottom1px solid #00f;
  margin5px 0;
  padding5px 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