Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Hyperlinks gestalten

Testen Sie unsere 1920 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der nächste Schritt besteht in der Gestaltung sämtlicher Hyperlinks auf der Website sowie der Hervorhebung des aktuellen Navigationspunkts.

Transkript

Der Navigationsbereich hat bereits einen Farbverlauf und die Listenelemente sind gefloatet, der Navigationsbereich umschließt sie trotzdem, weil er mit overflow:hidden hier versehen wurde und deshalb die gefloateten Elemente umschließt. Jetzt fehlt noch die Gestaltung der Links hier in der Navigation. Und los geht es hier mit den ganz normalen Links, da werde ich einfach hier die Pseudoklassen link und navibereich a:visited dazu geben, damit man deutlich von a:hover, a:focus und a:active unterscheiden kann. So, color:black, schwarz dann sollen Sie geblockt werden, display:block und bekommen ein padding: oben7 px, 13Px unten 7px und 10 px, das kann man ausprobieren wie man das gerne haben möchte, text-decoration:none. So, und wie immer, wenn man einen Style fertig hat, speichern und gucken, das sieht schon sehr viel mehr nach Navigation aus. Als nächtes kommt jetzt der Style, um den aktuellen Navigationspunkt hervorzuheben. Den baue ich mal unten drunter, das ist navibereich und die Klasse heißt sie-sind-hier. So, und auch da soll es wieder ein klein Farbverlauf geben, aber zunächst einmal die Hintergrundfarbe background-color und der Name ffeda0, auch ein heller Gelbton, dann eine Zeile freilassen für den Farbverlauf der gleich kommt, color:black font-weight:normal, sage ich nochmal, damit da kein versehentlicher Fettdruck reinkommt und auch hier Text-decoration:none. So Sie sind hier, ist jetzt nach dem Speichern und neu laden hier schon erkennbar, aber hübscher ware es mit einem kleinen Farbverlauf und das geht wie immer mit background-image:linear-gradient und es soll auch to bottom gehen, also von oben nach unten, f7d337, soll bei 0% starten und aufhören sol les ganze bei fff2c1 100% und am Ende natürlich wieder ein Semikolon. Die sind alle da, gespeichert ist und neu laden. Hier ist ein Farbverlauf und jetzt kommen hier noch für die :hover und :focus und :active Klassen einige Styles, aber für den Moment ist das bereits hier eine funktionierende Navigation.

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!