erledigt!!! - Bild mit Mouseover nach oben

Hallo,

ich habe auf meiner Seite (Galerie) 2 Reihen Thumbnails, die durch überfahren mit der Maus nach unten hin die Fotos in groß zeigen.

Mein Problem: Ich kann ändern was ich will, die Bilder werden nach unten angezeigt. Ich hätte aber gerne, dass die Fotos nach OBEN gezeigt werden, da ich die 2. Reihe ganz nach unten platzieren wollte mit Ausrichtung nach oben. Wie und was muss ich an dem Code ändern?

Danke im Voraus....


<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0px 0px 0px 0px;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: ghostwhite;
padding: 5px;
left: -1000px;
border: 1px black;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 80px;
left: 100px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>
<div align="center">
<table width="600" height="50" cellspacing="0" cellpadding="1" border="0">
<tbody>
<tr>
</tr>
<tr>
<td width="100%" align="center">
<div class="gallerycontainer">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<a class="thumbnail" href="#thumb"><img width="45" height="45" border="0" alt="" src="http://img.webme.com/pic/a/akiralea/1-1.jpg" /><span><img alt="" src="http://img.webme.com/pic/a/akiralea/20091105002.jpg" /></span></a>
</td>
</tr>
</tbody>
</table>
</div>
______________

hier die Lösung:

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0px 0px 0px 0px;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: ghostwhite;
padding: 5px;
left: -1000px;
border: 1px black;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -390px;
left: 120px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>
<div align="center">
<table width="600" height="50" cellspacing="0" cellpadding="1" border="0">
<tbody>
<tr>
</tr>
<tr>
<td width="100%" align="center">
<div class="gallerycontainer">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<a class="thumbnail" href="#thumb"><img width="45" height="45" border="0" alt="" src="http://img.webme.com/pic/a/akiralea/1-1.jpg" /><span><img alt="" src="http://img.webme.com/pic/a/akiralea/20091105002.jpg" /></span></a>
</td>
</tr>
</tbody>
</table>
</div>


Grüssle aus Klein Paris
______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur

Das klappt leider nicht. Wenn ich diese Werte verändere, tut sich gar nichts. Das habe ich alles ja schon versucht.

Ich nehme mal stark an, dass man nicht zwei mal den Code mit anderen Werten auf einer Seite einstellen kann. Es wird dann scheinbar immer die Einstellung des ersten Codes genommen.

Vielleicht meldet sich ja noch jemand, der sich damit auskennt *hoff*.
______________

Das hat sich erledigt. Es geht nicht auf einer Seite zwei verschiedene Einstellungen zu nehmen.

Ich habe den kompletten Anfang des Codes Nr. 2 entfernt und es wird genauso angezeigt wie vorher. Spricht also für die Annahme, nur eine Einstellung pro Seite.
______________