float des parent auflösen

[Melanie]

Hallo,

ich arbeite mit dem LMS Moodle und habe mir da eine Sektion mit handgemachten "Badges" eingerichtet.

Der Code der Sektion sieht in etwas so aus (Überflüssige Div-Schachtelungen hab ich jetzt mal rausgenommen):

  
<ul class=section img-text">  
  <li id="module-2141141" class="activity label modtype_label">  
    <div><p><img ...></p></div>  
  </li>  
 <li id="module-2141142" class="activity label modtype_label">  
    <div><p><img ...></p></div>  
  </li>  
  
</ul>  

Erst in die <p>-Elemente oder darunter kann ich Code einschleusen. Hier habe ich auch die Badges als Bilder eingefügt. Damit diese nicht untereinander, sondern nebeneinander erscheinen, habe ich über eine eingebundene css-Datei für die li-Elemente float:left und width:150px eingefügt. Funktioniert hervorragend, alle li-Elemente erscheinen nebeneinander.

Leider möchte ich gerne gruppieren, so dass nach manchmal 4, manchmal 6 Bildern ein Zeilenumbruch erfolgt. Ich müsste also eigentlich ein clear:left o.ä. zwischendrin einfügen. Leider kann ich ja an das li-Element nicht heran (und es ist ja auch nicht immer das gleiche), sondern nur an eines der Kinder-Elemente. Hier hilft mir das clear ja nicht.
Hat jemand eine Idee, wie man das eventuell verwirklichen könnte?

Es wäre toll, wenn mir hier jemand weiterhelfen könnte.
Vielen Dank,
Melanie

[Gunnar Bittersmann]

@@Melanie:

nuqneH

Leider möchte ich gerne gruppieren,

Ja, wirklich schade.

so dass nach manchmal 4, manchmal 6 Bildern ein Zeilenumbruch erfolgt.

Wovon hängt das ab?

Leider kann ich ja an das li-Element nicht heran

Mit CSS kommst du ran: Pseudoklasse :nth-child, außerdem haben die li eine ID.

Hat jemand eine Idee, wie man das eventuell verwirklichen könnte?

Wenn du etwas genauer sagen könntest, was „das“ ist …

Qapla'

[Melanie]

Danke für die schnelle Antwort.

so dass nach manchmal 4, manchmal 6 Bildern ein Zeilenumbruch erfolgt.

Wovon hängt das ab?

Das hängt vom Unterrichtstoff ab. In Englisch wäre das Unit 1, neue Zeile, dann Unit 2. Für die Units kann es aber unterschiedlich viele Badges geben.

Leider kann ich ja an das li-Element nicht heran

Mit CSS kommst du ran: Pseudoklasse :nth-child, außerdem haben die li eine ID.

Ich weiß, dass eine ID da ist, aber ich bin nicht sicher, ob die gleich bleibt, auch wenn neue Aktivitäten dazukämen.
Das mit dem :nth-child kannte ich noch nicht, das sehe ich mir auf jeden Fall mal an.

Hat jemand eine Idee, wie man das eventuell verwirklichen könnte?

Wenn du etwas genauer sagen könntest, was „das“ ist …

Naja, das Float an der nötigen Stelle zu unterbrechen, so dass ein Zeilenumbruch entsteht - am liebsten durch ein Leer-li-Element, bei dem ich in den <div>-Bereich Code einfüge.

[Gunnar Bittersmann]

@@Melanie:

nuqneH

Das hängt vom Unterrichtstoff ab. In Englisch wäre das Unit 1, neue Zeile, dann Unit 2. Für die Units kann es aber unterschiedlich viele Badges geben.

Und wie hängen die IDs mit den Units zusammen?

Mit dem Attributselektor könnte man auch auf den Anfang einer ID gehen: [id^="…"].

Naja, das Float an der nötigen Stelle zu unterbrechen, so dass ein Zeilenumbruch entsteht - am liebsten durch ein Leer-li-Element

?? Nei-en. Kein unsinniges „Leer-li“, sonder clear an der richtigen Stelle.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Melanie!

Leider möchte ich gerne gruppieren, so dass nach manchmal 4, manchmal 6 Bildern ein Zeilenumbruch erfolgt. Ich müsste also eigentlich ein clear:left o.ä. zwischendrin einfügen. Leider kann ich ja an das li-Element nicht heran (und es ist ja auch nicht immer das gleiche), sondern nur an eines der Kinder-Elemente. Hier hilft mir das clear ja nicht.
Hat jemand eine Idee, wie man das eventuell verwirklichen könnte?

Wenn ich dich richtig verstehe, suchst du http://wiki.selfhtml.org/wiki/Nth-child.

Matthias

[Melanie]

Hallo Matthias,

Wenn ich dich richtig verstehe, suchst du http://wiki.selfhtml.org/wiki/Nth-child.

vermutlich ja, vielen Dank.

Gruß,
Melanie