Hi, ich bin's wieder
Habe eine Bildergalerie, in der die Thumbs oben bei Klick drunter größer dargestellt werden.
Nun habe ich noch einen Rahmen mit Breite und Höhe festgelegt (den ich mit top:...px; positioniere), in dem die angeklickten Bilder "bottom" erscheinen sollen - nur diese sind immer oben in diesem Rahmen.
Im Internet habe ich bezüglich "horizontaler" Positionierung von Bildern nix gefunden.
Zum besseren Verständnis habe ich einen Screenshot gemacht.
Hier der Quelltext:
Wie schon erwähnt, habe ich nix dergooglt, darum bitte ich Euch, mir die richtige Richtung zu weisen.
thx im voraus
Habe eine Bildergalerie, in der die Thumbs oben bei Klick drunter größer dargestellt werden.
Nun habe ich noch einen Rahmen mit Breite und Höhe festgelegt (den ich mit top:...px; positioniere), in dem die angeklickten Bilder "bottom" erscheinen sollen - nur diese sind immer oben in diesem Rahmen.
Im Internet habe ich bezüglich "horizontaler" Positionierung von Bildern nix gefunden.
Zum besseren Verständnis habe ich einen Screenshot gemacht.
Hier der Quelltext:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title></title>
<style type="text/css">
/* needed for IE to make :active state work first time */
a, a:visited {color:#000;}
/* Thumbnails */
a.gallery, a.gallery:visited {
display:block;
display:inline-block;
color:#000;
text-decoration:none;
border:1px solid #000;
width:71px;
height:69px;
float:left;
margin:4px;
z-index:50;
}
a.slidea {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-01.jpg);}
a.slideb {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-02.jpg);}
a.slidec {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-03.jpg);}
a.slided {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-04.jpg);}
a.slidee {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-05.jpg);}
a.slidef {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-06.jpg);}
a.slideg {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-07.jpg);}
a.slideh {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-08.jpg);}
a.slidei {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-09.jpg);}
a.slidej {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-10.jpg);}
a.slidek {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-11.jpg);}
a.slidel {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-12.jpg);}
a.slidem {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-13.jpg);}
a.sliden {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-14.jpg);}
a.gallery em, a.gallery span {
display:none;
}
a.gallery:hover {
border:1px solid #fff;
}
/* Gallery all */
#container_top {
position:relative;
width:600px;
height:500px;
background:white;
border:0px solid #a49188;
margin:1em auto;
}
#container_top img {
border:0; bottom: 0px;
}
#container_top .thumbs {
position:absolute;
left:0;
top:0;
}
/*
#container_top a.gallery:hover span {
display:block;
position:absolute;
width:600px;
height:50px;
top:110px;
left:5px;
padding:5px;
font-style:italic;
color:#fff;
z-index:100;
border:0px solid #a49188;
}
*/
#container_top a.gallery:hover span:first-line {
font-style:normal;
font-weight:bold;
font-size:1.1em;
color:#000;
}
#container_top a.gallery:active, #container_top a.gallery:focus {
border:1px solid #000;
}
#container_top a.gallery:active em, #container_top a.gallery:focus em {
display:block;
position:absolute;
width:480px;
height:300px;
top:196px;
left:50px;
color:#000;
border:1px solid red;
z-index:50;
background-color: #ffffff;
text-align: center;
bottom: 0px;
}
#container_top h1 {
clear:both;
margin:0;
padding-top:400px;
text-align:center;
font-family: georgia, "times new roman", serif;
font-size:3em;
font-weight:normal;
color:#fff;
}
#container_top h1 em {
font-size:0.6em;
color:#000;
}
</style>
</head>
<body>
<div id="container_top">
<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-01.jpg" /></em></a>
<a class="gallery slideb" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-02.jpg" /></em></a>
<a class="gallery slidec" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-03.jpg" /></em></a>
<a class="gallery slided" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-04.jpg" /></em></a>
<a class="gallery slidee" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-06.jpg" /></em></a>
<a class="gallery slidef" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-07.jpg" /></em></a>
<a class="gallery slideg" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-08.jpg" /></em></a>
<a class="gallery slideh" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-09.jpg" /></em></a>
<a class="gallery slidei" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-10.jpg" /></em></a>
<a class="gallery slidej" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-11.jpg" /></em></a>
<a class="gallery slidek" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-12.jpg" /></em></a>
<a class="gallery slidel" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-13.jpg" /></em></a>
<a class="gallery slidem" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-14.jpg" /></em></a>
<a class="gallery sliden" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-15.jpg" /></em></a>
</div>
<table width="600" height="500" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="47" height="330" valign="bottom">
<img src="http://stot.linux3.webhome.at/fotos/texte-website.jpg">
<td align="center" valign="bottom" height="300">
<img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-01.jpg" width="367" height="267" />
</td>
</tr>
</table>
</div>
</body>
</html>
Wie schon erwähnt, habe ich nix dergooglt, darum bitte ich Euch, mir die richtige Richtung zu weisen.
thx im voraus