SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Calgary, Canada, eh!
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centered Boxed-Grid within a fluid container?

    Hello fine Web folk...

    First post to this forum Actually, my first post to any web-dev forum.

    I've beaten my head against the wall with this one, and this is not the first time I've encountered it. I've just always given up on it before.

    Problem:
    I have a grid of images inside of DL lists. These float left of each other, thus always horizontally filling in the available space. The problem, is, the outling container resizes (fluid) with the browser window, so when the available space is not quite the right size to fit another image, all images are left-aligned.
    Question:
    How do I have all the images, as a whole, always centered? ...hmmm.

    ======

    You may view these screenies (1265px x 909px) to show you what I am trying to explain (sorry, can't use actual links):

    The Problem
    jdmlabs _dot_ com/_screenshits/jdmlabs/image_grid/jdmlabs_image-grid-BROKENalignment_screenie.png
    The Fix
    jdmlabs _dot_ com/_screenshits/jdmlabs/image_grid/jdmlabs_image-grid-FIXEDalignment_screenie.png


    Example:

    HTML Mark-up
    HTML Code:
              <div class="panel fl imagery">
                <h1>Random <span class="panel-divider-slanted">/</span> <a href="<?=$_SERVER["REQUEST_URI"];?>#" onclick="modal()" title=" View all Imagery entries ">Imagery</a></h1>
                <dl class="photo-entry">
                  <dt><a rel="image" id="image_01" href="<?=$_SERVER["REQUEST_URI"];?>#" title=" Photo " ><img src="/wp-content/themes/Perseverance/assets/images/component/null_image_100x100.png" alt=" Photo " /></a></dt>
                  <dd>Size: 1024 x 768</dd>
                </dl>
                <dl class="photo-entry">
                  <dt><a rel="image" id="image_02" href="<?=$_SERVER["REQUEST_URI"];?>#" title=" Photo " ><img src="/wp-content/themes/Perseverance/assets/images/component/null_image_100x100.png" alt=" Photo " /></a></dt>
                  <dd>Size: 1024 x 768</dd>
                </dl>
                <dl class="photo-entry">
                  <dt><a rel="image" id="image_03" href="<?=$_SERVER["REQUEST_URI"];?>#" title=" Photo " ><img src="/wp-content/themes/Perseverance/assets/images/component/null_image_100x100.png" alt=" Photo " /></a></dt>
                  <dd>Size: 1024 x 768</dd>
                </dl>
                <dl class="photo-entry">
                  <dt><a rel="image" id="image_04" href="<?=$_SERVER["REQUEST_URI"];?>#" title=" Photo " ><img src="/wp-content/themes/Perseverance/assets/images/component/null_image_100x100.png" alt=" Photo " /></a></dt>
                  <dd>Size: 1024 x 768</dd>
                </dl>
                <dl class="photo-entry">
                  <dt><a rel="image" id="image_05" href="<?=$_SERVER["REQUEST_URI"];?>#" title=" Photo " ><img src="/wp-content/themes/Perseverance/assets/images/component/null_image_100x100.png" alt=" Photo " /></a></dt>
                  <dd>Size: 1024 x 768</dd>
                </dl>
                <dl class="photo-entry">
                  <dt><a rel="image" id="image_06" href="<?=$_SERVER["REQUEST_URI"];?>#" title=" Photo " ><img src="/wp-content/themes/Perseverance/assets/images/component/null_image_100x100.png" alt=" Photo " /></a></dt>
                  <dd>Size: 1024 x 768</dd>
                </dl>
                <hr />
              </div>
    CSS Mark-up
    Code:
      .panel.imagery {
        display: block;
    /*    float: left;		  Makes no difference  */
        margin: 0.8em 0.8em 0 0.2em;
        padding: 0 0.4em;
        border: 0.4em solid #222e36;
        background: #131c21;
    /*    text-align: center;	  Makes no difference  */
      }
      #content_sub .panel.imagery h1 {
        margin-top: 1em;
      }
      #content_sub .photo-entry {
        display: inline;
        float: left;
        width: 116px;
        height: 110px;
        margin: 0.1em auto;
        padding: 0.7em 0 1em 0;
        text-align: center;
      }
    Last edited by jason.moss; Jul 11, 2008 at 22:46.
    There is nothing new under the sun ...


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
  •