Fast geschafft

[Der Martin]

Hi,

Der Code hat Divitis.
was meinst du damit?

du packst alles und jeden, jedes Element nochmal in einen div-Container ein. Das ist weder nötig noch sinnvoll.

Mir hat man doch gesagt ich soll es mit divs machen!

Die Aussage ist Quatsch. Ein div-Element ist dazu da, mehrere andere Elemente zu einem Block zusammenzufassen, und dann kann man CSS-Formatierungen auch auf die ganze Gruppe anwenden, anstatt auf jedes Element einzeln. Das heißt aber eben nicht, dass man jedes Element nochmal verpacken muss.

Ich sehe an deinem Bild des gewünschten Zustands
 * eine Überschrift (z.B. h1)
 * ein großes Bild
 * sechs kleinere Bilder, deren Sinn sich mir nicht erschließt, solange es nur
   einfarbige Rechtecke sind

Das stark vereinfachte Markup könnte also in etwa so aussehen:

<h1>Neue Unterkünfte</h1>  
  
<div id="group">  
 <img ... />  
 <div>  
  <img ... />  
  <img ... />  
  <img ... />  
  <img ... />  
  <img ... />  
 </div>  
</div>

Ich benutze hier ein div-Element, um die 6 kleinen Bilder zu gruppieren, und ein weiteres, um die gesamte Gruppe zusammenzufassen. Jetzt lass uns das noch ein bisschen stylen und anordnen:

h1  
 { border-bottom: 1px solid #888;  
   text-transform: uppercase;  
   font-weight: bold;  
 }  
div#group  
 { overflow: hidden;  
 }  
  
div#group > img  
 { float: left;  
   padding: 2px;  
 }  
div#group div  
 { padding-left: $p;  /* Plathhalter: Setze hier Breite des Bildes plus padding (plus Reserve?) ein */  
   padding: 2px;  
   max-width: $w;     /* Plathhalter: Setze hier die Gesamtbreite des Containers ein */  
 }

Das Anordnung der kleinen Bilder reguliere ich hier, indem ich die Breite des übergeordneten Containers begrenze; wenn die Werte passen, ergibt sich der Umbruch an der gewünschten Stelle von allein. Ist das Browserfenster schmaler, brechen die kleinen Bilder ggf. nur einspaltig um, bei akutem Platzmangel rutscht die ganze Gruppe der kleinen Bilder unter das große. Ist das nicht gewünscht, gib dem div#group ein passendes min-width - dann erscheint ein horizontaler Scrollbalken, wenn nötig.

Das ist ein ungetestetes Brainstorming - es soll nur zeigen, wie einfach man das Gewünschte "im Prinzip" umsetzen kann, hat aber sicher noch Verbesserungsbedarf im Detail.

Ciao,
 Martin