Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Vertikale Navigation gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Positionierung des vertikalen Navigationsbereichs erfolgt durch die Anwendung der Float-Eigenschaft sowie der passenden Gestaltung des Inhaltsbereichs. Der anschließende Schritt besteht in der Anpassung der einzelnen Listenpunkte.

Transkript

Dieser Navigationsbereich soll nach links gefloatet werden und der Textbereich, der Inhaltsbereich soll rechts daneben stehen. Los geht es in Editor im Stylesheet navi-float-vertikal.css mit float left für den navibereich float:left und, dann bekommt der auch gleich eine Breite, damit das kalkulierbar bleibt und paddingt-left von 20px und padding-top, oben soll er auch ein bisschen Abstand haben von ebenfalls 20px. So, das ist so die Grundgestaltung, wenn ich jetzt rüber gehe, dann wird das hier neu geladen und Sie sehen von Navigationsspalte kann noch keine Rede sein. Hier ist der gefloatete Navibereich und der Inhaltsbereich fließt da natürlich drum rum, genau so wie man das von den Grafiken her gewoht ist. Um jetzt die Illusion einer Spalte zu bekommen, müssen Sie den Inhaltsbereich auch noch hier einmal gestalten und zwar bekommt der einen großen margin-left und zwar genau so groß wie das oben ist. Oben haben wir 110 und 20 sind 130 und die bekommt der jetzt als linken Außenabstand. So, einmal neu laden und Sie sehen, jetzt sieht hier schon ein bisschen mehr nach Spalte aus, wenn ich jetzt hier das untersuche im Seiteninspektor, dann sehen Sie hier den Navibereich. Das ist nicht wirklich eine Spalte, das sieht nur so aus und zwar weil main Inhaltsbereich einen Außenabstand hat. Das ist hier sehr schön zu sehen. Im Grunde genommen also eine Ilusion, wie alle mehrspaltigen Float-basierten Layouts, aber eine, die im Alltag ganz gut funktioniert. Soweit ist die Grundlage. Im nächsten Schritt wird die Navigationsliste gestaltet, die bekommt eine Breite ist, ich sag mal 6em, dann haben wir padding: 0, damit das nicht dazwischen funkt und border-top, sagen wir 1px solid und dann so noch so ein Rotton und margin auch auf 0, damit das nicht irgendwie dazwischen funkt genau, wie beim Padding. Speichern und immer zwischendurch mal gucken, damit man versteht, was da passiert. Sie sehen hier jetzt, dass die Liste oben eine Linie hat und unten darunter ist noch die ganz normale Liste ungestaltet darunter, deswegen geht es gleich weiter mit Navibereich; erstmal list-style-type:none, damit die Aufzählungspunkte weg sind, die brauchen wir beim besten Willen nicht border-left:1px solid #d90000 und border-bottom auch. So solid #d90000 und ganz zum Schluss noch wieder margin:0. Damit haben wir hier eine Grundgestaltung. Tippfehler sind nicht drin, list-style-type:none border left- border-bottom margin: 0, speichen und neu laden. So, noch nicht hübsch, aber es nähert sich schon einer Navigationsliste. Die Linien sind hier links von den Navigationslistenpunkten, den LI-Elementen und unteren Rahmlinien, auch die obere stammt von der Liste, das hat Vorteile, denn so wird keine der Rahmlinien gedoppelt, gerade die oben und unten, wenn man das anders aufteilen würde, dann hätte man sonst irgendwann doppelte Linien. Weiter geht es im Editor mit dem Navigationsbereich, da kommen die erstmal auf display block die ganzen Hyperlinks, die sollen keine Text-Decoration bekommen, text-decoration: none, color:black so, und background-color mal ein ganz leicht in Grauton, klein bisschen Padding drum rum, damit denn nicht so dicht aufeinanderhocken und border-left: 3px solid #eee so, das werden Sie gleich sehen. Hier im Browser, so sieht das aus, hier ist also ein bisschen Padding drum rum und hier sehen Sie ein bisschen Luft und schwarz und grauer Hintergrund. Links hier haben Sie eine unsichtbare, nicht besonders auffällige 3 Pixel breite Rahmenlinie, die in derselben Farbe ist, wie der Rest, das wird gleich deutlich werden, es geht nämlich weiter im Editor hier und als erstens haben wir a:hover und a:focus, auch die sollen die color black bekommen, so. Und dann sollen die weiß werden, background-color: white, border-left:color, ich ändere nur die Farbe der Rahmenlinie, also nicht border-left und alles nochmal schreiben, sondern einfach nur die Farbe und border-bottom soll die definitiv gar nicht bekommen. So, damit haben wir den, bei active im Moment des Klicks color black und background color #d9d9d9 grau, wenn alle drei Werte gleich sind. So jetzt fehlt eigentlich nur noch das Hervorgehobene, aber vorher schauen wir uns das kurz einmal an hier. So, da hat sich nichts geändert, aber jetzt kommt es. Wenn ich drüberfahre, wird die Rahmenlinie ausgetauscht, die Farbe der Rahmenlinie genau genommen, und die Hintergrundfarbe auf weiß gesetzt. So, das ist deutlich erkennbar und jetzt kommt hier für Sie-sind-hier noch einmal dasselbe color: black, background-color:white border-left color:grau #d90000 und border-bottom:none, man könnte das auch in einen Style schreiben, weil letztendlich wiederholt sich das hier, aber so getrennt kann man das einfacher gestalten später. Rüber im Browser, einmal neu laden und schon haben wir hier eine einfache, effektive, simple Navigation. Was noch fehlt hierbei sind zwei Kleinigkeiten. Zum einen müsste man hier die Überschrift etwas genauer ausrichten, wenn man das gerne möchte. Das könnte man hier zum Beispiel machen, weil es auch nur innerhalb dieser Bereiche gelten soll. Das ist eine h2 Überschrift und, dann sagen wir einfach Line-height: 1. Das zeige ich hier einmal, so, jetzt haut das oben genau hin und was viel wichtiger ist, in den Webseiten, drei Stück habe davon, so, da muss der Fussbereich gecleart werden und dazu bekommt der einfach die Klasse clearing, denn, wenn man das nicht macht, dann kann es unter ungünstigen Umständen passieren, dass der nicht unterhalb der gefloateten Elemente steht. So, da haben wir ihn und der dritte im Beispiel, den hatten wir schon, Galerie Fussbereich, da kommt der auch rein. Diese Klasse clearing steht geschrieben, zur Erinnerung, im Fundament, hier ist sie: clear both und das ist jetzt eine funktionierende Navigation und, wenn ich das noch einmal zeige hier Entwickler-Werkzeuge Bildschirmgrößen testen, dann haben wir hier die horizontale Navigation und auf breiten Bildschirm eine zweispaltige.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!