Guten Morgen liebe User,
Also ich bin dabei eine Bildergalerie zu erstellen.
Jetzt funktioniert das soweit auch alles, jedoch sollte die Galerie schon 40 Bilder beinhalten.
Und jetzt zu meinem Problem:
Meine "Navi" mit den kleinen Bildern sollte mir in einem kleinen div oder so angezeigt werden,
sodass ich mit einer Scrollbar dort das Bild wählen kann und dann das Bild in einem unterem div angezeigt bekomme.
Jedoch klappt das nich Zumindest bekomme ich das nicht hin.
Ich hoffe ihr könnt mir helfen
Style
Code
<style type="text/css">
a, a:visited, a:hover {}
#container {position:relative; width:706; height:620px; background:#FFFFFF; border:0px solid #000; margin:10px auto; font-family:verdana, arial, sans-serif; font-size:12px;}
#container a.pics {float:left; padding:7px 19px; display:inline; color:#000; text-decoration:none; width:75px; height:75px; cursor:default;}
#container a.pics img.thumb {display:block; border:1px solid #000;}
#container a.pics span {display:none; border:0; width:662px; background:#FFFFFF; border:1px solid #fff; text-align:center;}
#container a.pics span img {margin:10px auto; border:1px solid #000;}
#container a.pics:hover {white-space:normal;}
#container a.pics:hover img.thumb {border:1px solid #fff;}
#container a.pics:hover span {display:block; position:absolute; left:19px; top:100px; z-index:10; height:500px;}
#container a.pics:active img.thumb {border:1px solid #fc0;}
#container a.pics:active span {display:block; position:absolute; left:19px; top:100px; z-index:5; height:500px;}
#container a.pics:focus {outline:0;}
#container a.pics:focus img.thumb {border:1px solid #fc0}
#container a.pics:focus span {display:block; position:absolute; left:19px; top:100px; z-index:5; outline:0; height:500px;}
#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; width:600px; text-align:center; color:#eee; z-index:1;}
#container span.info a {color:#000;}
#container span.info a:hover {text-decoration:none;}</style>
Alles anzeigen
HTML- Body
HTML
<div id="container">
<a class="pics" href="#nogo">
<img class="thumb" height="75" alt="" width="100" src="1.jpg" />
<span>
<img title="" height="480" alt="" width="640" src="1.jpg " /><br />
</span>
</a>
<a class="pics" href="#nogo">
<img class="thumb" height="75" alt="" width="100" src="2.jpg" />
<span>
<img title="" height="480" alt="" width="640" src="2.jpg" /><br />
</span>
</a>
<a class="pics" href="#nogo">
<img class="thumb" height="75" alt="" width="100" src="3.jpg" />
<span>
<img title="" height="480" alt="" width="640" src="3.jpg" /><br />
</span>
</a>
</div>
Alles anzeigen