HTML5 / CSS3 - Praxistutorial 1 - Das Ausklappmenü Teil 1
1. Die Abschnitte
- Überblick
- Die Basisdefinitionen
- Die Hauptnavigation
- Die Infobereiche
- Die Inhalte
- Der Footer
- Das Ausklappmenü Teil 1
- Das Ausklappmenü Teil 2
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 {
margin: 0;
display: block;
}
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 {
padding: 20px;
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.
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 {
margin: 0;
padding: 3px;
border-top: 1px solid #000;
}
Und da das erste Listenelement oben keinen Rahmen haben soll, machen wir den weg.
header nav ul ul li:first-child {
border-top: none;
}
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt