Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Navigationsbereich gestalten

29,95
Die grundsätzliche Gestaltung des Navigationsbereichs sowie der darin enthaltenen Listenelemente erfolgt im CSS-Quellcode. Dabei fügt der Trainer dem Bereich einen Farbverlauf hinzu.

Diese Navigation hier die noch völlig ungestaltet ist soll in diesem Schritt verwandelt werden in eine Float-basierte Navigation. Dazu wird als erstes der Navigationsbereich selbst und die darin vorhandene Liste gestaltet. Da die Listenelemente gefloatet werden sollen, wird der navibereich als erstes mit einem overflow:hidden versehen, Containing Floats damit er die gefloateten Elemente weiterhin umschließt. Er bekommt eine Hintergrundfarbe, Ich nehme hier mal fee05a, eine helles gelb und bekommt gleich einen Hintergrundfarbverlauf. Ich schreibe hier mal hin background-color, so, explizit, weil background ist ja eine Kurzschreibweise, lasse eine Zeile frei und gebe hier schon mal padding:0 und ein leichtes linkes Padding ein, dass sollen mal 20px sein, damit das bündig beginnt und der margin soll auch 0 sein, so, damit haben wir das schon mal erledigt und gespeichert ist. Im Browser sieht es jetzt so aus, noch nicht so wahnsinnig hübsch, aber die 20px links das fängt dann gleich hier an, wenn die Liste weg ist, das ist die Hintergrundfarbe und weiter gehts. Die Liste selbst wird nicht sonderlich gestaltet, da kommt das fast standardmäßig vorhandene padding:0, margin:0 hin damit nicht ausversehen irgendwelche inneren oder äußeren Abstände dazwischenfunken. So, und jetzt wird es interessant, bei der Gestaltung der Listenelemente. Da gibt es nämlich als erstes ein float:left, width setzte ich explizit auf auto, weil ich will nicht, dass die feste Breiten haben. So, kleiner Zwischenstand hier, so sieht das bis jetzt aus und da sehen Sie schon, da müssen noch die Listenpunkte entfernt werden, list-style:none, dann möchte ich die Zeilenhöhe hier explizit auf 1 setzen und das padding und margin nicht dem Zufall überlassen. So, und hier haben Sie die Ausgangsposition. Der Rest der Gestaltung erfolgt in den Hyperlink, in den Links selbst. Hier ist also einmal im Überblick, jetzt fehlt hier gleich nur noch der Farbverlauf, aber bis jetzt haben Sie hier schon die Grundgestaltung des Navigationsbereich und der Liste. So, jetzt zu dem Farbverlauf. CSS Farbverläufe werden mit der Eigenschaft background-image eingebunden. So, background-image und da kommt jetzt kein Bild rein, sondern ein einfacher Farbverlauf, ein linearer Farbverlauf und die Eigenschaft heißt linear-gradient. So, linear-gradient, da gibt man als erstes ein in welche Richtung der Farbverlauf fliesen soll und da gibt es verschiedene Schlüsselworte. Hier zum Beispiel to bottom, das heißt, also von oben nach unten. Dann kommt die Farbe und das soll sein fee05a, falls Ihnen das bekannt vorkommt, das ist oben, die auch hier genommen wird für die Hintergrundfarbe und der soll bei 0% anfangen, also ganz oben. Danach kommt die zweite Farbe, nämlich die Farbe mit der der Farbverlauf enden soll, F4c600. das müssen Sie nicht genau so übernehmen hier mit dem Farbe, Sie können natürlich und sollten auch mit eigenen Farbwerten experimentieren. So noch einmal im Überblick. Da hinten fällt natürlich noch ein Semikolon. CSS3 Farbverläufe werden mit background-image eingebunden und heißen linear-gradient to bottom, 0% heißt oben, 100% heißt unten, in diesem Falle und hier ist es im Browser, beachten Sie den Navigationsbereich und hier ist leicht erkennbar ein Farbverlauf jetzt. Der Navigationsbereich ist soweit vorbereitet mit einem Farbverlauf, mit der Gestaltung der Liste und der gefloateten Listenelemente und wegen des overflow:hiddens sind hier die Listenelemente, die ja gefloatet sind immer noch im Navigationsbereich enthalten. Die sind gefloatet und der navibereich, wenn ich jetzt das overflow:hidden wegnehme, dann sehen Sie, dann ist er nicht da. Containing Floats wird beim layouten sehr sehr wichtig. Man könnte hier statt overflow:hidden natürlich auch eine der zahlreichen anderen Techniken zum Umschließen von Floats benutzen, aber da der Navigationsbereich keine feste Höhe hat und hier auch keine box-shadows in der nähe sind, spricht nichts gegen den Einsatz von overflow:hidden. Der Vorteil ist, es ist kein clear notwendig und es ist schön einfach einzusetzen.

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!