Div-Tags statisch untereinander positionieren

Hallo!
Ich habe folgendes Problem:
Ich möchte Div-Tags (welche wiederrum Div-Tags beinhalten) untereinander statisch darstellen (also dass ich den Inhalt dynamisch erstellen kann). Deshalb kann ich den einzelnen Div-Tags keine fixe top-, bzw. left-Information zuweisen. Habt ihr möglicherweise einen Tipp für mich?
Zurzeit bin ich so weit:

Code:

  <div style="position:absolute; width:115px; height:115px; border:thick;">
	  <div style="position:absolute; z-index:10; top:10px; left:10px; width:auto; height:auto;"><img src="1/thumb_image2.jpg" /></div>
	  <div style="position:absolute; z-index:10; top:20px; left:20px; width:auto; height:auto;"><img src="1/thumb_image2.jpg" /></div>
	  <div style="position:absolute; z-index:10; top:30px; left:30px; width:auto; height:auto;"><img src="1/thumb_image2.jpg" /></div>
  </div>

Das nächste Div soll nun einfach darunter stehen.

Ps: Das ganze soll als Fotoalbum-Preview dienen. Falls jemand da etwas vorgefertigtes kennt (z.b. in jQuery) so würde es das auch tun. Mir ist nur wichtig, dass mehrere Bilder (hintereinander) angezeigt werden, sodass man einen Eindruck des Albums bekommt.

 

Hallo,

du kannst nicht jedem Bild den gleichen z-index zuweisen.
Ich habe das incl. Hover-Effekteffekt so gelöst.

HTML:

<div id="left">
			<a href="/abc"><img src="thumbs/thumb_1.JPG" width="400px" height="300px" class="img_thumbnail_img" style="z-index: 1;" onMouseOver="style.zIndex=5" onMouseOut="style.zIndex=1"></a>
			<a href="/abc"><img src="thumbs/thumb_2.JPG" width="400px" height="300px" class="img_thumbnail_img" style="margin: 100px 0 0 100px; z-index: 2;" onMouseOver="style.zIndex=5" onMouseOut="style.zIndex=2"></a>
			<a href="/abc"><img src="thumbs/thumb_3.JPG" width="400px" height="300px" class="img_thumbnail_img" style="margin: 200px 0 0 50px; z-index: 3;" onMouseOver="style.zIndex=5" onMouseOut="style.zIndex=3"></a>
			<a href="/abc"><img src="thumbs/thumb_4.JPG" width="400px" height="300px" class="img_thumbnail_img" style="margin: 300px 0 0 150px; z-index: 4;" onMouseOver="style.zIndex=5" onMouseOut="style.zIndex=4"></a>
	</div>

Code:

.img_thumbnail_img { padding: 7px; border: 2px solid #eee; margin: 0 0 6px; background: #fff; position: absolute;}

Wobei jedes Bild ein Vorschaubild für ein Fotoalbum ist, die Alben werden dann mit lightbox dargestellt.

Mylin

 

Danke für deine Anwort,
ich schau sie mir heute noch an.

Wegen den z-index Werten hast du natürlich recht. War von mir ein Flüchtigkeitsfehler.

lg,
mannyk

 

Das geht schon, nur wird der z-index dann jeweils durch das neue Element überschrieben - d.h. früher ausgegebene Elemente bekommen dann automatisch einen (meist) höheren z-index, was natürlich zu nicht gleich nachvollziehbaren Phänomenen führen kann.

 

... es sei denn er deklariert die Position als relativ und legt die Startposition fest?!

 

Hi Mylin,

ich meine mit Preview einen "3er pack von überlagerten Bildern", nicht ein einzelnes Bild.

habe deinen code nun ausprobiert, aber ich hab es trotzdem nicht geschafft zwei previews untereinander zu bekommen.

Idealerweise hätte ich das gern so gehabt, dass die beiden Previews untereiander stehen, wenn ich den Code nur verdopple

Code:

<div id="left1" style="position:static;">
			<a href="/abc"><img src="1/thumb_image2.jpg" width="72px" height="72px" class="img_thumbnail_img" style="z-index: 1;" onMouseOver="style.zIndex=5" onMouseOut="style.zIndex=1"></a>
			<a href="/abc"><img src="1/thumb_image2.jpg" width="72px" height="72px" class="img_thumbnail_img" style="margin: 20px 0 0 20px; z-index: 2;" onMouseOver="style.zIndex=5" onMouseOut="style.zIndex=2"></a>
			<a href="/abc"><img src="1/thumb_image2.jpg" width="72px" height="72px" class="img_thumbnail_img" style="margin: 40px 0 0 40px; z-index: 3;" onMouseOver="style.zIndex=5" onMouseOut="style.zIndex=3"></a>
</div>

<div id="left2" style="position:static;">
			<a href="/abc"><img src="1/thumb_image2.jpg" width="72px" height="72px" class="img_thumbnail_img" style="z-index: 1;" onMouseOver="style.zIndex=5" onMouseOut="style.zIndex=1"></a>
			<a href="/abc"><img src="1/thumb_image2.jpg" width="72px" height="72px" class="img_thumbnail_img" style="margin: 20px 0 0 20px; z-index: 2;" onMouseOver="style.zIndex=5" onMouseOut="style.zIndex=2"></a>
			<a href="/abc"><img src="1/thumb_image2.jpg" width="72px" height="72px" class="img_thumbnail_img" style="margin: 40px 0 0 40px; z-index: 3;" onMouseOver="style.zIndex=5" onMouseOut="style.zIndex=3"></a>
</div>

Leider sind beide divs (left1 und left2) übereiander und nicht untereinander.
lg,
mannyk

 

Wie wäre es mit einer neuen Zeile?

 

tja, so kanns gehen.
Danke