Bademeister: Leere Listen

Hi.

Eine Website hat eine Hauptnavigation und je nach Abschnitt, in dem man sich befindet, eine Unternavigation. Soll heissen: in manchen Abschnitten gibt es nur eine einzige Seite, ohne weitere Unternavigationspunkte.

Jetzt hat aber die Unternavigation ihren legitimen Platz im Layout der Seite, mit Rahmen, Hintergrundfarbe und dergleichen (die Menus sind nicht verschachtelt, sondern getrennte Listen). Zunaechst mal schien es mir naheliegend, im Fall des Falles einfach eine leere Liste hinzusetzen. Finde ich eigentlich auch semantisch unproblematisch - wenn die Unternavigation leer ist, ist sie eben leer...

Der Validator sieht das geringfuegig anders und versieht es mit einem Warning (HTML 4.01 Strict).

Frage: Was waere hier "best practise":

1.: Das Warning hinnehmen? (Wie sollten generell Warnings eingestuft werden?)

2.: Din leeres <div> statt der leeren Liste hinsetzen, was kein Warning produziert (Das koennte hier auf Ablehnung stossen, gefaellt mir aber eigentlich ganz gut ;-))

3.: Eine Unter"navigation" mit einem Eintrag hinsetzen, der auf die aktuelle Seite "zeigt", aber dann kein Link ist und ggf. ausgeblendet wird? (Das waere im Grunde hoechst konsequent, denn jedes andere Untermenu hat diesen Eintrag ja sonst auch: die aktive Seite, die dann ggf. nicht verlinkt ist, aber dennoch im Menu auftaucht.)

4.: Von meinen Designvorstellungen Abstand nehmen und die Liste ersatzlos streichen? (Das waere gewissermassen unschoen?)

Was wuerdet Ihr tun?

