Lektion 8 - Horizontale Navigation

Antworten
Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 8 - Horizontale Navigation

Beitrag von Admin » Di 19. Aug 2014, 11:28

:css: Horizontale Navigation mit Textliste

Übungsdateien

Bislang hast du mit einer Navigation gearbeitet, die vertikal in deinem Template angeordnet war. Aber sehr häufig wird auch eine Navigation horizontal, direkt unter dem Header oder über dem Footer angelegt.

Bild

Der Aufbau deiner Seite bleibt gleich. Nur die CSS ändert sich ein wenig.
Du erstellst wie gewohnt deine 5 Div
  • #seite
    #kopf
    #menue
    #inhalt
    #footer
Beginne wie gewohnt mit der

#kopf
  • Höhe - Stelle im #kopf wie gewohnt die Höhe ein.
#menue
  • Höhe - auch die Menüleiste bekommt eine Höhe. z.B. 40px
#menue ul
  • Abstände links - stelle alle Abstände auf 0px und entferne die Listenpunkte.
#menue li
  • Puffer - links: Ordnet die Listenpunkte nebeneinander an.
    Höhe - übernimm die Höhe der Listenpunkte aus dem #menue
    Breite - möchtest du gleich große Buttons, dann stelle eine feste Breite ein. Du kannst auch einen gleichmäßigen Außenabstand links- und rechts einrichten. In dem Fall darf auch eine Listenbezeichnung mal länger sein.
#menue a
  • Höhe - aus #menu li übernehmen.
    Anzeige - block - um die ganze Fläche anklickbar zu machen.
    Textformatierungen nach deinem Geschmack
    Zeilenhöhe - übernimm die Höhe der Leiste um die Schrift vertikal zentriert auszurichten.
#menue a:hover
  • Ändere die Schrift um einen Hover-Effekt zu bekommen. Achte darauf, dass die Liste nicht zappelt. Vermeide eine Änderung des Schriftschnittes.
#inhalt
  • Aufheben - Stelle Aufheben auf links um den normalen Textfluss für den Inhalt wieder herzustellen.
    Innenabstände - damit der Text nicht so am Rand klebt, fügst du einen Innenabstand hinzu.
body
  • Schriftenfamilie, Schriftgröße - lege im body eine generelle Schriftart und Schriftgröße (in px) fest, die sich dann automatisch auf alle anderen Elemente übertragen wird.
    Hintergrund - Stelle eine ansprechende Farbe oder Muster als Hintergrund ein.
Lösung: Beispiel 1

Horizontal mit Buttons

Bild

So wie du eine Vertikale Navigation mit Buttons hinterlegen kannst, geht das auch entsprechend bei einer horizontalen Navigation. Mit einzelnen Buttons:

Arbeitest du mit Grafiken, musst du dich immer an den Größen der Grafiken orientieren.

#seite
  • Breite - hast du Buttons in einer bestimmten Breite, kannst du nicht unendlich viele Buttons nebeneinandersetzen. Meine Liste besteht aus 6 Links, also 6 Buttons zu je 150px = 900px für die Gesamtbreite. Denke daran, dass nicht jeder Mensch, der im Internet surft, einen 21" Monitor besitzt und viele noch mit einem 17" Monitor also max. 1024px in der Breite angezeigt bekommen.

    Ausrichtung - über Außenabstand link und rechts Auto stellst du die Seite zentriert dar, sodass auch Besucher mit einem breiteren Monitor eine angenehme Darstellung bekommen.
#kopf
  • Höhe - gebe dem #kopf eine ausreichende Höhe, sodass deine Überschrift gut hineinpasst.
#menue
  • Höhe - Gebe dem Navigationsmenü die halbe Höhe der Hintergrundgrafik an.
#menue ul
  • Listenpunkte - entferne die Listenpunkte.
    Außen- und Innenabstände - setze alle Abstände auf 0px.
