Please Help with CSS Image Gallery

[polarbaby]

http://www.dynamicdrive.com/style/cs...-gallery/P190/

I've just joined this forum in hopes that I can get some assistance with the CSS Image Gallery. I'm very new at this, so forgive me if I get some of the jargon wrong. I have all the code in place for the css and the html. The assistance I need is as follows:

1. I would like the thumbnail images (width=80px height=59px) to be in a different location than at the top-left of the page. Actually, referring to the top-left corner of the first thumb in the block of thumb images, I would like the position to be at top=177px and left=513px. I would also like the block of thumbs to sit off TO THE RIGHT of the large image width=375px and height=275px (which I really would like to show up at top=160px and left=113px)

What code do I need to put where?

2. Is there a way for the large Image to always be visible? RATHER THAN JUST ON MOUSEOVER?

3. I would like to connect a link to the thumbs that direct to a "Page.html"

I've been struggling my way through this all day, every day, for over a week now, and I just can't seem to figure it out. I'm just too new at this to know what to do...I just seem to know at this point what not to do!

Hopefully, someone here can direct me? Thank you in advance. I'll watch for an answer.

[sajudev]

Hi
It seems to be a bit confusing regarding the first thing that You needs.May be its bcos for my bad english .

For the rest of the needs theres solution

I thing this change in CSS will help You .


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


Only issue is that You might need to use a fixed height or else use images with identical height and width. Else the image in the bottom will be visible.

Linking issue can be changed by just changing the

<a class="thumbnail" href="dhfsdhfsdfhgh">

I think this will solve Your issue ..

[polarbaby]

Thank you for your response. I certainly appreciate your assistance. I will try to apply the changes you suggest and see where that takes me. As for the first question (of 3) I was hoping that there was a way for the thumbnails to reside in a different location than at the top left of the page. Anyway, I'm going to work on what you gave me & I'll post again with the results. Hopefully, you, or someone else, can check back to bring the entire issue to a close. Again, I am truly grateful. (If I knew how to add a "thank you" to your name, I surely would!)

[tech_support]

(If I knew how to add a "thank you" to your name, I surely would!)

You could actually thank the user by clicking the button right under the post.

[polarbaby]

And thank you, too, Peter!

[polarbaby]

I'm so tickled! Those solutions were exactly what I needed. Now the only question remaining is:

How can I reposition the thumbnails to a different location?