SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid 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 23:46.
    There is nothing new under the sun ...

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi and welcome to the forums
    If you give .panel.imagery a fixed width and then just use margin: 0 auto; to center it.

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Calgary, Canada, eh!
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fredda View Post
    Hi and welcome to the forums
    If you give .panel.imagery a fixed width and then just use margin: 0 auto; to center it.

    I understand what you are saying. My main problem, though, is that I do not want .panel.imagery to be fixed-width. The whole site is a fluid width, using percentages, which works fantastically, except for that one centering issue.

    Thank you for responding
    There is nothing new under the sun ...

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Took an experiment example of mine and applied to your code. Maybe you can use it.
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Centered Images With Caption in Fluid Box</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    body{
      background: #131c21;
    }
    .panel.imagery{
      margin:.8em .8em 0 .2em;
      padding:0 .4em 1em;
      border:.4em solid #222e36;
      width:50%;
    }
    .panel.imagery h1{
      margin:1em .5em .5em;
      padding:0 0 .5em 0;
      border-bottom:.2em solid #222e36;
      color: #fff;
      font-weight:400;
    }
    .panel.imagery h1 span{
      color:#666;
      font-weight:900;
    }
    .panel.imagery h1 a{
      color:#aaa;
      text-decoration:none;
    }
    .panel.imagery hr{               /* ruleset for consistent hr style */
      margin:1em; /* matching the h1 side-margins */
      border:0;                      /* for FF */
      border-top:.4em solid #222e36; /* for all except IE */
      height:.4em;                   /* for IE */
      background:transparent;        /* for Opera and Safari */
    }
    .photo-entry {
      position:relative;
      margin:0 20px;
      color:#fff;
      text-decoration:none;
      white-space:nowrap;
      font-size:90%;
      font-size:80%;
      font-size:70%;
      font-size:60%;
    }
    /************************ centering the inline images with one-line caption *******************/
    .panel.imagery p{
      margin:0 0 .5em;
      padding:0;
       line-height:2.4em; /* gives "bottom margin" */
      text-align:center;
      word-spacing:-1.5em; /* diminishing the whitespace in line-wrap ends, in favor for IE */
    }
    .photo-entry span{
      margin:0 -3.5em; /* flexible length to balans the fix padding. Centers different font-sizes */
      padding:0 45px;
      word-spacing:1px;
    }
    .photo-entry img{
      margin-top:.8em;
      margin-right:-100px; /* pull in the caption line by the img length */
      border:0 none;
      width:100px;
      height:100px;
      vertical-align:1.2em; /* lift the img to give room for the caption line */
      white-space:nowrap;
    }
    </style></head><body>
     
    <div class="panel fl imagery">
      <h1>Random <span class="panel-divider-slanted">/</span><a href="#nogo" onclick="modal()" title="View all Imagery entries"> Imagery</a></h1>
      <p>
        <a rel="image" id="image_01" class="photo-entry" href="#nogo" title="Photo"><img src="null_image_100x100.png" alt="Photo" /><span>Size: 1024 x 768</span></a>
        <a rel="image" id="image_02" class="photo-entry" href="#nogo" title="Photo"><img src="null_image_100x100.png" alt="Photo" /><span>Size: 1024 x 768</span></a>
        <a rel="image" id="image_03" class="photo-entry" href="#nogo" title="Photo"><img src="null_image_100x100.png" alt="Photo" /><span>Size: 1024 x 768</span></a>
        <a rel="image" id="image_04" class="photo-entry" href="#nogo" title="Photo"><img src="null_image_100x100.png" alt="Photo" /><span>Size: 1024 x 768</span></a>
        <a rel="image" id="image_05" class="photo-entry" href="#nogo" title="Photo"><img src="null_image_100x100.png" alt="Photo" /><span>Size: 1024 x 768</span></a>
        <a rel="image" id="image_06" class="photo-entry" href="#nogo" title="Photo"><img src="null_image_100x100.png" alt="Photo" /><span>Size: 1024 x 768</span></a>
      </p>
      <hr />
    </div>
     
    </body></html>
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Calgary, Canada, eh!
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    Took an experiment example of mine and applied to your code. Maybe you can use it.

    ...


    Hello erik.j,

    Thank you for your reply. I copied your example to a file and tested it ...and it worked perfectly! You're a genius. I will try it in my site layout in a bit.

    Again, thank you very much. I will re-post, if and/or when, I get the issue resolved.

    Jason
    There is nothing new under the sun ...

  6. #6
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Calgary, Canada, eh!
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found a solution, sort of...

    The solution was actually much easier than I had thought, as is usually the case.

    My entire site is fluid, and the image containers (DL) inside it's outside container (DIV .panel) were fixed.
    So if I make the DLs fluid (@ 31%), they always fill the the extra space. The way the site is designed, they will never be more than three images across.

    Not exactly centered, I know, but with a little left padding, it will be close enough for me

    See this image for clarification:

    www _dot_ jdmlabs _dot_ com/_screenshits/jdmlabs/image_grid/jdmlabs_image_grid_comparison.png

    A big thanks to fredda and eric j. for your help.

    Jason
    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
  •