Navigation über die ganze Höhe

[Achot]

Hallo,

ich habe auf meiner Seite folgende Navigation http://codepen.io/anon/pen/ygPqWz Diese möchte ich gerne zu so einer http://www.sommerprint.com/de/ umbauen? Wie kann ich es erreiche, dass der ganze Bereich genutzt wird, von oben bis unten?

[MrMurphy1]

Hallo

Lass die Liste weg und verwende Flexbox.

Gruss

MrMurphy

[Achot]

Hallo MrMurphy,

Lass die Liste weg und verwende Flexbox.

ich teste mal und schau ob ich es hin bekomme. Danke für den Tipp. Achso, ist eine Navigation nicht immer eine Liste?

[MrMurphy1]

Hallo

Achso, ist eine Navigation nicht immer eine Liste?

Nein. Vor HTML5 gab es keine speziellen Elemente für eine Navigation.

Deshalb wurden dafür häufig Listen mißbraucht. Und zwar so häufig, dass viele Webseitenersteller ohne jede sachliche Grundlage eine feste Verbindung zwischen Navigation und Liste hergestellt haben und davon bis heute nicht lassen mögen.

Wie häufig bei Personen mit Halbwissen verteidigen sie ihre falschen Vorstellungen in der Regel unbeirrt und aggressiv. Andere Lösungen, egal wie sinnvoll und zulässig sie sind, werden von ihnen gnadenlos niedergemacht.

Dabei waren andere Elemente wie zum Beispiel Absätze genau so gut geeignet und zulässig.

Wer Listen verwenden und die Nachteile in Kauf nehmen möchte kann dies gerne tun. Eine Pflicht dazu besteht jedoch nicht.

Mit HTML5 gibt es für die Hauptnavigation das nav-Element. Das kann direkt mit a-Elementen gefüllt werden.

Gruss

MrMurphy

[Achot]

Hallo,

Wer Listen verwenden und die Nachteile in Kauf nehmen möchte kann dies gerne tun. Eine Pflicht dazu besteht jedoch nicht.

Mit HTML5 gibt es für die Hauptnavigation das nav-Element. Das kann direkt mit a-Elementen gefüllt werden.

würdest du den HTML Aufbau so umsetzten?

<header class="header">
  <div class="container">
    <div class="logo">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=75" alt="">
    </div>

    <nav id="nav">
        <a href="#">Startseite</a>>
        <a href="leistungen.html">Leistungen</a>
        <a href="beispiele.html">Beispiele</a>
        <a href="blog.html">Blog</a>
        <a href="kontakt.html">Kontakt</a>
    </nav>
  </div>
</header>

[MrMurphy1]

Hallo

Ich sehe eher

   <header>
      <figure>
         <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=75" alt="Logo mit näherer Beschreibung">
      </figure>
      <nav>
         <a href="#">Startseite</a>>
         <a href="leistungen.html">Leistungen</a>
         <a href="beispiele.html">Beispiele</a>
         <a href="blog.html">Blog</a>
         <a href="kontakt.html">Kontakt</a>
      </nav>
   </header>

Und dann noch class und / oder id nach Bedarf.

Gruss

MrMurphy

[Achot]

Hallo,

   <header>
      <figure>
         <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=75" alt="Logo mit näherer Beschreibung">
      </figure>
      <nav>
         <a href="#">Startseite</a>>
         <a href="leistungen.html">Leistungen</a>
         <a href="beispiele.html">Beispiele</a>
         <a href="blog.html">Blog</a>
         <a href="kontakt.html">Kontakt</a>
      </nav>
   </header>

ok, dann aber mit dem DIV Container

<header>
	<div class="container">
    <figure>
         <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=75" alt="Logo mit näherer Beschreibung">
    </figure>
    <nav>
        <a href="#">Startseite</a>>
        <a href="leistungen.html">Leistungen</a>
        <a href="beispiele.html">Beispiele</a>
        <a href="blog.html">Blog</a>
        <a href="kontakt.html">Kontakt</a>
    </nav>
    </div>
   </header>

Der Grund für das Div. Der Header geht über die ganze Seite, der Inhalt soll begrenzt werden.

[Achot]

Hallo,

ich habe hier ein neues Beispiel erstellt: http://codepen.io/anon/pen/BpmqNr schaut schon gut aus. Aber ich kann noch immer nicht die ganze A Fläche markieren wie auf http://www.sommerprint.com/de/

[MrMurphy1]

Hallo

Das figure-Element kann auch in das nav-Element verschoben werden, ohne dass die Welt untergeht, Suchmaschinen einen Herzinfarkt bekommen oder User böse Kommentare schreiben.

Mit dem zusätlichen div-Element geht es natürlich auch. Allerdings würde ich dem dann nicht grade die nichtssagende Klasse "container" geben, sondern den mit der Klassenbezeichnung etwas näher beschreiben, zum Beispiel mit "pageheaderbreite".

Gruss

MrMurphy

[Achot]

Hallo,

Mit dem zusätlichen div-Element geht es natürlich auch. Allerdings würde ich dem dann nicht grade die nichtssagende Klasse "container" geben, sondern den mit der Klassenbezeichnung etwas näher beschreiben, zum Beispiel mit "pageheaderbreite".

