Div als Mutterelement definieren

[Katzehuhn]

Ich hoffe mal ich hab nen richtigen Titel-
Ich habe ein Div das 420x420 Pixel ist und in der Mitte angeordnet wird. Das Div hat keine Position darstellung.
Innerhalb dieses Divs hab ich mehrere kleinere Divs mit Position:absolute.
Wie bekomme ich es hin das die kleineren Divs(mit Position:absolute) innerhalb vom ersten Div dargestellt werden und nicht oben links am Bildschirm "herumhängen";
so ca schaut dies aus:

 <div align="center" width="420" height="420">
 <div style="postion:absolute; widht:60; height:60; left:60; top:120;><img src....></div>
 <div style="postion:absolute; widht:60; height:60; left180; top:120;><img src....></div>
 usw.... ( diese divs sollen das erste div als Mutterdiv ansehen und nicht die obere linke Browser-Ecke, aja und ich möchte dem erste Div keine absolute Position zuweisen);
 </div>

Danke für eure Hilfe!

 

[qu1et]

eventuell so (gibt bestimmt elegantere Methoden):

     <div align="center" width="420px" height="420px">
     <div style="float: left; margin: 120px 0 0 60px; widht:60; height:60;><img src....></div>
     <div style="float: left; margin: 120px 0 0 120px; widht:60; height:60;><img src....></div>
     <div style="clear: both;"> </div>
     </div>

 

[Katzehuhn]

ich hab den ersten Div jetzt weggemacht und stattdesen eine Table gemacht. Kann mir niemand sagen wie ich das hinbekomm das diese Tabelle als Mutterelement angesehn wird und sich die anderen Divs daran orientieren?

 

[Maik]

Grundsätzlich gilt:

Bei Angaben zu den CSS-Eigenschaften width,height,top,left, die grösser als 0 sind, muss eine Einheit, z.B. px, notiert werden, bei den Attributen width,height wird keine Einheit notiert:

<div align="center" width="420" height="420">
     <div style="float: left; margin: 120px 0 0 60px; width:60px; height:60px;"><img src....></div>
     <div style="float: left; margin: 120px 0 0 120px; width:60px; height:60px;"><img src....></div>
     <div style="clear: both;"> </div>
</div>

[editpost]

'Konsequente' CSS-Formatierung für alle DIVs:

<div style="width:420px; height:420px; text-align:center;">
     <div style="float: left; margin: 120px 0 0 60px; width:60px; height:60px;"><img src....></div>
     <div style="float: left; margin: 120px 0 0 120px; width:60px; height:60px;"><img src....></div>
     <div style="clear: both;"> </div>
</div>

• Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50

 

[hela]

Hallo Katzehuhn,

du könntest auch den umschließenden DIV-Block relativ positionieren.

 

[Katzehuhn]

was ich vergessen hab dazuzusagen war das das erste div mit Bildern vollständig ausgefüllt ist.
ca so
# = ein bild
<div name=static>
# # # # # # #
# # # # # # #
# # # # # # #
# # # # # # #
# # # # # # #
<div absolute1></div>
<div absolute2></div .........
// dieses Div soll nun über einen dieser Bilder platziert werden, das problem ist nur das dieses div nicht inerhalb des static divs dargestellt wird sondern links oben am bildschirm
</div>

Wenn ich das static bild als absolutes darstelle Funktioniert das wunderbar, dann richten sich die anderen Divs daran aus. Nur will ich das nicht weil das div sich dann nicht mehr von anderen Beeinflussen liese.
Danke für eure hilfe^^

 

[Maik]

Wenn Kinder-DIVs in einem Eltern-DIV absolut positioniert werden sollen, muss das übergeordnete DIV ebenfalls positioniert werden, absolut oder relativ.

CSS-Code:

div#main
{
position: relative;
left: 10px;
top: 10px;
width: 420px;
height: 420px;
border: 1px solid #000;
}

div#box1
{
position: absolute; 
left: 60px; 
top: 120px; 
width: 60px; 
height: 60px; 
border: 1px solid #000;
}

div#box2
{
position: absolute; 
left: 180px; 
top: 120px; 
width: 60px; 
height: 60px; 
border: 1px solid #000;
}

<div id="main">

 <div id="box1"><img src....></div>
 <div id="box2"><img src....></div>

</div>