Zur Navigation

<div> Konstrukt

1 Gustafsson

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








gruß uwe

24.04.2006 17:17

2 C)-(iLL@

möchte ich gern im div #dreigestirn 6 keinere divs einfügen (siehe bild wenn jörg so nett ist :-)
So klingt ja nicht sehr schwer... die Anordnung erklären oder kurz mit [ code ] - und Ascii-Sternchen malen kannst Du es nicht? :) Viele Möglichkeiten gibt es bei 6 gleich großen divs ja nicht...
1 Zeilen, 6 Spalten
2 Zeilen, 3 Spalten
3 Zeilen, 2 Spalten
6 Zeilen, 1 Spalte

hab ich was vergessen? ^^

24.04.2006 17:33 | geändert: 24.04.2006 17:42

3 Lotti

"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....

24.04.2006 17:52

4 Jörg

Hier kann man Uwes Entwurf sehen:

http://www.html-fuer-brot.de/images/div-vorschaltseite.gif

24.04.2006 19:10

5 C)-(iLL@

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

24.04.2006 19:27 | geändert: 24.04.2006 19:28

6 Gustafsson

oh ja entschuldigt, auf die idee das bild bei mir zu verlinken bin ich natürlich nicht gekommen im eifer des gefechts ;-))
dachte von hier aus wäre es besser.

vielen vielen dank für die hilfe ich werde mich in den nächsten stunden an die umsetzung machen

herzlichen gruß und nochmals danke

gruß uwe

24.04.2006 19:57

7 Jörg

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>

24.04.2006 20:04 | geändert: 24.04.2006 20:05

8 C)-(iLL@

Kürzer ist immer besser, da habe ich nix einzuwenden :)

24.04.2006 20:09

9 Gustafsson

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


gruß uwe

25.04.2006 00:59

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]