Verschachteln von Listen in HTML5?

  • Hallo!


    Gerade bin ich beim Bearbeiten des Übungsprojektes "Tübingen anders sehen". Axel führt hier eine verschachtelte Liste für die Navigation ein. Ich hatte schon vorgearbeitet und war auch auf diesem Weg, der im Browser auch funktioniert, im Validator aber nicht akzeptiert wird. Allerdings hatte ich das neue ul nicht innerhalb eines li notiert. Schliesslich habe ich das Problem über CSS gelöst, indem ich für li eine Klasse Unterpunkt definiert und dort das geänderte Aussehen notiert habe. Das führte zum erwünschten Ergebnis. Was ist nun die bessere Lösung, verschachteln oder nur über CSS gehen?

  • Was genau meinst Du denn? Verschachteln und CSS hat erstmal nichts miteinander zu tun.

    Ich kann die Elemente verschachteln:

    Code
    <ul>
        <li>
            <ul>
                <il></li>
            </ul>
        </li>
    </ul>

    und trotzdem mit CCS drauf zugreifen:

    Code
    LI > UL { … }
    UL UL { … }
    UL > LI > UL { … }

    wären die ersten Möglichkeiten, die mir adhoc einfallen.

  • Hallo, danke für die Antworten. War ein ungeübter Start. Hier mein Code in HTML5


    Ich hatte zuerst

    HTML
    <ul>
        <li>......</li>
        <li>......</li>
        <ul>
            <li>......</li>
            <li>......</li>
        </ul>
        <li>......</li>
        </ul>

    geschrieben. Das hat war nicht valide Eine Verschachtelung, wie Arne sie gepostet hat, würde funktionieren. Ja, aber meine Überlegung bezüglich des Tübingen-Projektes ging weiter: Brauche ich die Verschachtelung überhaupt? In CSS brauche ich so so oder so einen Klassenselektor für die Unterliste. Damit wären m.E. zwei Listen überflüssig. Nun sieht es konkret so aus:


    und in CSS

    CSS
    nav li {
        
        list-style: none;
    }
    .unterpunkt {
        
        list-style: square;
        margin-left: 30px;
        
    }

    Das Design ist noch nicht fertig, aber auf dem richtigen Weg.


    Nun meine konkrete Frage an die Geübten: Was ist "best use"? Meiner Auffassung nach der schlankere HTML-Code in Form einer einzigen ul ohne Unterliste. Was meint Ihr?

  • Zitat

    Was ist "best use"? Meiner Auffassung nach der schlankere HTML-Code in Form einer einzigen ul ohne Unterliste. Was meint Ihr?

    Ich bin da anderer Meinung: Hier spielt nicht nur eine Rolle, wie schlank der HTML-Code ist und wie leicht er sich stylen lässt sondern auch die Logik bzw. Semantik: Die Unterpunkte sind jeweils einem Hauptpunkt unter- bzw. zugeordnet und das sollte sich auch direkt im HTML wiederspiegeln.

    Zitat

    In CSS brauche ich so so oder so einen Klassenselektor für die Unterliste.

    Nicht unbedingt:

    CSS für die Listenelemente der Hauptliste:

    Code
    nav>ul>li {
    }

    CSS für die Listenelemente der Unterliste:

    Code
    nav>ul>li>ul>li {
    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!