Liste mit float:left Elementen Problem

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Liste mit float:left Elementen Problem

    hi

    Weiss nicht genau wie ich das Problem beschreiben könnte.
    Drum versuch ich es lieber zu illustrieren.

    Habe einen <div>, mit Rahmen und Hintergrundfarbe. Darin befindet sich eine Liste (<ul>) mit Elementen (<li><img></li>). Die Elemente (<li>) haben float:left bekommen, damit sie nicht untereinander, sondern solange der Platz vorhanden ist, nebeneinander erscheinen.

    Jetzt sollte der <div> entsprechend wachsen.
    Leider tut er das nur, wenn die Elemente den float:left Wert nicht haben.

    Aussehen tut das so:


    Der HTML Code ist dieser:
    Code:
    <div class='divliste'>
    <h3>Fotografien: </h3>
    <ul>
    <li><img src='../icons/1242029300.jpg'></li>
    <li><img src='../icons/1242029300.jpg'></li>
    
    <li><img src='../icons/1242029300.jpg'></li>
    <li><img src='../icons/1242082483.jpg'></li>
    <li><img src='../icons/1242029300.jpg'></li>
    <li><img src='../icons/1242029300.jpg'></li>
    <li><img src='../icons/1242029300.jpg'></li>
    <li><img src='../icons/1242084824.jpg'></li>
    </ul>
    </div>
    CSS folgender:
    Code:
    .divliste{
    background-color: #EEE; 
    border-color: #CCC;
    border-width: 2px;
    border-style: solid;
    width: 100%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
    }
    
    .divliste h3{
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
    }
    
    .divliste h3 span a{
    font-size: .7em;
    margin-left: 10px;
    position: relative;
    top: -3px;
    right: 0px;
    text-decoration: none;
    color: #777;
    }
    
    .divliste ul{
    width: 500px;
    margin: 0px;
    padding: 0px;
    }
    
    .divliste ul li{
    padding: 0;
    margin: 0;
    margin-right: 10px;
    list-style: none;
    float: left;
    }

  • #2
    Zitat von fabio Beitrag anzeigen
    Weiss nicht genau wie ich das Problem beschreiben könnte.
    Am besten mit: "Ich habe wie so viele andere vor mir die Auswirkungen von Float nicht verstanden".

    Jetzt sollte der <div> entsprechend wachsen.
    - Div ebenfalls floaten, oder
    - clearendes Element hinter Liste einfügen, oder
    - Div einen einen overflow-Wert abweichend vom Defaultwert verpassen, um einen block formatting context zu erzeugen.
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar


    • #3
      Zitat von wahsaga Beitrag anzeigen
      - clearendes Element hinter Liste einfügen
      Danke hat geklappt.
      Habe versucht, den Clear:left am <ul> zuzuteilen, und die <li> mit float:left

      Anyway, danke.
      PS: schön das neue Gewand von PHPR

      Kommentar

      Lädt...
      X