9 Replies Latest reply on Mar 20, 2010 1:44 PM by dustnbones2

    Gallery problem

    dustnbones2 Level 1

      I've created a gallery but I'm scratching me head as usual. I want to reduce the width of the page to close the gap between the thumbnails and main images and I need to reduce the container size surrounding the main image. There's about an inch of space between the right and left hand sides which I need to eliminate so the container exactly fits the width of the image. Question is, how do I do it please anyone? I've been endlessly adjust various css and js file but no joy. Link below. Thanks for any help.

       

      http://bajor.servers.rbl-mer.misp.co.uk/~sunridge/photob.htm

        • 1. Re: Gallery problem
          J Cellini Level 3

          You could add a right declaration to your slideshow-container rule:

           

          div.slideshow-container {

          position: relative;

          right: 100px;

          clear: both;

          height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */

          }

           

           

          This would move your gallery closer to the thumbs (you can adjust the distance between the thumbs and main photo by adjusting the number of pixels). Then you would have to adjust your captions.

          • 2. Re: Gallery problem
            dustnbones2 Level 1

            Thanks for your reply JCellini. I did what you suggested but the image didn't move and the caption moved to the right.

            • 3. Re: Gallery problem
              hans-g. Adobe Community Professional & MVP

              Hi,

               

              I for my part would put all your images in that from many people here much maligned table. BUT here you can most easily control the spacing of all the individual images.

               

              Hans-G.

              • 4. Re: Gallery problem
                J Cellini Level 3

                I replicated your page and css file. Here's your page on my web server:

                 

                http://www.elanwebservices.com/example/photob.htm

                 

                Here's the css file:

                 

                http://www.elanwebservices.com/example/css2/galleriffic-2a.css

                 

                I also moved the caption about 100px from the right.

                 

                I looked at your galleriffic-2a.css file and you have asterisks around your right declaration in your slideshow-container rule:

                 

                 

                div.slideshow-container {

                position: relative;

                *right: 100px;*

                clear: both;

                height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */

                }

                 

                 

                What are they doing there? Remove the asterisks and I think your photo will shift to the left.

                1 person found this helpful
                • 5. Re: Gallery problem
                  dustnbones2 Level 1

                  Thanks very much for your help but I need to close the gap more and when I tried to reduce the 100px to 80px it wouldn't move at all. If you click to left or right of the main image there seems to be a container that is far wider than the image. I think that maybe stopping it in someway from closing the gap. Any thoughts on that please?

                  • 6. Re: Gallery problem
                    J Cellini Level 3

                    If you need to close the gap more between the thumbs and the large photo, you would increase the number of pixels, not decrease them:

                     

                     

                    div.slideshow-container {

                    position: relative;

                    right: 200px;

                    clear: both;

                    height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */

                    }

                     

                     

                    I just increased the value from 100px to 200px. It's now very close to the thumbs. You probably don't want it that close, so you would decrease the number of pixels. The pixels are moving the photo from the right. The higher the number of pixels, the further from the right the location of the photo.

                     

                    http://www.elanwebservices.com/example/photob.htm

                    • 7. Re: Gallery problem
                      dustnbones2 Level 1

                      That's brilliant JCellini!

                      Thanks very much. Now all I need to do is level the top of the thumbnails to the top of the main images. Any idea, please?

                      • 8. Re: Gallery problem
                        J Cellini Level 3

                        Yes, add a top declaration:

                         

                        div.slideshow-container {

                        position: relative;

                        top: 28px;

                        right: 200px;

                        clear: both;

                        height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */

                        }

                         

                        28px looks about right.

                        1 person found this helpful
                        • 9. Re: Gallery problem
                          dustnbones2 Level 1

                          Thanks JCellini. Much appreciated. I can stop tearing my hair out now lol