Results 1 to 3 of 3

Thread: CSS Popup Image Viewer help

  1. #1
    Join Date
    Mar 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy CSS Popup Image Viewer help

    1) Script Title: CSS Popup Image Viewer

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...ge-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
    Code:
    #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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    .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).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •