<div> Konstrukt

so freunde der nacht ;-)

eine etwas verzwickte für mich noch nicht lösbare aufgabe - also etwas für spezialisten und herrscher über <div> und css ;-)

folgendes:
in diesem div...

#dreigestirn { float:right; width: 350px; height: 350px; margin-top: 10px;}

das sich in diesem div befindet

#background { margin:auto; width: 790px; background-color: #ffffff; text-align:left }

möchte ich gern im div #dreigestirn 6 keinere divs einfügen (siehe bild wenn jörg so nett ist :-)

die größen, na ja alle 6 erstmal gleich die muß ich mir später anpassen, da ich nur die idee habe, nicht jedoch die entgültigen grafiken, die ändern sich noch

könnte mir da bitte jemand behilflich sein ??

danke euch schon mal

"gestirn" könnte aber auch überlappend sein, dann arbeitet man mit fixen Punkten.... Oder 6 im Kreis, dann hat man auch Punkte an denen es sich überlappt....

Also 3 Zeilen, 2 Spalten:

CSS:

div#background { margin: auto; width: 790px; background: #FFFFFF; text-align: left; }
div#dreigestirn { float: right; width: 330px; margin-top: 10px; padding: 0 0 0 20px; background: blue; height: 350px; }
div.stern { width: 145px; float: left; margin: 0 20px 20px 0; background: #ECECEC no-repeat top left; height: 98px; }
div#s4 { background: #004D33; }
div#s5 { background: #AEAEAE; }
div#s2 { background-image: url(bitte-einsetzen.jpg); }
div#s3 { background-image: url(bitte-einsetzen.jpg); }
div#s6 { background-image: url(bitte-einsetzen.jpg); }

Markup:

<div id="background">
  <div id="dreigestirn">
    <div id="s1" class="stern"></div>
    <div id="s2" class="stern"></div>
    <div id="s3" class="stern"></div>
    <div id="s4" class="stern"></div>
    <div id="s5" class="stern"></div>
    <div id="s6" class="stern"></div>
  </div>
</div>

HTH

Noch ein kleiner Verbesserungsvorschlag zu Rudys Entwurf: Die 'class="stern"' könnte man sich noch sparen und die beteffenden Divs stattdessen einfach als 'div#dreigestirn div' ansprechen:

div#dreigestirn div { width: 145px; float: left; margin: 0 20px 20px 0; background: #ECECEC no-repeat top left; height: 98px; }

Das verkürzt das Markup auf das notwendige:

<div id="background">
 <div id="dreigestirn">
   <div id="s1"></div>
   <div id="s2"></div>
   <div id="s3"></div>
   <div id="s4"></div>
   <div id="s5"></div>
   <div id="s6"></div>
 </div>
</div>

woh, ihr seid meine helden ;-) klappt ganz prima. vielen dank für eure arbeit.