PDA

View Full Version : CSS Popup Image Viewer help



ddusr
03-15-2007, 04:46 AM
1) Script Title: CSS Popup Image Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P80/

3) Describe problem: I cant seem to get images to align on the same line as is shown on the above url. I want to display 4-5 images and the remaining below that and so on.
The div where i put it is defined as

#mcntnr{
margin: 0 auto;
width:95%;

}
#mcntnr p{
padding: 1em 2.5em .5em 2.5em;
text-align: left;
line-height: 2em;
}

My large images are 640X480 in size, thumbnails are also slightly bigger (190X130). Other than that there are no changes.

Kindly help.
Many thanks in advance.

jscheuer1
03-15-2007, 05:24 AM
There are no:

#mcntnr

selectors in the css for this effect. Those may or may not be affecting your results. I would be a little concerned that there may not be enough room (width:95% and the padding and the line-height) for your larger images (this could cause them to wrap). I also would worry, particularly in IE, that text-align:left might distort the positioning of things.

Generally, the larger images display in relation to the thumbnails. Think of the upper left corner of each thumbnail as 0 left and 0 top. The upper left corner of the larger image will display (if using the demo styles):


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

}

vertically, at the top of the thumbnail (top:0) and horizontally, 60 pixels (toward the right) from the left of the thumbnail (left:60px).

ddusr
03-15-2007, 10:52 AM
Thanks a lot John,
After your reply..I took a careful look at the code made some changes and its working alright. There was an unwanted img{display:block;} code also among my css declarations...remove that too.
Thanks a million.