7 Replies Latest reply on Feb 16, 2010 7:36 AM by brightbelt

    Constructing CSS photo gallery layout

    brightbelt Level 1

      Hi,

      I'm on DW CS4 with an intel Mac. I am one (1) table away from having my site be purely CSS without tables.

       

      I have painstakingly placed each thumbnail manually and resized all the heights etc.  My Gallery actually looks good in IE 6, much to my surprise.

       

      But in Safari and Firefox, it looks like it's out of the container (Content div) - but I've got this gallery class Div in the editable area of my template in the Content Div, so I don't know what I've done wrong.

       

      http://www.frankbright.com/index1.htm

       

      It would be really great if I could get this past me. I hope I've given enough information. Many Thanks for any assistance,

      Frank B.

        • 1. Re: Constructing CSS photo gallery layout
          Nancy OShea Adobe Community Professional & MVP

          First rule in web design.  If it doesn't look right in all browsers, check the code and fix reported errors.

           

          HTML:

          http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.frankbright.com%2Findex1.htm

           

          CSS:

          http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. frankbright.com%2Findex1.htm

           

           

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

          1 person found this helpful
          • 2. Re: Constructing CSS photo gallery layout
            brightbelt Level 1

            Thanks, your point is taken - they now check out with no errors but I still am getting a displacement-like effect.

             

            It reacts as if I were trying to insert the Gallery layout into the Footer Div, but I'm not (note: the footer has the purple-ish background and the content background is a blue gradient). And the footer background is stretched all out of whack.

             

            I'm wondering if my content area of my template is positioned correctly - I'll double-check that. 

             

            I'm still open to other ideas - Thanks for any assistance, Frank

            • 3. Re: Constructing CSS photo gallery layout
              brightbelt Level 1

              I've neutralized the gallery layout for now, so that my photos are centered in <p> tags. The main thing I'm encountering is that when I try to order the thumbnails into an unordered list - with each thumbnail in a <li> tag, it kicks the whole gallery out of the container and tries to put it in the Footer Div for some reason.

               

              Here's general sense of the CSS I've got going- remember this is not online right now. I couldn't get this to look half decent yet:

               

              <head>

              <style type="text/css">
              <!--
              .gallery ul {
                      display:inline;
                      list-style: none;
                      width: 155px;
                      min-height: 18px;
                      float: left;
                      margin: 0px 20px 20px 20px;
                      padding: 0px 10px 10px 10px;
                  }
              -->
              </style>

              </head>

              <body>

              <div id="mainContent">
                <!-- InstanceBeginEditable name="Content" -->

              <ul class="gallery">

              <li><a href="pages/photoname.htm"><img src="thumbnail.jpg" alt="image description" width="130" height="108" border="0" /></a></li>

              <li><a href="pages/photoname2.htm"><img  src="thumbnail2.jpg" alt="image description" width="130" height="108"  border="0" /></a></li>

              <li><a href="pages/photoname3.htm"><img  src="thumbnail3.jpg" alt="image description" width="130" height="108"  border="0" /></a></li>

              <li><br /></li>

              </ul>

              <!-- InstanceEndEditable -->
                </div>

               

              So for some reason this displaces and enters into the Footer Div area.

               

              I appreciate any assistance if it's possible. Many Thanks, Frank B.

              • 4. Re: Constructing CSS photo gallery layout
                osgood_ Level 8

                Firstly I would make all your thumbnails the same dimensions 135px x 108px. This will allow you to wrap all the images in one ul tag and center them on the page. If you use multiple ul tags then you will have to assign each one a different class and give each one a specific width to get it to center the images.

                 

                Example of css where the images are all wrapped in one ul tag.

                 

                <style type="text/css">
                <!--
                #mainContent, #navcontainer {
                overflow: hidden;
                }
                .gallery {
                list-style: none;
                width: 725px;
                margin: 0 auto;
                padding: 0 0 0 10px;
                }
                .gallery li {
                float: left;
                width: 140px;
                margin: 0;
                padding: 0;
                    }
                .gallery li a {
                float: left;
                display: block;
                margin: 10px 10px 0 0;
                }
                -->
                </style>

                 

                 

                html showing images wrapped in one ul tag, add the others to the sequence.

                 

                <div id="mainContent">
                <ul class="gallery">

                <li><a href="pages/photoname.htm"><img src="thumbnail.jpg" alt="image description" width="135" height="108" border="0" /></a></li>

                <li><a href="pages/photoname2.htm"><img  src="thumbnail2.jpg" alt="image description" width="135" height="108"  border="0" /></a></li>

                <li><a href="pages/photoname3.htm"><img  src="thumbnail3.jpg" alt="image description" width="135" height="108"  border="0" /></a></li>

                <li><a href="pages/photoname4.htm"><img src="thumbnail4.jpg" alt="image description" width="135" height="108" border="0" /></a></li>

                <li><a href="pages/photoname5.htm"><img  src="thumbnail5.jpg" alt="image description" width="135" height="108"  border="0" /></a></li>

                <li><a href="pages/photoname6.htm"><img  src="thumbnail6.jpg" alt="image description" width="135" height="108"  border="0" /></a></li>

                </ul>

                </div>

                • 5. Re: Constructing CSS photo gallery layout
                  brightbelt Level 1

                  Many Thanks Osgood. Your layout is right on the mark - and I'll be studying your code to try to figure out how it all works.

                   

                  I'm not sure why overflow is addressed in the #navcontainer when I'm not even trying to enter anything into that Div but I'll study into that. Those are the parts of CSS which sometimes make me scratch my head in bewilderment. But it's all for learning and it's all good.

                   

                  Again, Many Thanks, Frank B.

                  • 6. Re: Constructing CSS photo gallery layout
                    osgood_ Level 8

                    brightbelt wrote:

                     

                    I'm not sure why overflow is addressed in the #navcontainer when I'm not even trying to enter anything into that Div but I'll study into that. Those are the parts of CSS which sometimes make me scratch my head in bewilderment. But it's all for learning and it's all good.

                     

                     

                    overflow: hidden; is needed on the 'navcontainer' because I believe some elements in that <div> have been 'floated' and you need to clear the floats so the following element/s sit beneath any elements preceeding it.

                     

                    overflow: hidden; is now generally accepted as the most 'economical' way of clearing floats. There are other methods which can be used too which require more code and css to get the same job done.

                    1 person found this helpful
                    • 7. Re: Constructing CSS photo gallery layout
                      brightbelt Level 1

                      I really appreciate your taking the time to  explain the concepts - really understanding this stuff can make all the difference. Thanks to you both Osgood and Nancy. Thanks, FSB