Navigation von selfhtml sieht merkwürdig aus

  • <div id="Rahmen">
    <ul id="Navigation">
    <li> <a href="index.php">Übersicht</a> </li>
    <li> <a href="">2</a> <ul>
    <li><a href="">2.1</a></li>
    <li><a href="">2.2</a></li>
    </ul>
    </li>
    <li><a href="">3</a></li>
    <li><a id="aktuell" href="">4</a>
    <ul>
    <li><a href="">Seite 4a</a></li>
    <li><a href="">Seite 4c</a></li>
    </ul>
    </li>
    <li><a href="">Seite 5</a></li>
    </ul>
    <div>
    </div>
    </div>


    css


    #Rahmen {
    width: 47.1em;
    padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
    }

    #Rahmen div {
    clear: left;
    }
    #Navigation {
    margin: 0; padding: 0;
    text-align: center;
    }

    #Navigation li {
    list-style: none;
    float: left; /* ohne width - nach CSS 2.1 erlaubt

    */
    position: relative;
    margin: 0.4em; padding: 0;
    }

    #Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none; /* Unternavigation ausblenden

    */
    }
    #Navigation li:hover ul {
    display: block; /* Unternavigation in

    modernen Browsern einblenden */
    }
    #Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
    }

    #Navigation a, #Navigation span {
    display: block;
    width: 6.4em; /* Breite den in li enthaltenen

    Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color:

    white;
    color: maroon; background-color: #ccc;
    }
    #Navigation a:hover, #Navigation span, li

    a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color:

    black;
    color: white; background-color: gray;
    }
    li a#aktuell { /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
    }
    ul#Navigation li ul span { /* aktuelle Unterseite

    kennzeichnen */
    background-color: maroon;
    }


    das habe ich von http://de.selfhtml.org/css/layouts/na….htm#horizontal

    meiner meinung nach muss es doch in 4ter Zeile mit </li></ul> beendet werden, zudem
    bei id="aktuell wird der <li> tag auch nicht geschlossen, trotzdem ist der code valide, ich kenne mich mit navis dieser art nicht so gut aus. warum muss das so sein?

  • Der HTML-Code bezieht sich auf ein sogenanntes "Drop-Down-Menü".
    So gibt es zum Link "2" noch die Unterkategorien "2.1" und 2.2".
    Deshalb ist die Verschachtelung und dass nach li nochmals ul geöffnet wird korrekt.
    Nachteil dieses Konstrukts: Es funktioniert nicht auf Anhieb im IE 6 und 7.
    Wie das geht, ist hier erklärt: http://www.ohne-css.gehts-gar.net/0066.php.

    Wenn du nur ein Menü mit einer Ebene (ohne Unterpunkte) brauchst, dann kannst du die Verschachtelung weglassen und wie von dir erkannt verfahren.

  • Der HTML-Code bezieht sich auf ein sogenanntes "Drop-Down-Menü".
    So gibt es zum Link "2" noch die Unterkategorien "2.1" und 2.2".
    Deshalb ist die Verschachtelung und dass nach li nochmals ul geöffnet wird korrekt.
    Nachteil dieses Konstrukts: Es funktioniert nicht auf Anhieb im IE 6 und 7.
    Wie das geht, ist hier erklärt: http://www.ohne-css.gehts-gar.net/0066.php.

    Wenn du nur ein Menü mit einer Ebene (ohne Unterpunkte) brauchst, dann kannst du die Verschachtelung weglassen und wie von dir erkannt verfahren.

    und kann ich nicht das <div id="menü"></div> weglassen, denn korrekte Listen sollte man doch ohne ein div machen, und wenn packe ich es eh dann in meinen rein :P

  • Das kannst du halten wie du magst. Ich mache das z.B. gerne um Hintergrundbilderund so zu vergeben.
    Aber das ist meiner Meinung nach Ansichstsache.