Help with enlarge pic positioning please

**yummy** · 09-04-2007, 04:20 AM

Hello all
I followed the instruction like a 'good woman should' and it all works fine with one exception. I want to use the 'enlarge pic' feature on my website where pics are spread out over a large area. The first row of pics works well. The second row and third etc do not because the enlarged pic is ALWAYS at the top of the page. Is it possible to have the pic enlarge immediately beside, or at least in the same viewing area, as the thumbnail itself? I am a real newbie when it comes to this stuff so if you can help me we might be able to marry someday..lol
Here is the code I have used on my style sheet
.

HTML Code:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: [url]http://www.dynamicdrive.com/style/[/url] */

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

.thumbnail img{
border: 3px solid black;
margin: 0 5px 5px 0;
}

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

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute: 
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
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: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>
And here is the HTML i used

<link rel="stylesheet" type="text/css" href="new_page_1.css">
</head>

<body>
<div class="gallerycontainer height=300">

<a class="thumbnail" href="#thumb"><img src="3064.jpg" width="100px" height="200px" border="0" /><span><img src="3064zz.jpg" /><br />Unbelievable....This is only Php 950.00</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a class="thumbnail" href="#thumb"><img src="1630B.JPG" width="100px" height="200px" border="0" /><span><img src="1630zz.jpg" /><br />Your man said to buy this!!!!</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<a class="thumbnail" href="#thumb"><img src="3064.jpg" width="100px" height="200px" border="0" /><span><img src="3064zz.jpg" /><br>Yeah I know....My boss always picks me for the review pics.</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="thumbnail" href="#thumb"><img src="1630B.JPG" width="100px" height="200px" border="0" /><span><img src="1630zz.jpg" /></span></a>

<a class="thumbnail" href="#thumb"><img src="3064.jpg" width="100px" height="200px" border="0" /><span><img src="3064zz.jpg" /></span></a>


</div>
</body>

Any suggestions would be so helpful.
Any sorry, I did have a look at a million other posts and didn't see this request there but if it is then sorry to bother everyone.
Cheers
Daisy

**yummy** · 09-04-2007, 08:48 AM

Me again......well i am just sooooooooooo clever...........well maybe, maybe not...hehehehe
I removed the line

top: 0;

from the css code and it does exactly what I want it to do.

Thanks anyway and guess I will just have to stay single.....lol

**Ryan Fitton** · 09-04-2007, 03:10 PM

Great to see you have worked to find it out yourself

Thread: Help with enlarge pic positioning please

Thread Tools

Search Thread

Help with enlarge pic positioning please

Bookmarks

Bookmarks

Posting Permissions