SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Jul 10, 2008, 12:24 #1
- 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 forumActually, 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 Problemjdmlabs _dot_ com/_screenshits/jdmlabs/image_grid/jdmlabs_image-grid-BROKENalignment_screenie.png
The Fixjdmlabs _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>
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 ...
-
Jul 10, 2008, 12:50 #2
- 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.
-
Jul 10, 2008, 13:39 #3
- Join Date
- Feb 2007
- Location
- Calgary, Canada, eh!
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
There is nothing new under the sun ...
-
Jul 11, 2008, 03:47 #4
- 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
-
Jul 11, 2008, 05:21 #5
- Join Date
- Feb 2007
- Location
- Calgary, Canada, eh!
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
There is nothing new under the sun ...
-
Jul 11, 2008, 23:45 #6
- 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.
JasonThere is nothing new under the sun ...
Bookmarks