How to move images Options

[xxkasperxx]

how do i put the images were i want? heres my code.

CODE

<style type="text/css">



.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

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

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

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 150px; /*position where enlarged image should offset horizontally */

}

</style>

<!-- Start Pics -->
<a class="thumbnail" ><img src="images/images/raj_1.png" width="150px" height="100px" border="0" /><span><img src="images/images/raj_1_enlarge.png" /></span></a>
<a class="thumbnail" ><img src="images/images/raj_1.png" width="150px" height="100px" border="0" /><span><img src="images/images/raj_1_enlarge.png" /></span></a>    

the live site is "www.[removed per request from xxkasperxx].org" i need that to work on the Photos page.

[Frederiek]

It seems you copied that code from somewhere, hence the comments in the CSS. Did that go with an exemple to enlarge the images that way? Can you post the url to that? Besides, you don't have that code in your page and the enlarged image isn't on the server either. Can you post the url of a test page?

Anyway, usually javascript (often the jQuery library) is used for such things, especially to position the enlarged image as an overlay (usually centered) on the page, eg : Lightbox , Fancybox, FancyZoom and Stu Nicholls has some nice exemples of his own "lightbox" too (search for the word "lightbox" on the page).

[Darin McGrew]

how do i put the images were i want?

That depends on what you want to do differently than what you're doing now. If it were my site, I'd get rid of all the absolute positioning.

[rasha666]

try to add class with this :
You can change name of class if you want

.imgmove
{
position:absolute;
top:how many px u want;
left:how many px u want;
}


than you add this in to your img tag

class="imgmove"

<img class="imgmove" src="yourpicture.extension">



i usually do that in this way


i don't know do u really know css so i say all this like you don't know