Achot: Navigation über die ganze Höhe

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?

  1. Hallo

    Lass die Liste weg und verwende Flexbox.

    Gruss

    MrMurphy

    1. 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?

      1. 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

        1. 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>
          
          1. 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

            1. 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.

              1. 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/

              2. 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

                1. 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.

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

                    1. Hallo

                      Das sieht soweit gut aus.

                      Gruss

                      MrMurphy

                      1. 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?

                        1. 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

                          --
                          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        2. @@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 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. 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.

            1. @@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 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. 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?

                1. @@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 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                  1. 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.