Thomas: Navigation

Guten Abend,

ich hab gelesen dass eine Navigation immer aus <ul><li> bestehen soll, ist das richtig? Meine Navigation habe ich so umgesetzt

  
<nav id="HauptNav">  
    <a href="#" title="Titel">Name</a>  
    <a href="#" title="Titel">Name</a>  
    <a href="#" title="Titel">Name</a>  
    <a href="#" title="Titel">Name</a>  
    <a href="#" title="Titel">Name</a>  
    <a href="#" title="Titel">Name</a>  
</nav>  

  
#HauptNav {  
	border-bottom: 1px solid #dad9d9;  
        margin-bottom: 31px;  
        margin-top: 75px;  
        padding-bottom: 16px;  
}  
  
#HauptNav a {  
	font-weight:bold;  
	padding-right:16px;  
}  
  
#HauptNav a:first-child {  
	padding-left:1px;  
}  
  
#HauptNav a:last-child {  
	padding-right:0px;  
}  

Bitte nichts zu den px sagen, diese werden später noch im EM umgerechnet, da ich aber mit einem Grafiker zusammen arbeite ist es für diesen einfacher mit die PX Werte zu nennen.

Ich finde es ist doch egal ob eine Navigation mit <ul><li> oder so umgesetzt wird wie ich es gemacht habe? Der User sieht davon nichts, für das Ranking bei Google und Co. sollte es eigentlich auch egal sein? Außerdem habe ich mit <ul><li> so meine Probleme diese zu stylen und anzuordnen.

  1. Om nah hoo pez nyeetz, Thomas!

    ich hab gelesen dass eine Navigation immer aus <ul><li> bestehen soll, ist das richtig?

    Nun ja, eine Liste dient der semantischen Auszeichnung mehrerer gleichartiger Elemente. Ich kann dir nicht sagen, ob es

    für das Ranking bei Google und Co. […] eigentlich […] egal [ist]

    Die Links werden mit Sicherheit auch gefunden. Spannend ist, was Screenreader dazu sagen.

    Außerdem habe ich mit <ul><li> so meine Probleme diese zu stylen und anzuordnen.

    Dagegen lässt sich was tun. ;-)

    Fakt ist, dass du aufgrund der Struktur <nav><ul><li><a> wesentlich mehr Gestaltungsmöglichkeiten hast, ohne dass du mit Pseudoelementen oder zusätzlichen divs arbeiten musst.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Fest und Festräger.

  2. Mahlzeit,

    ich hab gelesen dass eine Navigation immer aus <ul><li> bestehen soll, ist das richtig?

    Dann solltest du diese Quelle zukünftig meiden. ul-li definiert eine Liste und eine Navigation ist nicht zwingend eine Liste.

    <nav id="HauptNav">
        <a href="#" title="Titel">Name</a>
        <a href="#" title="Titel">Name</a>
        <a href="#" title="Titel">Name</a>
        <a href="#" title="Titel">Name</a>
        <a href="#" title="Titel">Name</a>
        <a href="#" title="Titel">Name</a>
    </nav>

      
    Absolut übliches Markup für eine horizontale Navigation.  
      
    
    > Bitte nichts zu den px sagen, diese werden später noch im EM umgerechnet, da ich aber mit einem Grafiker zusammen arbeite ist es für diesen einfacher mit die PX Werte zu nennen.  
      
    Dann wechsel den Grafiker. Entweder ist er "angelernt", bzw. ein Hobbygrafiker ohne viel Erfahrung oder einfach nur unterdurchschnittlich begabt.  
      
    
    > Ich finde es ist doch egal ob eine Navigation mit <ul><li> oder so umgesetzt wird wie ich es gemacht habe?  
      
    Ist das jetzt eine Frage?  
    Und nein, es ist nicht egal. Wenn du eine Liste als Navigation hast, gehört da ul-li, ol-li o.ä. hin.  
      
    
    > für das Ranking bei Google und Co. sollte es eigentlich auch egal sein?  
      
    Berühmte letzte Worte eines gefeuerten SEO-Spezialisten ...  
      
    
    > Außerdem habe ich mit <ul><li> so meine Probleme diese zu stylen und anzuordnen.  
      
    Dann dürften deine Skills in CSS zu denen passen, die dein Grafiker hat und nicht mit em umgehen kann. Da du aber nicht konkret sagst, wo deine Probleme liegen, ist es völlig unmöglich, dir zu helfen ;)  
    
    -- 
    42
    
    1. @@M.:

      nuqneH

      <nav id="HauptNav">
          <a href="#" title="Titel">Name</a>
          <a href="#" title="Titel">Name</a>
          <a href="#" title="Titel">Name</a>
          <a href="#" title="Titel">Name</a>
          <a href="#" title="Titel">Name</a>
          <a href="#" title="Titel">Name</a>
      </nav>

        
      Erst nennst du das:  
      
      > Absolut übliches Markup für eine horizontale Navigation.  
        
      Weiter unten sagst:  
      
      > Und nein, es ist nicht egal. Wenn du eine Liste als Navigation hast, gehört da ul-li, ol-li o.ä. hin.  
        
      Ja was denn nun? Du widersprichst dir. Ob Liste oder nicht hat mit horizontal vs. vertikal rein gar nichts zu tun.  
        
        
      
      > da ich aber mit einem Grafiker zusammen arbeite ist es für diesen einfacher mit die PX Werte zu nennen.  
      >   
      > Dann wechsel den Grafiker. Entweder ist er "angelernt", bzw. ein Hobbygrafiker ohne viel Erfahrung oder einfach nur unterdurchschnittlich begabt.  
        
      Da unterstelle ich dir jetzt, nicht viel Erfahrung mit Grafikern zu haben oder einfach nur unterdurchschnittlich begabt zu sein, mit Grafikern zusammenzuarbeiten.  
        
      Natürlich ist es für Grafiker einfacher, in Pixeln zu denken, weil die Lineale \*ihrer\* Entwicklungswerkzeuge (bspw. Photoshop (“you damn liar”)) Pixel anzeigen (oder Zentimeter, Zoll o.ä. Unbrauchbares). Es gehört zu den Aufgaben des Frontendentwicklers, im Stylesheet em/rem zu verwenden.  
        
      Grundkenntnisse in CSS sind ein großes Plus für einen Grafiker, aber kein Muss. Und schon gar nicht ist ein Grafiker ohne CSS-Kenntnisse deshalb gerade „angelernt“ oder gar „Hobbygrafiker“.  
        
        
      
      > > Außerdem habe ich mit <ul><li> so meine Probleme diese zu stylen und anzuordnen.  
      >   
      > Dann dürften deine Skills in CSS zu denen passen, die dein Grafiker hat  
        
      Dass diese nicht zwangsläufig gering sind, haben wir ja schon geklärt.  
        
      
      > und nicht mit em umgehen kann.  
        
      Dass das gar nicht seine/ihre Aufgabe ist, haben wir auch schon geklärt.  
        
      
      > Da du aber nicht konkret sagst, wo deine Probleme liegen, ist es völlig unmöglich, dir zu helfen ;)  
        
      Dann dürften deine Skills in CSS zu denen passen, die du Thomas unterstellst. So viele Probleme, ul/li zu stylen, gibt es wohl nicht. Bullets weg: `ul {list-style: none}`{:.language-css}. Linker\* Abstand weg: `ul {padding-left: 0}`{:.language-css}, ggfs. auch li `{margin-left: 0}`{:.language-css}.  
        
      Qapla'  
        
      \* bei LTR-Schriften
      
      -- 
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      
      1. Hallo,

        So viele Probleme, ul/li zu stylen, gibt es wohl nicht.
        * Bullets
        * Linker Abstand ul
        * ggfs. auch li

        was ist mit Standardverhalten, dass alle Items untereinander sind?

        Gruß
        Kalk

        1. @@Tabellenkalk:

          nuqneH

          was ist mit Standardverhalten, dass alle Items untereinander sind?

          Was ist eine rhetorische Frage?

          Ich antworte mal trotzdem: Flexbox, Float oder Inline-Block.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. Mahlzeit,

        Ja was denn nun? Du widersprichst dir. Ob Liste oder nicht hat mit horizontal vs. vertikal rein gar nichts zu tun.

        Ich sehe keinen Widerspruch. Eine Aneinanderreihung von Links ist nocht zwingend eine Liste. Für mich ist eine Liste von Dingen, die auf irgendeine Weise zusammengehören, was bei einer Navigation nicht zwingend der Fall sein muss. Ja, Haarspalterei, aber genau die wollte ich vermeiden, deshalb hab ich nicht generell eine Navigation mit einer Liste gleichgestellt.

        Da unterstelle ich dir jetzt, nicht viel Erfahrung mit Grafikern zu haben oder einfach nur unterdurchschnittlich begabt zu sein, mit Grafikern zusammenzuarbeiten.

        Ok, ich muss zugeben, die Grafiker, mit denen ich arbeite, haben auch Ahnung von Frontend-Design und machen praktisch kein Print-Design. Vielleicht sind meine Ansprüche einfach andere, weil ich mit meinen Partnern viel Glück habe ;)

        Natürlich ist es für Grafiker einfacher, in Pixeln zu denken, weil die Lineale *ihrer* Entwicklungswerkzeuge (bspw. Photoshop (“you damn liar”)) Pixel anzeigen (oder Zentimeter, Zoll o.ä. Unbrauchbares). Es gehört zu den Aufgaben des Frontendentwicklers, im Stylesheet em/rem zu verwenden.

        Wenn ein Grafiker "nur" eine Vorlage designed und ein Frontend-Designer das dann umsetzt, stimmt deine Aussage natürlich, da hätte ich präzisieren müssen.

        Grundkenntnisse in CSS sind ein großes Plus für einen Grafiker, aber kein Muss. Und schon gar nicht ist ein Grafiker ohne CSS-Kenntnisse deshalb gerade „angelernt“ oder gar „Hobbygrafiker“.

        Stimmt, da war meine Aussage überzogen und nicht wirklich zu Ende gedacht.

        Dann dürften deine Skills in CSS zu denen passen, die du Thomas unterstellst. So viele Probleme, ul/li zu stylen, gibt es wohl nicht.

        Wenn du es schaffst, alle Styling-Probleme mit ul-li in einen Post zu klemmen ohne das Problem zu kennen, dann mach das bitte, ich bin gespannt :)
        Wäre gleichzeitig ein genialer Wiki-Artikel. Ich sehe mich nicht in der Lage, alle theoretischen Probleme zu erkennen, die jeder Anwender haben könnte(!).

        Wenn du mir also zeigst, dass du das kannst, werde ich dir schriftlich geben, dass ich in CSS eine Vollniete bin.

        Bullets weg: ul {list-style: none}. Linker* Abstand weg: ul {padding-left: 0}, ggfs. auch li {margin-left: 0}.

        Wenn du glaubst, das wären alle Eventualitäten, aus denen ein Problem entstehen kann, muss ich den Ball mit den fehlenden Skills weiterspielen. Das ist ein Fliegenschiss der Komplettlösung.

        --
        42
        1. @@M.:

          nuqneH

          Natürlich ist es für Grafiker einfacher, in Pixeln zu denken, weil die Lineale *ihrer* Entwicklungswerkzeuge (bspw. Photoshop (“you damn liar”)) Pixel anzeigen (oder Zentimeter, Zoll o.ä. Unbrauchbares). Es gehört zu den Aufgaben des Frontendentwicklers, im Stylesheet em/rem zu verwenden.

          Wenn ein Grafiker "nur" eine Vorlage designed und ein Frontend-Designer das dann umsetzt, stimmt deine Aussage natürlich, da hätte ich präzisieren müssen.

          Sie stimmt auch, wenn Grafiker und Frontendentwickler zusammensitzen und gemeinsam im Browser entwickeln. Auch dass ist es Aufgabe des Frontendentwicklers, im Stylesheet em/rem zu verwenden.

          Nützlicher Nebeneffekt: Der Grafiker lernt was dabei. (Der Frontendentwickler auch.)

          Wenn du es schaffst, alle Styling-Probleme mit ul-li in einen Post zu klemmen ohne das Problem zu kennen, dann mach das bitte, ich bin gespannt :)
          Wäre gleichzeitig ein genialer Wiki-Artikel. Ich sehe mich nicht in der Lage, alle theoretischen Probleme zu erkennen, die jeder Anwender haben könnte(!).

          Wenn du mir also zeigst, dass du das kannst, werde ich dir schriftlich geben, dass ich in CSS eine Vollniete bin.

          Wir wissen beide, dass das nicht der Fall ist. Da sehe ich keinen Grund, die <I> anzutreten.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        2. Om nah hoo pez nyeetz, M.!

          Wenn du es schaffst, alle Styling-Probleme mit ul-li in einen Post zu klemmen ohne das Problem zu kennen, dann mach das bitte, ich bin gespannt :)
          Wäre gleichzeitig ein genialer Wiki-Artikel. Ich sehe mich nicht in der Lage, alle theoretischen Probleme zu erkennen, die jeder Anwender haben könnte(!).

          Es gibt ja schon einen Anfang

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Halle und Halleffekt.