#menue li
  • Höhe, Breite - übernimm die Höhe und Breite der Listenpunkte aus der Höhe und Breite deines Buttons
    Puffer - Puffer: links, sodass die Listenpunkte nebeneinander angezeigt werden.
#menue a
  • Höhe, Breite - übernimm die Größe aus dem Listenpunkt
    Hintergrund - als Hintergrundgrafik verwendest du einen Doppelbutton, der den Zustand a und a:hover darstellt.
    Bild
Füge ihn als Hintergrundgrafik ein. Grafikposition links-oben, keine Wiederholung.
Anzeige - block sodass der gesamte Bereich anklickbar wird.
Schrifteffekte - Richte die Schrift auf den Buttons zentriert aus, stelle die Zeilenhöhe auf die Höhe der Buttons ein, sodass die Schrift sich vertikal auf den Buttons ausrichtet.

#menue a:hover
  • Hintergrundgrafik - verwende die gleiche Hintergrundgrafik wie bei #menue a und stelle die Position auf links - unten, keine Wiederholung.
    Schriftformatierung - ändere eventuell noch die Schriftfarbe oder den Schriftschnitt um den Hover-Effekt nicht nur auf den Hintergrund zu konzentrieren, sondern auch auf die Schrift.
#inhalt
  • Aufheben - links um den normalen Elementenfluss wieder herzustellen.
#footer
  • Höhe - je nachdem wie hoch du deinen Seitenabschluss magst.
body
  • Schriftenfamilie und Größe - Stelle eine Schriftenfamilie und eine Standardgröße ein, die für die gesamte Seite gültig sein soll.
    Hintergrund - füge eine passende Hintergrundfarbe oder Hintergrundmuster ein.
Lösung: Beispiel 2

Horizontal mit wiederholende Hintergrundgrafik

Eine Navigation mit Buttons, die eine feste Breite haben, machen deine Navigation sehr starr und schränken dich sehr in der Anzahl der Links ein.

Bild

#seite
  • Breite - die Breite der Seite kannst du nun dynamisch angeben.
    Ausrichtung - über Außenabstand link und rechts Auto kannst du deine Seite ausrichten.
#kopf
  • Höhe - gebe dem #kopf eine ausreichende Höhe, sodass deine Überschrift gut hineinpasst.
#menue
  • Höhe - gebe dem Navigationsmenü die halbe Höhe deiner Grafik (30px).
    Hintergrundgrafik - Deine Grafik soll sich wiederholen. Deshalb musst du die gesamte Menüleiste damit hinterlegen. Wähle als Hintergrundgrafik deine Grafik aus. navi.png
    Bild

    Stelle die Bildposition auf oben links und lass sich die Grafik horizontal wiederholen.
#menue ul
  • Listenpunkte - entferne die Listenpunkte.
    Außen- und Innenabstände - setze alle Abstände auf 0px
#menue li
  • Höhe - stelle die Höhe auf die halbe Höhe der Grafik ein.
    Puffer - Puffer: links, sodass die Listenpunkte nebeneinander angezeigt werden.
#menue a
  • Höhe - übernimm die Größe aus dem Listenpunkt
    Anzeige - block, sodass der gesamte Bereich anklickbar wird.
    Ausrichtung - die Breite der Links soll variieren, verwende einen Innenabstand zu beiden Seiten von 20px.
    Schrifteffekte - Stelle die Zeilenhöhe auf die Höhe der Buttons ein, sodass die Schrift sich vertikal auf den Buttons ausrichtet.
#menue a:hover
  • Hintergrundgrafik - verwende die gleiche Hintergrundgrafik wie bei #menue und stelle die Position auf links - unten, horizontale Wiederholung.
    Schriftformatierung - ändere eventuell noch die Schriftfarbe oder den Schriftschnitt um den Hover-Effekt nicht nur auf den Hintergrund zu konzentrieren, sondern auch auf die Schrift.
