✔ div Position Bilder überlagern

[ciberjoerg]

Wie kann ich mit div Positionierungen Bilder übereinander anzeigen lassen?

<div id="main" style="top:0px;left:0;width:26;height:38.5;border:0 solid blue;">
<img src="images/sb1.png" width="26" height="39" border="0"></div>
<div id="main" style="top:27.5px;left:0;width:26;height:41;border:0 solid blue;">
<img src="images/sb2.png" width="26" height="41" border="0"></div>
<div id="main" style="top:57.5px;left:0;width:26;height:41;border:0 solid blue;">
<img src="images/sb3.png" width="26" height="41" border="0"></div>
<div id="main" style="top:87.5px;left:0;width:26;height:41;border:0 solid blue;">
<img src="images/sb4.png" width="26" height="41" border="0"></div>
<div id="main" style="top:117.5px;left:0;width:26;height:41;border:0 solid blue;">
<img src="images/sb5.png" width="26" height="41" border="0"></div>
<div id="main" style="top:148.1px;left:0;width:26;height:28.1;border:0 solid blue;">
<img src="images/sb6.png" width="26" height="28" border="0"></div>

So werden alle bilder nur übereinander angezeigt, aber die eigentliche positionierung soll = top sein.
also Bild 1 =0
Bild2 = 27.5px
Bild3 = 57.5px
usw...
Wie stell ich das am besten an?

Hab leider mit div noch nie groß was gemacht daher nicht viel ahnung

 

[Sprint]

Du mußt ihnen noch ein position: absolute mitgeben, sonst stapeln sich die Dinger nie. Außerdem (hat mit dem Problem aber nichts zu tun) sollte eine ID immer einmalig sein, also ändere hier auf class="main".

 

[Maik]

Moin,

zudem fehlen jeweils im CSS zur width und height-Eigenschaft die Angabe zur Maßeinheit - exemplarisch für das erste DIV:

<div class="main" style="top:0px;left:0;width:26px;height:38.5px;">
<img src="images/sb1.png" width="26" height="39" border="0"></div>

Für die Klasse .main kannst du im zentralen CSS alle gleichlautenden Regeln angeben:

.main {
position:absolute;
left:0;
width:26px;
border:0 solid blue;
}

<div class="main" style="top:0px;height:38.5px;">
<img src="images/sb1.png" width="26" height="39" border="0"></div>
<div class="main" style="top:27.5px;height:41px;">
<img src="images/sb2.png" width="26" height="41" border="0"></div>
<div class="main" style="top:57.5px;height:41px;">
<img src="images/sb3.png" width="26" height="41" border="0"></div>
<div class="main" style="top:87.5px;height:41px;">
<img src="images/sb4.png" width="26" height="41" border="0"></div>
<div class="main" style="top:117.5px;height:41px;">
<img src="images/sb5.png" width="26" height="41" border="0"></div>
<div class="main" style="top:148.1px;height:28.1px;">
<img src="images/sb6.png" width="26" height="28" border="0"></div>

mfg Maik

 

[ciberjoerg]

Okay soweit ist das ganze ja super aber wie mach ich das nun wenn ich das in ner Tabelle haben möchte?
Nur noch eine kurze frage wie mach ich denn so nette Links die ich irgendwo auf einem Bild positionieren kann?

 

[Maik]

Redest du von solch einem Modell?

<div class="main" style="top:0px;left:0;width:26px;height:38.5px;">
    <img src="images/sb1.png" width="26" height="39" border="0">
    <a href="#">Link </a>
</div>

Der Verweis wird dann ebenso mit Positionsangaben über dem Bild ausgerichtet.

Wenn sich alles innerhalb einer Tabellenzelle abspielen soll, wäre ein weiterer übergeordneter DIV-Block vonnöten, der alle genannten DIVs umschließt und relativ positioniert ist, damit sich alle absolute Positionsangaben auf seine Boxenränder beziehen, und somit relativ verhalten.

mfg Maik

 

[ciberjoerg]

okay hat sich erledigt danke