Danke, viele Gruesse,
der Bademeister

  1. @@Bademeister:

    nuqneH

    Finde ich eigentlich auch semantisch unproblematisch - wenn die Unternavigation leer ist, ist sie eben leer...

    IMHO sollten Listen wirklich leer sein dürfen, ebenso tbody, tr etc.

    Der Validator sieht das geringfuegig anders und versieht es mit einem Warning (HTML 4.01 Strict).

    Nein, er sieht es völlig anders und meldet einen _Fehler_. Weil es eben leere ul, ol, tbody, tr etc. in HTML 4.01 nicht vorgesehen sind. Nun ja, die Spec stammt ja auch aus einer Zeit, bevor Elemente auch dynamisch erzeugt wurden.

    In HTML5 sind leere ul, ol, tbody, tr etc. möglich. Und das ist auch gut so.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. In HTML5 sind leere ul, ol, tbody, tr etc. möglich. Und das ist auch gut so.

      Sehe ich auch so - im genannten Fall kann ich mir aber nicht vorstellen, warum eine leere Liste (die "niemals" Inhalt bekommen wird) oberhaupt da ist.

    2. Hi Gunnar.

      Der Validator sieht das geringfuegig anders und versieht es mit einem Warning (HTML 4.01 Strict).

      Nein, er sieht es völlig anders und meldet einen _Fehler_.

      Das ueberrascht mich etwas. Ich bin im Moment nicht an einem Rechner, an dem ich Zugang zu der Site haette - bis eben war ich sicher, dass mein Firefox-Plugin-HTML-Validator mir da ein Warning verpasst hat.

      Ich werde spaeter (evtl. erst morgen) dieser Frage nochmal nachgehen und auch das von suit erbetene Beispiel liefern.

      Danke Euch beiden schon mal.

      Viele Gruesse,
      der Bademeister

      1. Nein, er sieht es völlig anders und meldet einen _Fehler_.

        »»

        Das ueberrascht mich etwas.

        Tatsache, es ist ein Fehler. Da haben das W3C und ich also eine ziemliche Meinungsverschiedenheit. Aber ok, der Klügere gibt nach... ;-) Damit ist Option 1 also hinfällig.

        @suit: Ich hab gerade Schwierigkeiten, ein Online-Beispiel zu liefern. Ich male mal ein Bildchen:

        +------------+----------------------------------------------+
        |            |              ÜBERSCHRIFT                     |
        |   LOGO     |                                              |
        |       -----+----------------------------------------------+
        |            |                   Unterseite 1  Unterseite 2 |
        +------------+----------------------------------------------+
        |            |                                              |
        |            |    Hallo.                                    |
        | Seite 1    |                                              |
        | Seite 2    |                                              |
        | Seite 3    |                                              |
        |            |                                              |
        |            |                                              |
        |            |                                              |
        |            |                                              |
        |            |                                              |

        So kann man sich das vorstellen. Die Unternavigation (-> Unterseite 1 etc.) hat einen Rahmen und eine eigene Hintergrundfarbe, und diese Farben gehen optisch in das Logo über, das ist genau dafür angepasst (hier angedeutet durch die Linie im Logo).

        Wenn jetzt die Unternavigation leer ist, dann sollte das dennoch nicht das Layout zerschießen, also brauche ich da ein Element.

        Viele Grüße,
        der Bademeister

        1. Hi,

          +------------+----------------------------------------------+
          |            |              ÜBERSCHRIFT                     |
          |   LOGO     |                                              |
          |       -----+----------------------------------------------+
          |            |                   Unterseite 1  Unterseite 2 |
          +------------+----------------------------------------------+
          |            |                                              |
          |            |    Hallo.                                    |

          So kann man sich das vorstellen. Die Unternavigation (-> Unterseite 1 etc.) hat einen Rahmen und eine eigene Hintergrundfarbe, und diese Farben gehen optisch in das Logo über, das ist genau dafür angepasst (hier angedeutet durch die Linie im Logo).

          Das kann doch vermutlich auch die Überschrift übernehmen ... ggf. mit einem border-bottom; der untere Rahmen kann dann vom Hauptinhaltsbereich bereitgestellt werden.

          MfG ChrisB

          --
          RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        2. Wenn jetzt die Unternavigation leer ist, dann sollte das dennoch nicht das Layout zerschießen, also brauche ich da ein Element.

          <div id="menu"></div>

          Oder in HTML5:
          <nav id="menu"></nav>

          Wenn das Untermenü vorhanden ist:

          <div id="menu"><!-- bzw. als nav-Element -->  
            <ul>  
              <li>Seite 1</li>  
              <li>Seite 2</li>  
              <li>Seite 3</li>  
            </ul>  
          </div>
          
          1. @@suit:

            nuqneH

            Oder in HTML5:
            <nav id="menu"></nav>

            Nee, nee. Da finde ich eine Liste, in der keine Items sind, sinnvoller als ein 'nav'-Element, in dem keinerlei Navigation ist.

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
            1. Oder in HTML5:
              <nav id="menu"></nav>

              Nee, nee. Da finde ich eine Liste, in der keine Items sind, sinnvoller als ein 'nav'-Element, in dem keinerlei Navigation ist.

              Und was machst du im bereits angesprochenen Fall, wenn das nav-Element nur als Platzhalter dient, weil z.B. mittels Ajax eine Navigation nachgeladen werden kann?

              1. @@suit:

                nuqneH

                Und was machst du im bereits angesprochenen Fall, wenn das nav-Element nur als Platzhalter dient, weil z.B. mittels Ajax eine Navigation nachgeladen werden kann?

                Ein leeres 'nav'.

                Moment, Navigation nur mit JavaScript?

                Qapla'

                --
                Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                (Mark Twain)
                1. Hi.

                  Ok, also HTML5 wird das Problem etwas entschaerfen, das ist ganz gut. Aber bis ich ne HTML5-Version der Site baue, wirds noch etwas dauern, weil der Status Quo ist, dass ich von HTML5 keinerlei Ahnung habe.

                  Bis dahin halte ich es im wesentlichen wie von suit vorgeschlagen - allerdings wuerde ich es noch etwas "schlanker" machen:

                  Wenn Menu leer:
                  <div id="menu"></div>

                  Wenn Menu nicht leer:

                  <ul id="menu">  
                      <li>Seite 1</li>  
                      <li>Seite 2</li>  
                      <li>Seite 3</li>  
                  </ul>
                  

                  CSS:

                    
                  #menu    { ... }  
                  #menu li { ... }  
                  
                  

                  Das <div> also nur wenn notwendig. Sofern da keine hoeheren Gruende dagegen sprechen, einfach das Element auszutauschen (SEO, ... ?), sollte das doch reichen, oder?

                  (Und SEO ist mir bei der Website sogar egal.)

                  PS: Eine Liste darf nicht leer sein, aber ein Containerelement, dessen Zweck es ist, Elemente zu gruppieren, darf es? WTF?

                  Viele Gruesse,
                  der Bademeister

                2. Und was machst du im bereits angesprochenen Fall, wenn das nav-Element nur als Platzhalter dient, weil z.B. mittels Ajax eine Navigation nachgeladen werden kann?

                  Moment, Navigation nur mit JavaScript?

                  Wer sagt was von nur?

                  Bei einem "normalen" Request kommt ein vollständiges Dokument daher - möglicherweise mit oder ohne der besagten Navigation. Bei einem Aufruf via Ajax wird aber nur der Inhalt und das Menü geladen, der Inhalt kommt dort hin wo der alte Inhalt war, das neue Menü dorthin wo das das alte war.

                  Moment, kein Menü vorher da? Gut, dass es das leere nav-Element gibt, welches wir befüllen können.

  2. Der Validator sieht das geringfuegig anders und versieht es mit einem Warning (HTML 4.01 Strict).

    Ein leeres UL- oder OL-Element ist auch in den Transitional-Varianten ein Fehler.

    1.: Das Warning hinnehmen? (Wie sollten generell Warnings eingestuft werden?)

    Nein, imho keine option.

    2.: Din leeres <div> statt der leeren Liste hinsetzen, was kein Warning produziert (Das koennte hier auf Ablehnung stossen, gefaellt mir aber eigentlich ganz gut ;-))

    Wenn es die Formatierung unbedingt erfordert (was ich nicht glaube) und pseudo-Elemente keine Lösung sind.

    3.: Eine Unter"navigation" mit einem Eintrag hinsetzen, der auf die aktuelle Seite "zeigt", aber dann kein Link ist und ggf. ausgeblendet wird? (Das waere im Grunde hoechst konsequent, denn jedes andere Untermenu hat diesen Eintrag ja sonst auch: die aktive Seite, die dann ggf. nicht verlinkt ist, aber dennoch im Menu auftaucht.)

    Ich glaube ich verstehe allgemein dein Problem nicht.

    4.: Von meinen Designvorstellungen Abstand nehmen und die Liste ersatzlos streichen? (Das waere gewissermassen unschoen?)

    Das würde ich machen.

    Könntest du aber ggf. nochmal ein praktisches Beispiel so einer "leeren" Navigation bringen?