#inhalt
  • Aufheben - links um den normalen Elementenfluss wieder herzustellen.
#footer
  • Höhe - je nachdem wie hoch du deinen Seitenabschluss magst.
body
  • Schriftenfamilie und Größe - Stelle eine Schriftenfamilie und eine Standardgröße ein, die für die gesamte Seite gültig sein soll.
    Hintergrund - füge eine passende Hintergrundfarbe oder Hintergrundmuster ein.
Lösung: Beispiel 3


Grafische Navigation mit Seitenköpfen

Für eine Navigation mit seitlich abschließend Grafiken müssen wir wieder an den Aufbau einer Linkliste denken.

Wo muss nun welche Grafik hinein?

Bild

Diese Form benötigt wieder eine feste Breite, da du deine Grafiken an den Enden platzieren musst.

Also fangen wir wieder an:

#seite
Breite - setze die Breite der Seite auf 900px.

#kopf
der Kopf bekommt wie immer eine ausreichende Höhe.

#menue
  • Höhe - übernimm die Höhe der Grafik, in meinem Beispiel also 80px.
    Hintergrundgrafik - Lade die links.png als Hintergrund ohne Wiederholung. Bildposition: links oben
    Innenabstand-links - hier sollte der Innenabstand in der Breite der Grafik angegeben werden, sodass sie nicht vom ul verdeckt wird. In meinem Beispiel also 80px.
    Breite - da du mit einem Innenabstand rechnest, musst du diesen von der Gesamtbreite abziehen, also 820px.
#menue ul
  • Listenpunkte - ausschalten.
    Innen- und Außenabstände - Abstände auf 0px setzen.
    Hintergrundgrafik - lege die Grafik rechts.png als Hintergrundgrafik an. Position oben rechts, keine Wiederholung
    Bild
#menue li
  • Größe - Stelle die Höhe auf die Höhe der Grafik ein. Die Breite muss ebenfalls in px eingegeben werden. Je nachdem wie viele Links du eingefügt hast, müssen sie die gesamte Restbreite der Liste ausfüllen.
    Hintergrundgrafik - Lade das Bild mitte.png also Hintergrundgrafik. Wiederholung horizontal, oben ausgerichtet.
    Bild

#menue a
  • Schrifteffekt und Farbe - Stelle die Schriftfarbe und deine Schrifteffekte für die Navigation hier ein.
#menue a:hover
  • Schrifteffekte und Farbe - Stelle die Schriftformatierung für den Hover-Zustand ein. Achte darauf, dass deine Navigation nicht zappelt.
#inhalt
  • Aufheben - links, sodass der normale Elementenfluss wieder hergestellt wird.
#footer
  • Höhe - gebe dem Footer eine Höhe
.

Fertig ist dein neues Layout mit Endgrafiken

Lösung: Beispiel 4
Dynamische Navigation mit Endgrafiken

Um eine dynamische Navigation zu erzeugen, müssen wir ein bisschen in die Trickkiste greifen.

Du benötigst zuerst einen weiteren Leisteneintrag, der allerdings keinen Link besitzen darf und einen <em> um den Text.

Code: Alles auswählen

<div id="navi">
    <ul>
        <li><a href="#"><em>Start</em></a></li>
        <li><a href="#"><em>Hobby</em></a></li>
        <li><a href="#"><em>Galerie</em></a></li>
        <li><a href="#"><em>Infothek</em></a></li>
        <li><a href="#"><em>Feedback</em></a></li>
        <li><em>Ende</em</li>
    </ul>
</div>
Füge eine weitere Klasse hinzu, nenne sie .ende Weise dem letzten Listenpunkt diese Klasse zu. Lege noch eine weitere Klasse fest em.
Bild

Fangen wir an zu formatieren:
#seite
  • Die Seite hat keine feste Breite. Sie soll ja dynamisch sein, als gib eine prozentuale Breite ein.
#kopf
  • Wie auch in den vorherigen Beispielen.
