nicht angemeldet
<div id="box" style="position:absolute;left:0px;top:10px;>Box1</div>
<div id="box" style="position:absolute;left:10px;top:10px;>Box2</div>
<div id="box" style="position:absolute;left:20px;top:10px;>Box3</div>
>
>
> So würde es aussehen wenn ein Div 10px breit wär.
> Ich denke du verstehst was ich meine.
> Ganz wichtig ist dabei "position:absolute;" Da die Positionierung sonst nicht funktioniert.
>
> Grüße
Vielen Dank für die schnellen Tipps.
Das Problem mit der Waagerechtstellung der Bilder konnte ich lösen, die kleinen Thumbnails sind nun wie gewünscht positioniert.
Doch bei der Mouseover Funktion gibt es ein Problem in der Positionierung der vergrößerten Ansicht.
Da die Bildleiste aus bis zu 10 Bildern besteht wandert bei der jeweils nächsten Vergößerung die Abbildung immer um die Größe des vorherigen Thumbnail nach rechts.
Es wirkt wie eine starre Verbindung zwischen Thumbnail und Vergrößerung, die immer den gleichen vorher fixierten Abstand aufweist.
Da aber die Abbildungen immer in der gleichen Position erscheinen sollen bitte ich um Hilfe wie ich das einfach umsetzen kann.
(Bin leider kein HTML Profi, bitte um Nachsicht!)
Beispiel hier nur mit 3 Bildern:
~~~html
<head>
<style type="text/css">
<!--
img {
border:none;
}
#box{
height:75px;
width:95px;
padding:0;
margin:0px;
font:bold 14px verdana, sans-serif;}
#box div{display:none;}
#box:hover div{
display:block;
width:300px;
position:absolute;bottom:120px;left:680px;
padding:0px;
font:normal 14px verdana, sans-serif;}
-->
</style>
</head>
<body>
<div id="box" style="position: absolute; left: 140px; top: 550px;">
<a href="#"><img style="width: 95px; height: 75px;" alt="Bild1.jpg" src="Bild1.jpg">
</a><div><p><a href="#"><img src="Bild1-big.jpg" alt="Bild1-big.jpg" height="307" width="410"></a></p></div></div>
<div id="box" style="position: absolute; top: 550px; left: 237px;">
<a href="#"><img style="width: 95px; height: 75px;" alt="Bild2.jpg" src="Bild2.jpg">
</a><div><p><a href="#"><img src="Bild2-big.jpg" alt="Bild2-big.jpg" height="307" width="410"></a></p></div></div>
<div id="box" style="position: absolute; left: 334px; top: 550px;">
<a href="#"><img style="width: 95px; height: 75px;" alt="Bild3.jpg" src="Bild3.jpg">
</a><div><p><a href="#"><img src="Bild3-big.jpg" alt="Bild3-big.jpg" height="307" width="410"></a></p></div></div>
</body>
Schöne Grüße Roy
Marc