4 Replies Latest reply on Mar 30, 2010 6:56 PM by DJ-G

    Using DIVS with an image gallery

    Leonel Torres Level 1

      I have a website that has been up and running for some time now. It has a gallery with a potfolio that i put together using DIVS. I want to add on to the gallery which is where i run into my problem.

       

      Here is the website:  www.erraticmanifest.com

       

      When u click on the profolio link you will notice that there are links on the left, when u click a particular link thumbnails appear to the right of the links. These are rollovers that show larger images. My issue is adding more thumbnails to the list of thumbnails i already have in place. In DW i have the thumbnails stacked on top of eachother in a DIV, i want to make that DIV scroll to view more thumbnails when viewed in the browser, however when i try and make this happen in DW i add thumbnails the list already in place but the DIV just extends and messes up the layout. How would i go about solving this issue? I might be going about putting the gallery together the wrong way so if someone knows an eaiser way to do what im trying to do i would really appreciate the help.

       

      Thanks in advance,

       

      Leo

        • 1. Re: Using DIVS with an image gallery
          DJ-G Level 2

          We need more info on how the thumbnail div relates to the rest of the page artifacts. The div will tend to expand as you add things in it until it reaches the bottom of its container. Is the div height / width automatic? You might want to make it fixed, maybe calculate it on resize.

          • 2. Re: Using DIVS with an image gallery
            Leonel Torres Level 1

            Well the page is seperated into 3 DIVs placed next to eachother with the thumbnail div being the middle one. Here is the CSS for the three DIVS, the order is from left to right as they pertain to the page, the second being the thumbs area.

             

            #portfolioLinksArea {
                float: left;
                width: 175px;
                padding-top: 10px;
                padding-left: 25px;
                padding-right: 20px;

            }

             

            #portfolioThumbsArea {
                float: left;
                width: 130px;
                height: 470px;
                padding-top: 30px;
            }

             

            #portfolioSamplesArea {
                float: left;
                width: 500px;
                height: 470px;
                padding-bottom: 50px;
            }

             

             

            And of course these DIVS are inside another container DIV. As u can see in the CSS the width is set as well as the height. Should i change those options? Also each thumbnail is inside a DIV. Would this affect what im trying to accomplish? I am attaching a picture of the problem im having, the image overflows outside my main DIV container, im sure this is not supposed to be happening. I want that middle container to scrol so i can add as many thumbs as i choose.

             

             

             

            Problem.png

            • 3. Re: Using DIVS with an image gallery
              Nancy OShea Adobe Community Professional & MVP

              Height is a restriction in all browsers except IE. Avoid height values on containers that may be need to stretch to allow for increases in content or text sizes.  Otherwise content will spill out of your layout.  Test your pages in Firefox with View > Zoom, Text Only.  Hit Ctrl+++.

               

              If required, use the min-height property for modern browsers that support it, along with height hacks or conditional comments for pre-IE7 browsers.

               

              #container {

              min-height: 800px; /**for modern browsers**/

              _height: 800px /**for pre-IE7 only**/

              }

               

              To add a scroll bar to a division, use height in pixels plus overflow: auto.

               

              #portfolioThumbsArea {
              float: left;
              width: 145px;
              height: 300px;
              overflow: auto;

              padding-top: 30px;
              }

               

              NOTE: Extra scrollbars are confusing to some users and may pose usability problems for people/devices that don't have a mouse.

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com

              • 4. Re: Using DIVS with an image gallery
                DJ-G Level 2

                Much depends on the look you're trying to achieve. If you don't specifically want a particular height, do as Nancy mentions. Setting the overflow of the thumbs area to auto will get you the scrollbar instead of the thumbs spilling over. I would change the divs around the thumbnails to anchors and see how that works for you.

                 

                Cheers,

                 

                DJ