Sent by Zoe M. Gillenwater on 1 February 2007 20:08
David Sharp wrote:
> Trish Meyer wrote:
>
>> I do pics and captions for an art gallery, but each image is in its
>> own floated div - as in
>> http://www.vivagallery.org/exhibits/SCORE_2006/index.html
>>
>>
>>
> Thanks for replying Trish,
>
> This is a good solution and probably what I will have to end up going
> with, but it does have two drawbacks compared to what I would /ideally/
> like to have. Firstly each "picturebox" is the same defined width - I
> guess to create the illusion that they are centered when really they are
> floated left. I would prefer the picturebox to be the width of the image
> plus padding. Secondly (although I guess pretty much related to the
> first) is that this solution again would look very "left aligned" when
> dealing with either a variable number of images, or conversely a fluid
> container width.
>
> Is there no way to do this inline, or conversely simulate a kind of
> {float : center}?
>
Georg already addressed your concern about the overall left alignment of
the gallery.
I wanted to address your concern about having a fixed width on each div
that holds a photo, instead of leaving it widthless and having it
shrinkwrap to the size of the picture. You can do this, but it doesn't
work well if you have a caption within the div. If the caption grows
wider than the photo, so will the div. This is why you usually see divs
holding both photos and captions fixed in width. You'll often see the
divs fixed in height as well (as the Eric Meyer-based examples cited
earlier were) but this is problematic because the caption text can grow
longer or larger and excede that height. The heights are set, though, to
keep subsequent floats from catching on one another.
You could consider creating two classes, one called portrait and one
called landscape, and setting the widths in these. I do a similar sort
of thing in most of my sites where I float images within the text. I
generally develop two set sizes for horizontal and vertical images
respectively, and apply these classes to the image divs.
You'll still need to worry about the height issue, though. Using Georg's
suggestion of inline-block gets around that:
http://www.brunildo.org/test/ImgThumbIBL.html
http://www.brunildo.org/test/ImgThumbIBL2b.html
http://www.brunildo.org/test/ImgThumbIBL3.html
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
