Menü-Punkt wird schmaler

  • Die Elemente img und span gehören zur Gruppe der Textelemente. Deren Eigenschaft ist es, dass wenn sie in einem Text eingefügt werden, den Text an der Stelle in Schreibrichtung weiterschieben, so dass deren Inhalt dort eingefügt werden kann.
    Genau dieses Verhalten ist bei dir zu beobachten. Der Button bestehend aus Span-Elementen wird geteilt nach dem Bild, der Text erscheint und danach der Rest vom Button, die kleine blaue Randlinie, die dir oben fehlt.


    Du hast immer nicht gesagt welche Funktion denn dahinter stehen soll. Entweder es geht mit Javascript weiter oder mit CSS aber dazu ist es notwendig zu wissen was das Ganze am Schluss werden soll.

  • Als nächstes fügst du deinem HTML-Code eine 2. Ebene in der Liste ein, das macht man in dem man eine unsortierte Liste innerhalb eines Listenelementes einfügt:

    Code
    1. <ul id="top">
    2. <li><img class="img_set" src="style/img/invis.png" alt="Optionen"></li>
    3. <li><img class="img_menu" src="style/img/invis.png" alt="Menu">
    4. <ul>
    5. <li><a href="">2. Ebene</a></li>
    6. <li><a href="">2.punkt</a></li>
    7. </ul>
    8. </li>
    9. </ul>


    Danach gehts ans CSS. dort müssen die Listenelemente in der 1. Ebene die jetzt vorhanden sind als Inlineelemente zu Blockelementen gewandelt werden und danach werden sie mit float:left wieder in Position gebracht. Für die 2. Ebene werden die Listenelemnte ebenfalls als Block angezeigt, da wir sie untereinander haben wollen.
    Dann noch etwas Farbe und Länge zugeben und schon haben wir es geschafft.


    CSS-Code

  • Dein HTML-Code ist fehlerhaft, genau beim Menü.


    Falsch:

    HTML
    1. <ul id="top">
    2. <li><img class="img_set" src="style/img/invis.png" alt="Optionen"></li>
    3. <li><img class="img_menu" src="style/img/invis.png" alt="Menu"></li>
    4. <ul>
    5. <li>2. Ebene</li>
    6. <li>2.punkt</li>
    7. </ul>
    8. </ul>


    Richtig:

    HTML
    1. <ul id="top">
    2. <li><img class="img_set" src="style/img/invis.png" alt="Optionen"></li>
    3. <li><img class="img_menu" src="style/img/invis.png" alt="Menu">
    4. <ul>
    5. <li>2. Ebene</li>
    6. <li>2.punkt</li>
    7. </ul></li>
    8. </ul>


    Siehst Du den Unterschied? Wenn ja, kannst Du nun auch das Untermenü in Abhängigkeit vom Obermenü stylen.

  • Du hast den HTML-Code den ich dir gegeben habe verändert.
    Die Liste muss genau so aussehen:

    Code
    1. <ul id="top">
    2. <li><img class="img_set" src="style/img/invis.png" alt="Optionen"></li>
    3. <li><img class="img_menu" src="style/img/invis.png" alt="Menu">
    4. <ul>
    5. <li><a href="">2. Ebene</a></li>
    6. <li><a href="">2.punkt</a></li>
    7. </ul>
    8. </li>
    9. </ul>


    Wenn du das li-Element hinter dem 2. Bild schliesst ist das Menü nicht verschachtelt!


    Lies mal hier: http://de.selfhtml.org/html/text/listen.htm

  • Ja kann ich.


    Code
    1. #top li {
    2. list-style-type: none;
    3. background-color: rgb(0, 153, 255);
    4. height: 22px;
    5. width: 22px;
    6. /* war vorher width: auto; */
    7. padding: 1px 5px;
    8. display: block;
    9. float: left;
    10. border-bottom: 2px solid rgb(51, 51, 51);


    Du hast eine Liste - ul - ungeordnet in diesem Fall. Die Listenelemente sind deine li.
    Lese dich unbedingt mal ein in HTML und CSS. Im Netz gibt es hunderte von Anleitungen, sonst sitzen wir hier nächste Woche noch an deinem Menü.