Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Aktiven Zustand hervorheben

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die abschließenden Anpassungen an dem Navigationsbereich dienen dazu, die einzelnen Listenelemente im aktiven Zustand hervorzuheben.

Transkript

Die Float-basierte Navigation ist schon fast fertig, sie funktioniert auf jeden Fall schon und hat hier einen Farbverlauf im Navibereich und auch bei der hervorgehobenen Seite. Im Seiteninspektor sieht das Ganze ungefähr so aus, hier ist der Navibereich, der umschließt die gefloateten Listenelemente und wenn ich den Farbverlauf austelle, ist hier eine deutlich unterschiedliche Farbe zum Kopfbereich. Die Listenelemente selbst sind gefloatet und die Hyperlinks innerhalb der Listenelemente übernehmen den Großteil der Gestaltung. Auch wenn ich hier den Farbverlauf ausstelle, weil ältere Browser wie EE8 können das nicht, kann man hier sehen, dann ist das nicht mehr so hübsch, aber es ist immer noch deutlich, das heißt, die Funktion ist nach wie vor gewährleistet. Einmal neu laden, das ist der Ausgangspunkt, es fehlt jetzt noch ein bisschen Feinarbeit beim hovern für focus, wenn man mit der Tabulatortaste durchtapt hier, dann sollte man erkennen können wo man ist und im Moment des Klicks, das ist dunkelrot mit schwarzer Schrift, das soll dann ein bisschen anders gestaltet werden, das kommt jetzt im Editor. Los geht es hier mit den Hoover- und Focusstyle, background-color und da nehmen wir f3c600, das ist der Gelbton aus dem Kopfbereich, eine Zeile frei für den Farbverlauf, border-bottom:none, nur sicherhaltshalber, fals da irgendwo was definiert ist, color:black; und text-decoration soll auf underline gesetzt werden, das heißt also, wenn hier die die Maus drrüberschwebt oder der Tab die Navigation hervorhebt, dann soll der unterstrichen werden. Speichern, gucken gehen und sagen OK, das ist schon besser als nichts aber hier soll jetzt auch ein Farbverlauf rein, und zwar möchte ich genau den selben Farbverlauf nehmen wie für das sie-sind-hier. Da baue ich denn hier mal ein, ich habe Ihn einfach rüberkopiert und speichern und neu laden und Sie sehen, das sieht hier schon ganz brauchbar aus. So, das ist gegeben, jetzt fehlt nur noch die Klasse active und dort soll das Rot bleiben, aber die Schrift soll weiß werden. Also background-color machen wir rot, genau so wie es war, das war b80000 und color soll auf white gesetzt werden, damit man das deutlicher erkennen kann. Gespeichert, neu laden und im Moment des Klicks ist das Rot nicht vorhanden. Background-color:b80000, dann nehmen wir hier, machen wir die Kurzschreibweise, dann überschreiben wir alles andere und laden das neu und da ist die Farbe. Und die soll einen dunklen Hintergrund bekommen, das dunkle Rot, background:b80000 war das und weiße Schriftfarbe, das kann man dann besser lesen, a:active, background:b80000 und color:white. Gespeichert und neu laden und im Moment des Klicks rot auf weiß, wie gesagt, Sie können gerne andere Farben wählen, aber diese Navigation ist Float-basiert mit einem CSS 3 Farbverlauf versehen und funktioniert. Wunderbar auch für spätere ausbauten mit zweiter Navigationsebene und Jobdowns und vielem anderen mehr.

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!