Hauptmenü

Untermenü

HTML5 / CSS3 - Praxistutorial 1 - Das Ausklappmenü Teil 1

1. Die Abschnitte

2. Als Erstes

... kommentiert ihr jetzt mal das display: none; bei header nav ul div aus, denn es ist ziemlich blöde, bei jeder pisseligen Änderung das mit einem Hover zu testen. Kleiner Tipp am Rande, man muss deswegen nicht immer mit /* ... */arbeiten. Ich selber habe es mir angewöhnt, bei temporärem Auskommentieren einfach ein x davor zu schreiben (xdisplay: none;). Dann können die Browser das nicht interpretieren und die Wirkung ist dieselbe. Man spart sich auch ein wenig Tipparbeit und muss beim Reaktivieren nur einen Buchstaben entfernen.

3. Ein wenig hübsch machen

Zuerst bringen wir die Links in Ordnung. Dafür reicht folgende Anweisung aus.


header nav ul ul a {
  margin0;
  displayblock;
}

4. Die Sache mit den Links

Als ich die CSS-Anweisungen herunter gehackt habe, musste ich an dieser Stelle selbst erst einmal kurz nachdenken. Warum klappt das mit dem padding nach oben und unten eigentlich bei den Links im Hauptmenü? Das sind doch Inline-Elemente. Und ein display: block; oder float: left; fehlt auch. Dann fiel mir siedendheiß ein, dass ich den Hinweis auf dieses Verhalten noch an keiner Stelle erwähnt habe. Also hole ich das jetzt nach.

Des Rätsels Lösung

Also, ein padding greift auch bei Inline-Elementen, es hat nur keine Auswirkung auf vorherige und nachfolgende Elemente. Dazu habe ich aus Anschauungsgründen im Content-Bereich ein <span>Lorem</span> eingebaut. Verpasst dem jetzt mal folgende Anweisung.


div.content span {
  padding20px;
  background#ff0;
}

Dan seht ihr anhand des quietschgelben Hintergrunds, dass das padding sich auf das <span> auswirkt, aber sowohl das das vorherigen <h2> als auch der nachfolgende Text kümmern sich einen Dreck um die vertikalen Abstände und "rutschen" einfach hinein. Für die Blinden unter euch habe ich noch einen vergrößerten Screenshot angefertigt.

Padding bei Inline-Elementen

Jetzt wisst ihr auch, warum die Links im Hauptmenü auch so wunderbar passen. Weil wir keine weiteren Elemente darüber oder darunter haben. In den Ausklappmenüs dagegen gibt es die und deswegen benötigen wir dort ein display: block;.

5. Der Rest

Danach kümmern wir uns um die Listenelemente.


header nav ul ul li {
  margin0;
  padding3px;
  border-top1px solid #000;
}

Und da das erste Listenelement oben keinen Rahmen haben soll, machen wir den weg.


header nav ul ul li:first-child {
  border-topnone;
}

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt