Hauptmenü

Untermenü

HTML5 / CSS3 - Praxistutorial 1 - Die Infobereiche

1. Die Abschnitte

2. Alles nach unten

nachdem unsere Navigation jetzt richtig "hübsch" ist, muss zuerst mal der Rest ein wenig nach unten.


div.main {
  margin-top20px;
}

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 {
  width180px;
  floatleft;
  margin10px;
  padding5px;
  color#000;
  border-radius:5px;
  box-shadow0 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);
  backgroundlinear-gradient(#0ff, #00f);  
  filterprogid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#0000ff);
  border-radius5px 5px 0 0;
  color#fff;
  padding3px;
  font-weightnormal;
  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-alignjustify;
  font-size0.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-5px -5px -5px;
  border-top1px solid #c8c8c8;
  border-radius0 0 5px 5px;
  padding5px;
}

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