#menue
  • Höhe - lege die Höhe an, 80px in meinem Beispiel
    Hintergrundfarbe - füge für die Navigation eine Hintergrundfarbe ein, die zu deinen Grafiken passen. Ich habe hier ein Gelb #FFC000 verwendet.
#menue ul
  • Höhe - gib auch hier die Höhe an
    Hintergrundgrafik - füge die Grafik links1.png als Hintergrundgrafik ein. Position links oben, keine Wiederholung
    Bild
    Listenpunkte - schalte die Listenpunkte aus.
    Abstände - Stelle alle Abstände auf 0. Nur den Innenabstand links stellst du auf die Breite der Grafik ein (42px).
#menue li
  • Puffer - links, sonst keine weiteren Angaben
#menue a
  • Höhe - Stelle die Höhe auf 80px
    Anzeige - block
    Hintergrundgrafik - verwende die Hintergrundgrafik mitte1.png, horizontale Wiederholung
    Bild
    Innenabstände - damit die Links nicht so aneinander kleben, vergib Innenabstände links und rechts - je nachdem wie viel Platz du hast.
    Schriftformatierung - Stelle eine Schriftformatierung ein und stelle die Zeilenhöhe auf 80px um die Schrift vertikal auf der Grafik auszurichten.
#menue a:hover
  • Schriftformatierung - Stelle eine Schriftformatierung ein, die sich vom a-Zustand unterscheidet, die Navigation aber nicht zum Zappeln bringt.
.ende.
  • Größe - übernimm die Höhe und die Breite der Schlussgrafik

    Hintergrundgrafik - Lade die Grafik rechts1.png als Hintergrundgrafik
    Bild
em
  • Sichtbarkeit - versteckt, auf diese Weise sieht man die Beschriftung nicht mehr.
#inhalt
  • Und alle anderen IDs wie oben ...

Hast du es geschafft? Super, als Lösung findest du mein Beispiel hier verlinkt.

Lösung: Beispiel 5

Viel Spaß beim Nachbasteln!

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 8 - Horizontale Navigation

Beitrag von kp2709 » Mo 8. Sep 2014, 20:40

Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

camouflage1984
Beiträge: 249
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 8 - Horizontale Navigation

Beitrag von camouflage1984 » Mo 8. Sep 2014, 22:43

Hallo Kurt

Deine letzten drei Navigation sind sehr gut geworden. Bei den ersten zwei gibt es noch ein Problem zu lösen. Wenn ich mein Browser Fenster auf 1024 x 768 einstelle schiebt sich bei beiden Navigationen der letzte Link unter den ersten Link. Das bedeutet das er zu wenig platz in dieser Auflösung hat! Dadurch verschiebst du auch deine Überschrift.

Schau mal bitte selber nach woran es liegen könnte... ;)
kurt_1.jpg
kurt_1.jpg (48.98 KiB) 799 mal betrachtet
kurt_2.jpg
kurt_2.jpg (35.6 KiB) 799 mal betrachtet
Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 8 - Horizontale Navigation

Beitrag von kp2709 » Di 9. Sep 2014, 08:06

guten morgen :D :D .
hier meine korrektur der zwei links,
http://reikuma27.reikuma.bplaced.de/web ... ontal.html
http://reikuma27.reikuma.bplaced.de/web ... ontal.html

lg
kurt
ps. wie kann ich die darstellung überprüfen, wo stell ich browser fenster umstellen :?:
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

camouflage1984
Beiträge: 249
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 8 - Horizontale Navigation

Beitrag von camouflage1984 » Di 9. Sep 2014, 08:39

Guten Morgen Kurt

Das passt jetzt :mrgreen:
kp2709 hat geschrieben:wie kann ich die darstellung überprüfen, wo stell ich browser fenster umstellen
Das kannst du mit web-developer
webdeveloper.jpg
webdeveloper.jpg (49.16 KiB) 795 mal betrachtet

