bari: css, lu, li geht unten über div hinaus

Guten Tag an die Webgemeinde,

Folgende ul-li habe ich geschrieben:

  
<div class="info"><ul id="language">  
To go or return to the start page of your language, click on the corresponding language button  
<li><a href="de/index.html">Deutsch</a></li>  
<li><a href="en/index.html">English</a></li>  
<li><a href="fr/index.html">Français</a></li>  
<li><a href="ru/index.html">Русский</a></li><br>  
<span style="float:left"><li>or go to the &nbsp;<a href="index.html">Welcome page</a></li></span></ul>  
</div><br class="clear">  
<div class="anker-liste">  
Choose among the following slide shows:  
<ul class="anker">  
<li><a href="#slide-show-11">From Nufenenpass to Gotthardpass</a></li>  
...(viele weitere href's)  
</ul></div><br class="clear">  

Es geht nur um die erste ul, da gelingt es mir nicht zu verhindern, dass das einelne li-elemente über den unteren Rand des div-elements hinausragt. Woran liegt das? Ich habe in dieser ul ein li-element, das ich auf eine neue Zeile haben möchte, deshalb der br mit span float: left. Ist das der Grund?
Hier kann man sehen, wie es jetzt aussieht.

Vielen Dank für Hinweise,
bari.

  1. Hi,

    Folgende ul-li habe ich geschrieben:

    <div class="info"><ul id="language">
    To go or return to the start page of your language, click on the corresponding language button
    <li><a href="de/index.html">Deutsch</a></li>
    <li><a href="en/index.html">English</a></li>
    <li><a href="fr/index.html">Français</a></li>
    <li><a href="ru/index.html">Русский</a></li><br>
    <span style="float:left"><li>or go to the &nbsp;<a href="index.html">Welcome page</a></li></span></ul>
    </div>

      
    Das ist gleich an mehreren Stellen invalides HTML – UL darf \*ausschlielich\* LI als Kindelemente haben. Du hast aber direkt Text in UL gepackt, und BR und SPAN … nicht erlaubt.  
    Bring das zu aller erst mal in Ordnung.  
      
    (Frag den [Validator](http://validator.w3.org/), wenn du dir nicht sicher bist ob du alle Fehler beseitigt hast.)  
      
    MfG ChrisB  
      
    
    -- 
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    
    1. Das ist gleich an mehreren Stellen invalides HTML – UL darf *ausschlielich* LI als Kindelemente haben. Du hast aber direkt Text in UL gepackt, und BR und SPAN … nicht erlaubt.
      Bring das zu aller erst mal in Ordnung.

      gut, das habe ich in Ordnung gebracht.

      Ich wollte eben verhindern, dass ich 2x die id="language" nehme, das der Validator als Fehler angibt. (ich habe sie doch 2x genommen).
      In diesem Fall muss ich wohl extra eigene id/class schreiben für diesen einen Link (resp dieselbe Formatierung mit anderer id/class benennen), oder?

      Und, wie bringe ich den Link Welcome page hinter den Text "or go to", wenn möglich so, dass der Link nicht mit grossem Abstand rechts im div steht, sondern gerade nach dem Text kommt.
      mit float left kommt er vor den Text zu stehen, ohne float left steht er ganz rechts.

      Mein code sieht nun so aus:

        
      <div class="info">  
      To go or return to the start page of your language, click on the corresponding language button  
      <ul id="language">  
      <li><a href="de/index.html">Deutsch</a></li>  
      <li><a href="en/index.html">English</a></li>  
      <li><a href="fr/index.html">Français</a></li>  
      <li><a href="ru/index.html">Русский</a></li></ul><br>  
      <span>or go to the &nbsp;</span><ul id="language" style="float: left"><li><a href="index.html">Welcome page</a></li></ul>  
      
      
      1. Hallo

        Ich wollte eben verhindern, dass ich 2x die id="language" nehme, das der Validator als Fehler angibt. (ich habe sie doch 2x genommen).

        Das meckert der Validator nicht ohne Grund an. Eine ID muss im Dokument einmalig sein.

        In diesem Fall muss ich wohl extra eigene id/class schreiben für diesen einen Link (resp dieselbe Formatierung mit anderer id/class benennen), oder?

        Wie wär's, aus der ID eine Class zu machen?

        Und, wie bringe ich den Link Welcome page hinter den Text "or go to", wenn möglich so, dass der Link nicht mit grossem Abstand rechts im div steht, sondern gerade nach dem Text kommt.

        Eine Liste mit nur einem Element ist fragwürdig. Mach daraus einen Link innerhalb des Textes innerhalb eines Absatzes.

        <div class="info">To go or return to the start page of your language, click on the corresponding language button  
        <!-- Liste -->  
        <p>or go to the&nbsp;<a href="index.html">Welcome page</a></p>
        

        Tschö, Auge

        --
        Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
        Terry Pratchett, "Wachen! Wachen!"
        ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
        Veranstaltungsdatenbank Vdb 0.3
        1. Hallo Auge und CrisB,
          Besten Dank für eure Vorschläge.

          Ich wollte eben verhindern, dass ich 2x die id="language" nehme, das der Validator als Fehler angibt. (ich habe sie doch 2x genommen).
          Das meckert der Validator nicht ohne Grund an. Eine ID muss im Dokument einmalig sein.
          In diesem Fall muss ich wohl extra eigene id/class schreiben für diesen einen Link (resp dieselbe Formatierung mit anderer id/class benennen), oder?
          Wie wär's, aus der ID eine Class zu machen?

          meinst du generell? das wurde mir von Matthias vorgeschlagen, aber dazu bin ich noch nicht gekommen, das muss ich gut planen, nicht dass das ganze auseinanderfällt.

          Und, wie bringe ich den Link Welcome page hinter den Text "or go to", wenn möglich so, dass der Link nicht mit grossem Abstand rechts im div steht, sondern gerade nach dem Text kommt.
          Eine Liste mit nur einem Element ist fragwürdig. Mach daraus einen Link innerhalb des Textes innerhalb eines Absatzes.

          ja, das dachte ich auch. bin eben noch ganz in der liste stecken geblieben wegen der Formatierung.

          <div class="info">To go or return to the start page of your language, click on the corresponding language button

          <!-- Liste -->
          <p>or go to the&nbsp;<a href="index.html">Welcome page</a></p>

            
          Ich habe deinen Vorschlag genommen (ist ja ähnlich dem von ChrisB, ausser dass er noch ein aside drin hat). Sieht gut aus.  
            
          ein Frage hätte ich noch: warum werden die Sprachbuttons in umgekehrter Reihenfolge angezeigt, wie ich sie geschrieben habe? Wie kann ich die Reihenfolge definieren? (also: d, f, e , ru, oder einfach so, wie ich sie im html schreibe)  
            
          Vielen Dank,  
          bari.
          
          1. Hallo

            In diesem Fall muss ich wohl extra eigene id/class schreiben für diesen einen Link (resp dieselbe Formatierung mit anderer id/class benennen), oder?
            Wie wär's, aus der ID eine Class zu machen?

            meinst du generell? das wurde mir von Matthias vorgeschlagen, aber dazu bin ich noch nicht gekommen, das muss ich gut planen, nicht dass das ganze auseinanderfällt.

            Ohne die zweite Liste brauchst du diesen Umbau nicht. Wenn aber mehrere (technisch) gleichartige Elemente gleichartigen Inhalt aufnehmen sollen, ist eine Klasse angebracht (generell). Dies natürlich auch nur, wenn sie, z.B. für das Ansprechen mit CSS oder JS, gebraucht wird.

            ein Frage hätte ich noch: warum werden die Sprachbuttons in umgekehrter Reihenfolge angezeigt, wie ich sie geschrieben habe? Wie kann ich die Reihenfolge definieren? (also: d, f, e , ru, oder einfach so, wie ich sie im html schreibe)

            Frundsätzlich werden Elemente in ihrer Reihenfolge im Quelltext ausgegeben. Wenn das bei dir nicht so ist, hast du explizit etwas dagegen getan. Um das herauszufinden, brauchen wir mehr Quelltext (CSS).

            Tschö, Auge

            --
            Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
            Terry Pratchett, "Wachen! Wachen!"
            ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
            Veranstaltungsdatenbank Vdb 0.3
            1. ein Frage hätte ich noch: warum werden die Sprachbuttons in umgekehrter Reihenfolge angezeigt, wie ich sie geschrieben habe? Wie kann ich die Reihenfolge definieren? (also: d, f, e , ru, oder einfach so, wie ich sie im html schreibe)

              Frundsätzlich werden Elemente in ihrer Reihenfolge im Quelltext ausgegeben. Wenn das bei dir nicht so ist, hast du explizit etwas dagegen getan. Um das herauszufinden, brauchen wir mehr Quelltext (CSS).

              Fehler gefunden, zweimal float: right, einmal in ul und einmal in li.

              Besten Dank,
              bari.

      2. vielleicht so auf die Schnelle …

        <style>  
        ul, li, p {  
            margin: 5px 0;  
            padding: 0 5px;  
        }  
        nav, aside {  
            display: inline-block;  
            vertical-align: bottom;  
            max-width: 400px;  
            margin-left: 20px;  
        }  
        </style>
        
        <p>To go or return to the start page of your language,  
        click on the corresponding language button</p>  
        <nav>  
            <ul>  
                <li><a href="de/index.html">Deutsch</a></li>  
                <li><a href="en/index.html">English</a></li>  
                <li><a href="fr/index.html">Français</a></li>  
                <li><a href="ru/index.html">Русский</a></li>  
            </ul>  
            <p>or go to the</p>  
        </nav>  
        <aside>  
            <ul>  
                <li><a href="index.html">Welcome page</a></li>  
            </ul>  
        </aside>
        

        wenn ich dich richtig verstanden habe…