HTML5 für Webdesigner

Beispiel-Skizze, Teil 6: Navigationsbereiche per CSS gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Zum Abschluss der Skizze werden die beiden Navigationen im Kopfbereich positioniert und gestaltet.

Transkript

Die Übungsseite ist noch nicht fertig, aber auf dem Weg dorthin. Was noch fehlt, ist die Gestaltung der Navigationsbereiche. Hier im Stylesheet sind die Layout-Bereiche soweit vorbereitet. Hier kommen gleich die Navigationsbereiche. Im Browser sieht es im Moment so aus wie hier. Was noch fehlt, ist die Gestaltung der beiden Navigationsbereiche, die hier fast aussehen wie einer. Und das kommt jetzt in diesem Film. Also, zurück in den Editor. Dort kommt als erstes die "Site-Navigation" dran. Das geht mit zwei einfachen Styles. Der Rest ist ja soweit vorbereitet. Wir hatten die ID "Sitenav" vergeben - hier ist sie - und das machen wir uns hier zunutze. In dieser Navigation - auch das schauen wir uns noch an -  gibt es ja zwei Listen, die haben aber keinerlei Klassen oder sonst irgendwas. Also benutze ich moderne Selektoren, um die auszuwählen. "First-of-type", also die erste Liste, die innerhalb des Eltern-Elementes auftaucht, und die soll "Color" "white" haben - "display inline-block", damit die Listen-Elemente nebeneinander stehen. Das versteht sogar der Internet Explorer 8. Ein bisschen Abstand nach rechts von 16 Pixel, das ist hier 1 rem. Und ein ganz bisschen Abstand nach unten: 0,5 - das entspricht in etwa 8 Pixeln, ist aber ein bisschen flexibler. Das ist der erste Style. Wir gehen rüber in den Firefox und gucken, was damit bewirkt wird. Da ist die Navigation. Das Einloggen soll jetzt als Button hier nach rechts außen. Das ist das zweite. Und danach kommt dann noch die Meta-Navigation, hier nach oben. Jetzt kommt also der zweite Style hierfür, das ist wieder "Nav", "Sitenav". Und diesmal ist das UL "Last-of-type", also die letzte ungeordnete Liste. Die wird verschoben durch das "Position absolute". "Right 0" und hier ein bisschen Platz machen - "Right 0" und "Bottom 0". Dadurch wird das innerhalb des Nav-Elementes verschoben. Die "Textfarbe" soll "schwarz" sein, denn der Hintergrund soll ja ein bisschen aussehen wie so ein Button. Das wird so ein helles Grau. "Padding" soll er bekommen - 0.5 rem - sieht wahrscheinlich ganz gut aus, und "Border radius" - so ein paar abgerundete Ecken von 0.25. Das sind dann etwa 4 Pixel und "Keinen Margin", sicherheitshalber. Einmal speichern, rüber in den Browser und schauen, wie es aussieht. Das ist für eine Skizze völlig ausreichend. Unser Haupt-Navigationsbereich steht hier einigermaßen. Das sieht gut aus, und jetzt kommt der nach oben. Dazu kommt hier die Meta-Navigation. Da geht es los mit "nav#metanav". D.h., der gesamte Container, das gesamte Element wird absolut positioniert, und zwar auch nach "right ganz außen" und "oben ganz außen". "Padding right" bekommt hier 2 rem und noch ein bisschen Abstand. Dann erneut: "nav#metanav" - dieses Mal die Listen-Elemente, auch die sollen per "Display inline-block" nebeneinander gestellt werden, Schriftart etwas kleiner, 0.75 - das sind etwa 12 Pixel. Die Schriftfarbe soll etwas dunkler sein als Weiß und ein kleines bisschen Abstand zwischen den einzelnen Listen-Elementen. Gespeichert ist es: Das geht in die richtige Richtung. Dort sind die drei Punkte. Das Einzige, was jetzt noch fehlt, sind die Grafiken vor "International" und "Warenkorb." Die habe ich von der Site bereits kopiert. Auch hier machen wir uns, da wir keine Klassen vergeben haben, first-of-type zunutze. Also das allererste Listen-Element in dem umgebenden Element, "Background URL" liegt im Ordner Grafiken und heißt "International.png". Das soll links anfangen, "No repeat". Dann haben wir, glaube ich, alles.  Damit da Platz ist für die Grafik, soll 1 rem daneben liegen. Da ich ein bisschen tippfaul bin, kopiere ich das, mache hiervon "last-of-type". "Background greifen", das ist der Warenkorb. "Icon cart", das ist ein GIF. "Left 0" - "No repeat" bleiben. Das "Padding" von 1 ram auch. Ich zeige nochmal die Grafiken: "Icon cart" liegt hier - 13 x 12, 1 rem Platz dafür ist 16 Pixel, und das ist 13 x 13 - "International.png". Dann haben wir auch alle vier Grafiken verwendet. Eben gucken, ob ich alles richtig getippt habe. Dort sind die Grafiken, davor. Hier fehlt jetzt eigentlich nur noch das Suchfeld. Da wir Formulare noch nicht kennen, bleibt das erstmal soweit stehen.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 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!