7 Replies Latest reply on May 20, 2010 1:26 PM by EagerBob

    CSS: thumbnail grid

    EagerBob Level 2

      some questions for all you CSS guru's and wizards:

       

      I want to make a gallery overview that looks like this comp I made in Photoshop:

       

       

      example.png

       

      The gallery will be dynamically created by a Wordpress plugin, so I can't really edit the HTML, I'll have to do with the CSS.

       

      I made a test to see if this can be done.

      This is my HTML:

       

      <div id="galleryoverview">

       

      <div class= "thumb">thumb1</div>

      <div class= "thumb">thumb2</div>

      <div class= "thumb">thumb3</div>

      <div class= "thumb">thumb4</div>

      <div class= "thumb">thumb5</div>

      <div class= "thumb">thumb6</div>

      <div class= "thumb">thumb7</div>

      <div class= "thumb">thumb8</div>

      <div class= "thumb">thumb9</div>

      <div class= "thumb">thumb10</div>

      <div class= "thumb">thumb11</div>

      <div class= "thumb">thumb12</div>

      </div>

       

      and this is my CSS:

       

      body {

      font: 100% Verdana, Arial, Helvetica, sans-serif;

      margin: 0;

      padding: 0;

      text-align: center;

      color: #000000;

      }

       

      #galleryoverview {

      width: 408px;

      clear:both;

      border: 1px solid #C6F;

      background-image:url(gallerybackground.png);

      min-height: 136px;

      }

       

      .thumb {

      float: left;

      width: 68px;

      height: 68px;

      background: #0C6;

      margin-bottom: 68px;

      margin-right: 68px;

      }

       

       

      Which gives me this:

       

       

      http://www.littlewings-wanbetaler.nl/thumbgrid.html

       

      Now what I want is to give the galleryoverview div a width of 340 pixels, yet show three thumbnails next to each other, as in the first Photoshop comp.

      Is this possible at all ?

       

      Another question is why my galleryoverview div does not grow in size with the number of thumbs that are displayed.(this varies)

      I gave it a minimum height here just to make it visible.

       

      Thank you

       

      Bob

        • 1. Re: CSS: thumbnail grid
          Nancy OShea Adobe Community Professional & MVP

          Try this:

           

          #galleryoverview {
          width: 408px;
          min-height: 30em;
          border: 1px solid #C6F;
          background:url(gallerybackground.png) repeat;
          }

           

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

          • 2. Re: CSS: thumbnail grid
            EagerBob Level 2

            Thanks but that does not work, if  change the number of thumbs the div 

            does not scale accordingly.

            I guess it has to do with the div contaning just floating elements.

             

             

            Op 19 mei 2010, om 18:25 heeft Nancy O. het volgende geschreven:

             

            Try this:

            >

            #galleryoverview {

            width: 408px;

            min-height: 30em;

            border: 1px solid #C6F;

            background:url(gallerybackground.png) repeat;

            }

            >

            Nancy O.

            Alt-Web Design & Publishing

            Web | Graphics | Print | Media  Specialists

            http://alt-web.com/

            http://twitter.com/altweb

            http://alt-web.blogspot.com

            >

            • 3. Re: CSS: thumbnail grid
              osgood_ Level 8
              Which gives me this:

               

               

              http://www.littlewings-wanbetaler.nl/thumbgrid.html

               

              Now what I want is to give the galleryoverview div a width of 340 pixels, yet show three thumbnails next to each other, as in the first Photoshop comp.

              Is this possible at all ?

               

              Another question is why my galleryoverview div does not grow in size with the number of thumbs that are displayed.(this varies)

              I gave it a minimum height here just to make it visible.

               

              Thank you

               

              Bob

               

              You can do that with a bit of breaking down of the thumb classes:

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
              <title>Untitled Document</title>
              <style>
              body {
              font: 100% Verdana, Arial, Helvetica, sans-serif;
              margin: 0;
              padding: 0;
              text-align: center;
              color: #000000;
              }

              #galleryoverview {
              margin: 0 auto;
              width: 340px;
              border: 1px solid #C6F;
              background-image:url(gallerybackground.png);
              overflow: hidden;
              }

              .thumb, .thumb_2, .thumb_3, .thumb_4 {
              float: left;
              width: 68px;
              height: 68px;
              background: #0C6;
              margin-bottom: 68px;
              margin-right: 68px;
              }
              .thumb_2 {
              margin-right: 0;
              }
              .thumb_3 {
              margin-bottom: 0;
              }
              .thumb_4 {
              margin-right: 0;
              margin-bottom: 0;
              }

               

              </style>
              </head>

              <body>
              <div id="galleryoverview">
              <div class= "thumb">thumb1</div>
              <div class= "thumb">thumb2</div>
              <div class= "thumb_2">thumb3</div>
              <div class= "thumb">thumb4</div>
              <div class= "thumb">thumb5</div>
              <div class= "thumb_2">thumb6</div>
              <div class= "thumb">thumb7</div>
              <div class= "thumb">thumb8</div>
              <div class= "thumb_2">thumb9</div>
              <div class= "thumb_3">thumb10</div>
              <div class= "thumb_3">thumb11</div>
              <div class= "thumb_4">thumb12</div>
              </div>
              </body>
              </html>

              • 4. Re: CSS: thumbnail grid
                EagerBob Level 2

                OK,

                that is clever.

                 

                But unfortunately I can't change the class of the thumb which is the

                same for every thumbnailbox. (this was just a quick test to try my CSS)

                 

                The id's of all thumbs are unique though, so splitting them in two

                different styles (one without right margin)  could work.

                 

                Only thing is that the number of pictures that the user will add could

                be big in the future.

                There will be several pages each having several galleries on them.

                You'll end up with an enormous long list of thumbs that have their

                margin set to 0.

                (The bottom margin can be the same, I'd like an extra

                "empty" row beneath the last row of thumbs, which would show the background image.)

                 

                So this will probably make for some very inefficient CSS?

                 

                Thanks

                • 5. Re: CSS: thumbnail grid
                  osgood_ Level 8

                  EagerBob wrote:


                   

                  The id's of all thumbs are unique though, so splitting them in two

                  different styles (one without right margin)  could work.

                   

                  Only thing is that the number of pictures that the user will add could

                  be big in the future.

                  There will be several pages each having several galleries on them.

                  You'll end up with an enormous long list of thumbs that have their

                  margin set to 0.

                   

                  Humm if the id or class is unique for every thumb won't you potentially end up with an enormous long list anyway?

                   

                  You could do some think like below making every 3rd thumb have no right margin?

                   

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                  <title>Untitled Document</title>
                  <style>
                  body {
                  font: 100% Verdana, Arial, Helvetica, sans-serif;
                  margin: 0;
                  padding: 0;
                  text-align: center;
                  color: #000000;
                  }

                   

                  #galleryoverview {
                  margin: 0 auto;
                  width: 340px;
                  border: 1px solid #C6F;
                  background-image:url(gallerybackground.png);
                  overflow: hidden;
                  }

                   

                  .thumb1, .thumb2, .thumb3, .thumb4, .thumb5, .thumb6, .thumb7, .thumb8, .thumb9, .thumb10, .thumb11, .thumb12 {
                  float: left;
                  width: 68px;
                  height: 68px;
                  background: #0C6;
                  margin-bottom: 68px;
                  margin-right: 68px;
                  }

                   

                  .thumb3, .thumb6, .thumb9, .thumb12 {
                  margin-right: 0;
                  }

                   

                  </style>
                  </head>
                  <body>
                  <div id="galleryoverview">
                  <div class= "thumb1">thumb1</div>
                  <div class= "thumb2">thumb2</div>
                  <div class= "thumb3">thumb3</div>
                  <div class= "thumb4">thumb4</div>
                  <div class= "thumb5">thumb5</div>
                  <div class= "thumb6">thumb6</div>
                  <div class= "thumb7">thumb7</div>
                  <div class= "thumb8">thumb8</div>
                  <div class= "thumb9">thumb9</div>
                  <div class= "thumb10">thumb10</div>
                  <div class= "thumb11">thumb11</div>
                  <div class= "thumb12">thumb12</div>
                  </div>
                  </body>
                  </html>

                  • 6. Re: CSS: thumbnail grid
                    Nancy OShea Adobe Community Professional & MVP

                    If this Gallery is to be populated dynamically, wouldn't it make more sense to use a table for this?

                     

                     

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

                    • 7. Re: CSS: thumbnail grid
                      EagerBob Level 2

                      osgood_ wrote:

                       

                       

                      Humm if the id or class is unique for every thumb won't you potentially end up with an enormous long list anyway?

                       

                      You could do some think like below making every 3rd thumb have no right margin?

                      yes, thanks

                      but what I did not tell you or simplicity's sake is that every thumb has an id and a class.

                      see the pagesource here

                       

                      So if i use the class to give the divs a right margin I could use the ID of every third div to have a right margin of 0.

                      but it would stiil be quite a list and not a very elegant solution.

                       

                      What I think I will do instead of using a right margin of 68px to separate the thumbs, I will give them a right and a left margin of 34px.

                      like so:

                       

                      #galleryoverview {
                           width: 408px;
                           clear:both;
                           border: 1px solid #C6F;
                           background:url(gallerybackground.png) repeat-y 36px 0px;
                           min-height: 136px;
                      }
                         
                      .thumb {
                          float: left;
                          width: 68px;
                          height: 68px;
                          background: #0C6;
                          margin:0px 34px 68px; 
                      }

                       

                      which gives what I want, although with a slightly big margin of 34 pixels left and right of the #galleryoverview div.

                      : http://www.littlewings-wanbetaler.nl/thumbgrid2.html

                       

                      Now if someone could point me in the right direction to get the height of the div grow with the content I could mark this question as solved (more or less ;-)

                       

                      @Nancy:

                      yes, certainly, but I cannot change the HTML...