jamesqh
asked on
Displaying cleanly aligned rectangular thumbnails within square DIVs?
I am creating a photo gallery. On the thumbnails page I am outputting rectangular thumbnails - the same size but some are portrait orientation and some are landscape orientation.
So far each thumbnails is being output like this:
<div style="display: inline;"><a href="link_to_big_image.jp g"><img src="rectangular_thumbnail .jpg" width="250" height="170" /></a></div>
So the thumbnails are up against each other and wrapping around onto multiple lines.
What I want to do is wrap each image in a square div (250x250 pixels), horizontally and vertically align the image within the div, give the div a 1px solid white border, and space each div by about 6 pixels.
I have done this before using a table but in this case I want the number of thumbnails per line to be automatically determined based on how much space there is to fill.
So far each thumbnails is being output like this:
<div style="display: inline;"><a href="link_to_big_image.jp
So the thumbnails are up against each other and wrapping around onto multiple lines.
What I want to do is wrap each image in a square div (250x250 pixels), horizontally and vertically align the image within the div, give the div a 1px solid white border, and space each div by about 6 pixels.
I have done this before using a table but in this case I want the number of thumbnails per line to be automatically determined based on how much space there is to fill.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
here is the full vaild html for this section:
<div id="row1" class="clearfix">
<div style="float: left;height: 250px; width: 250px; text-align: center; vertical-align:middle;"><a href="link_to_big_image.jp g"><img src="rectangular_thumbnail .jpg" width="250" height="170" /></a></div>
<div style="float: left;height: 250px; width: 250px; text-align: center; vertical-align:middle;"><a href="link_to_big_image.jp g"><img src="rectangular_thumbnail .jpg" width="250" height="170" /></a></div>
</div>
<div id="row1" class="clearfix">
<div style="float: left;height: 250px; width: 250px; text-align: center; vertical-align:middle;"><a
<div style="float: left;height: 250px; width: 250px; text-align: center; vertical-align:middle;"><a
</div>
You'll also want to give the divs that surround the images a margin: 6px 0 0 6px; border: 1px solid #ffffff;
ASKER
Thanks Jezcentral,
It's looking good! The vertical align doesn't appear to be working, however (tested in MSIE and firefox)
http://artofimagery.webnerd.com.au/jasmine-dance-by-ben-heys (be aware that the content is photography of the artistic nude genre)
(scroll down a bit to find some landscape oriented thumbnails)
Thanks,
James
It's looking good! The vertical align doesn't appear to be working, however (tested in MSIE and firefox)
http://artofimagery.webnerd.com.au/jasmine-dance-by-ben-heys (be aware that the content is photography of the artistic nude genre)
(scroll down a bit to find some landscape oriented thumbnails)
Thanks,
James
Hmm. Vertical-align support is a bit shakey. Try using <img valign="middle"/>
ASKER
Thanks Jezcentral,
Close enough.
I put each thumbnail in a one-cell table and used valign and align
Cheers,
James
Close enough.
I put each thumbnail in a one-cell table and used valign and align
Cheers,
James
.clearfix:after {content: "."; display: block; height: 0; line-height:0; font-size:0; clear: both; visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
You should always put this class on an element that conatins a floated element.