hier ein neues Beispiel: http://codepen.io/anon/pen/BpmqNr was sgst du dazu? Und wie bekomme ich die Schrift mittig angeordnet? Die Rote Farbe fliegt später natürlich wieder raus.

[Achot]

Ich glaube, ich habe es geschafft: http://codepen.io/anon/pen/BpmqNr Was sagst du dazu?

[MrMurphy1]

Hallo

Das sieht soweit gut aus.

Gruss

MrMurphy

[Achot]

Hallo,

hast du noch eine Idee wie ich es hin bekomme, dass der aktive ein

border-bottom: 2px solid #999;

bekommt, ohne dass sich der Text in der Mitte verschiebt?

[Matthias Apsel]

Hallo Achot,

hast du noch eine Idee wie ich es hin bekomme, dass der aktive ein

border-bottom: 2px solid #999;

bekommt, ohne dass sich der Text in der Mitte verschiebt?

• Gib allen einen 2px breiten transparenten border-bottom oder
• Kompensiere den border-bottom mit negativem margin-bottom

(ungetestet)

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@MrMurphy1

Achso, ist eine Navigation nicht immer eine Liste?

Nein.

Doch. Oh!

Vor HTML5 gab es keine speziellen Elemente für eine Navigation.

Deshalb wurden dafür häufig Listen mißbraucht.

ul/ol für eine Liste von Menüpunkten ist kein Missbrauch.

Wie häufig bei Personen mit Halbwissen verteidigen sie ihre falschen Vorstellungen in der Regel unbeirrt und aggressiv.

Das hast du völlig richtig erkannt. Fehlt nur noch die Erkenntnis, dass du derjenige mit Halbwissen bist.

Wer Listen verwenden und die Nachteile in Kauf nehmen möchte kann dies gerne tun.

Die Nachteile wären welche?

Die Vorteile sind: ul/ol bietet dem Nutzer wertvolle Information. Ein Screenreader sagt an, der wievielte Listenpunkt von wievielen insgesamt das jeweils ist.

LLAP 🖖

[Achot]

Hör doch endlich auf, ständig nur auf dein Fachwissen zu setzten und irgendwelche Twitter Links von Menschen zu verbreiten die meinen, sie hätten etwas zu sagen. Du springst auf den Scheiß auf. Lass es einfach bleiben und nimm es hin, dass andere Menschen auch eine Meinung haben. MrMurphy1 hat mir geholfen und es hat wunderbar geklappt.

[Gunnar Bittersmann]

@@Achot

Hör doch endlich auf, ständig nur auf dein Fachwissen zu setzten und irgendwelche Twitter Links von Menschen zu verbreiten die meinen, sie hätten etwas zu sagen.

Ja nee is’ klar, wer mit der Zeit geht, ist „gegen das Establishment.

Lass es einfach bleiben und nimm es hin, dass andere Menschen auch eine Meinung haben.

MrMurphy1 hat hier angefangen, die Meinung anderer in den Dreck zu ziehen.

LLAP 🖖

[Achot]

Hallo,

MrMurphy1 hat hier angefangen, die Meinung anderer in den Dreck zu ziehen.

sehe ich nicht so. Er hat nur gesagt dass es nicht immer eine ul oder ol sein muss. Außerdem hat er mir beim Problem geholfen und wir haben es zusammen hin bekommen. Kannst du denn belegen dass es FALSCH ist und dass man IMMER ein ul ol nehmen MUSS? Wenn nein, ist es nur DEINE Meinung! Laut dem HTML Validator ist KEIN Fehler im Code, also kann es NICHT so FALSCH sein?

[Gunnar Bittersmann]

@@Achot

MrMurphy1 hat hier angefangen, die Meinung anderer in den Dreck zu ziehen.

sehe ich nicht so. Er hat nur gesagt dass es nicht immer eine ul oder ol sein muss.

Er hat auch gesagt: „Wie häufig bei Personen mit Halbwissen verteidigen sie ihre falschen Vorstellungen in der Regel unbeirrt und aggressiv.“ Mit anderen Worten: MrMurphy1 weiß es besser und alle anderen sind doof.

Kannst du denn belegen dass es FALSCH ist und dass man IMMER ein ul ol nehmen MUSS?

Ich habe belegt, dass die Auszeichnung als Liste für manche Nutzer hilfreich ist.

Außerdem kann es fürs Styling hilfreich sein, wenn mehr Elemente zur Verfügung stehen.

Laut dem HTML Validator ist KEIN Fehler im Code, also kann es NICHT so FALSCH sein?

Der Validator testet Code auf Korrektheit, nicht auf Sinnhaftigkeit.

LLAP 🖖

[Achot]

Hallo,

Der Validator testet Code auf Korrektheit, nicht auf Sinnhaftigkeit.

ich habe gerade mal mein Google Mail Konto untersucht. Die Navigation auf der Linken Seite hat ebenfalls keine ul bzw. ol Liste. Und was sagst du jetzt? Ich denke die Mitarbeite bei Google haben mehr Ahnung als wir alle zusammen.

Außerdem ist die Diskussion damit für mich erledigt. In jedem Post lese ich von dir, dass du immer alles besser wissen willst aber ein reales Projekt hast du von dir noch nie gezeigt. Ist aber nicht mein Problem. Ich höhe auf Menschen die mir helfen und nicht nur reden.