Just play around a little bit with the image sizes that you have.
This worked for me using images of size 340x250.
dl {float:left;text-align:center;}
dt,dd {width:35em;float:left;}
dt {margin-bottom:4em;}/* vertical space between the images */
dd {margin:250px 0 0 -35em;}
img {vertical-align:bottom;border:0;}
em { display: block; font-weight: bold; margin-bottom: 5px; }
Note
- the margin on dd should be the height of your images (if they're of
different sizes, the maximum height among all of them).
- the width on dt,dd and the negative margin dd should be large
enough to be bigger than the widest of your images.
Unfortunately, because you're images are so much larger than the
original example, if you use ems (as I've done above) and then
increase the font size, the dds will get so large, they'll be off the
page to the right. So in your case, you might consider using a pixel
size, say 365px and then just live with the fact that it isn't quite
as scalable anymore. In this case, that's really not that big a deal
because most resolutions won't fit more than 3 365px images (with
spacing) side by side anyway.
Rob
On 8/8/07, Malcolm N <[EMAIL PROTECTED]> wrote:
> On Wed, 08 Aug 2007 13:43:56 -0400, E Michael Brandt
> <[EMAIL PROTECTED]> wrote:
>
> >I will tinker with it later when I get a chance, but really don't you
> >think 340 by 250 is humungous for a thumbnail? Perhaps you are not
> >really looking for thumbnail page styling?
> >
> >--
> >
>
> Yes - humungus is the word. ;-)
>
> No - I was rather looking for better way to display a small photo
> album - say a page with 10 images about that size and not use
> thumbnails.
>
> Up until now I have been giving each photo a div - floated left
>
>
> <div class="leftimg"> <img src="/img/xxxxx.jpg" alt="xxx" width="xxx"
> height="xxx" border="0" />
> <p class="photolegend">xxx</p>
> </div>
>
> keeping to keep the text photo legend within the same width as the
> photo I have had to use a selection of css rules or determine the size
> with php - but as I say this must be inefficient / bloated etc.
>
> I thought your idea rather better -
>
>
>
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