Wenn du auf Angepasste Layouts anzeigen klickst wird deine Seite in verschiedenen Auflösungen angezeigt!

Der ist im Firefox standardmäßig Installiert. Falls es nicht so sein sollte kannst du hier das Add ons Herunterladen!

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

haraldrichter
Beiträge: 5
Registriert: Di 29. Sep 2015, 17:49

Re: Lektion 8 - Horizontale Navigation

Beitrag von haraldrichter » Mi 14. Okt 2015, 10:57

Hallo,
ich habe mal meinen Webseitenversuch auf eine "Arbeitsdomain" gelegt, nämlich: http://www.oberwiesenthal.org.
Wie bereits erwähnt, funktioniert das Linkmenü nicht richtig. Spätestens, wenn ich - #menue a - auf Block stelle, werden die Linktexte vertikal angezeigt.

Zwischen Normalansicht und Browservorschau gibt es schon gewaltige Unterschiede, besonders was Schrift und Texte anbetrifft ( Abstände rechter Rand)

Die Bilder wurden nur Versuchsweise in einer Tabellenstruktur eingesetzt, weil ich das einigermaßen bringe. Das soll dann im css erfolgen, auch die Positionierung und Mouseover eine Vergrößerung auf 800px wie in der Originalgröße festgelegt. Habe allerdings noch keinen Plan. Auf meiner jetzigen Seite
http://www.ferienhaus-erzgebirge.info ist ein autm. Bildwechsler installiert, aber vermutlich werde ich das im Kompozer nicht hinbekommen.

Ich gehe davon aus, dass ich Euch noch des öfteren in Anspruch nehmen müssen.

mit freundlichen Grüßen
Harald Richter

camouflage1984
Beiträge: 249
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 8 - Horizontale Navigation

Beitrag von camouflage1984 » Mi 14. Okt 2015, 14:13

Hallo Harald
haraldrichter hat geschrieben:Wie bereits erwähnt, funktioniert das Linkmenü nicht richtig. Spätestens, wenn ich - #menue a - auf Block stelle, werden die Linktexte vertikal angezeigt.
Bei Deiner Navigation fehlen auch die entscheidenden Tags

Code: Alles auswählen

<ul></ul>
und

Code: Alles auswählen

<li></li>

Code: Alles auswählen

<div id="menue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="index.html">Willkommen</a>&nbsp;
&nbsp; &nbsp; <a href="eisenbahnromantik.html">Eisenbahnromantik</a>&nbsp;
&nbsp;&nbsp; <a href="wintermaerchen">Wintermärchen</a> &nbsp;
&nbsp;&nbsp; <a href="erlebniswelten.html">Erlebniswelten</a>&nbsp; &nbsp;
&nbsp;&nbsp; <a href="belegung-kosten.html">Belegung/Kosten</a>&nbsp;
&nbsp; &nbsp;&nbsp; <a href="anfahrt.html">Anfahrt</a>&nbsp; &nbsp;&nbsp; <a href="gaestebuch.html">Gästebuch</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; 
Die ganzen leerzeichen sind wohl für den Abstand ;) die brauchst Du nicht, wenn Du die Navigation nach der Lektion erstellst.

Du willst zu viel auf einmal, konzertiere Dich zuerst auf die verschiedenen Navigationen. Die Galerie wird später in dem Kurs besprochen und ein Lösungsweg aufgezeigt.

Gruß
Dimi
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 8 - Horizontale Navigation

Beitrag von Hellriders » Sa 24. Okt 2015, 04:04

meine ergebnisse :D

übung1
übung2
übung3
übung4
übung5

gruß micha

camouflage1984
Beiträge: 249
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 8 - Horizontale Navigation

Beitrag von camouflage1984 » Sa 24. Okt 2015, 04:30

Hallo Micha

Sieht sehr gut aus...

Weiter gehts!

Gruß
Dimi
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast