Grundlagen der Webprogrammierung: Meine erste Website

Ein horizontales Menü andenken

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Alternativ zum seitlichen Menü kann auch ein horizontales Menü eingefügt werden. Hierbei gibt es gleich mehrere Möglichkeiten.
05:47

Transkript

Viele Webseiten haben eine horizontale Menüführung, und ich habe jetzt eigentlich mehrere Möglichkeiten, wo ich meine horizontale Menüleiste unterbringen könnte. Ich könnte sie hier unterhalb von meinem Header-Bereich einfügen. Ich könnte sie oberhalb von meinem Header-Bereich einfügen oder aber und dafür habe ich mich jetzt entschieden, ich könnte sie am oberen Bildschirmrand einfügen. Und dieses Einfügen am oberen Bildschirmrand möchte ich, möchte so haben, dass ich meine Menüleiste immer sehen kann, auch wenn ich mir Inhalt habe, sodass ich scrollen muss. Und wenn Sie hier genau schauen, habe ich auch bei der Navigation selbst etwas geändert, nämlich ich habe zwar meine Bezeichnung nav für meine Navigation, aber ich verwende keine Listenelement, sondern hier habe ich einfach die unterschiedlichen Anker-Elemente und das erzeugt jetzt zumindest meine horizontale Darstellungsweise, allerdings werde ich noch etwas Abstand zwischen meinen einzelnen Bereichen brauchen und ich hätte die Darstellung zusätzlich noch etwas zentriert. Na gut, das heißt wir müssen jetzt bei der CSS Rücksicht nehmen auf diese Anforderungen und diese Anforderungen betreffen zuallererst mal die gesamte Navigation. Das heißt meine ersten Regeln treffen auf die gesamte Navigation zu, und das alle Wesentlichste ist die Position. Ich sage position und klebe fixed. Damit sorge ich schon dafür, dass die Leiste auf jeden Fall fixiert ist. Was aber im Moment auf jeden Fall zur Folge habe, ist, wenn ich fixed verwende, meine Navigation rutscht aus diesen klassischen Abfolgen der einzelnen Elemente heraus. Und was ich jetzt also noch zusätzlich brauche, ist noch eine genaue Positionierung, damit hier alles einigermaßen deutlich bleibt. Das heißt, ich will, dass meine Navigation immer ganz oben zu liegen kommt und zwar ganz oben am Bildschirm und immer ganz links. vom Bildschirm. Das erreiche ich, indem ich top und left auf Null setze und auch right auf Null setze. Damit hat meine Navigation den ganzen Bildschirmraum quasi zur Verfügung. Dann gibt es ein Geheimnis, das nennt sich z-index. Der Z-Index ist ein Wert, der es unterschiedlichen Elementen ermöglicht, überlappend dargestellt zu werden. Und mein Z-Index setze ich mal mit dem Wert 50 an, damit liegt er leicht drüber. Den Text möchte ich zentriert haben, das heißt, ich sage text-align:center. Damit Sie einen Unterschied sehen, mache ich jetzt noch eine Hintergrundfarbe. Das heißt, ich sage background-colour und fürs Erste wähle ich dafür Schwarz. Das heißt aber auch, dass meine Schrift eine andere Farbe braucht. Das muss sich aber mit dem Anker-Element klären. Es heißt die Schriftfarbe löse ich über nav und dem Anker-Element von nav, und da kann ich sagen, dass meine Farbe wieder aliceblue wird. Das hat sich ganz gut bewährt. Und dann werde ich noch etwas für Abstand zwischen den einzelnen Elementen sorgen, indem ich ihnen ein Padding mitgebe. Und zwar welches Padding? 1em wählen. Das heißt ich habe jetzt überall dann etwas Abstand, was zwischen den einzelnen Elementen insgesamt zu 2em Abstand führen wird, und auch nach oben und unten bekomme ich etwas mehr Luft. Gut, ich speichere mein bisheriges Tun und wenn ich jetzt meine Anzeige erneuere, sehen Sie, dass sich hierum Einiges verändert hat. Nehme ich, ich habe jetzt hier, genau an der obersten Stelle einen schwarzen Balken mit meinen Überschriften, im Moment auch noch mit dem Unterstrich, den werde ich auch noch schnell wegnehmen. Nehme ich text-decoration none, sollte zum gewünschten Ergebnis führen. So, genau! So ist es jetzt! Und wenn ich mit der Seite hin- und herscrolle, erreiche ich zudem noch, dass meine Navigation oben erhalten bleibt. Was ich jetzt noch tun könnte, einfach damit es ein hübsches Bild gibt. Ich werde versuchen, dass sich beim Wrapper nach oben und unten noch um etwas Luft bemüht bin. Das heißt, wenn ich hier schon insgesamt eventuell 2em habe, dann sage ich, dass ich vielleicht 2.5em-margin für meinen Wrapper im oberen und unteren Bereich haben möchte. Ich lasse mir meine Ansicht erneuern und habe jetzt eben eine horizontale Navigation, die sich immer über den ganzen Bildschirm erstreckt, egal wie groß oder klein jetzt mein Bildschirm tatsächlich ist.

Grundlagen der Webprogrammierung: Meine erste Website

Gestalten Sie in wenigen Stunden Ihre erste Website und lassen Sie sich dabei von der Idee über die Auswahl der Werkzeuge bis zur Veröffentlichung Ihrer Web-Präsenz begleiten.

2 Std. 53 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.05.2017

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!