|
|
Posted by Ben C on 06/18/07 11:35
On 2007-06-18, Andy Dingley <dingbat@codesmiths.com> wrote:
> On 18 Jun, 11:52, "Marnok.com" <wizardha...@pottermarnok.com> wrote:
>
>> I have a page with multiple small images, when I resize the browser window
>> the images shuffle around so they are all displayed on screen no matter the
>> size of the browser window.
>
> Searching back a few months for "Ansel Adams" might find you a good
> example of this.
>
>
>> My problem is, that I would like a small text beneath each image, but I
>> can't figure out how to achieve the same effect.
>
> You stick each unit of "image and captions" into a <div>. Mess with
> the markup inside this as much as you like.
>
> You give each <div> a matching class attribute of <div class="image-
> box" >
>
> You put all these <div>s into a container <div>
>
> Use CSS to set the width of the image <div>s to be small, with them
> floated left and without clearing;
>
> Set the width of the container <div> to be "a reasonable width", based
> on the browser window. _Don't_ set this to be a fixed width in pixels,
> or you're back where you started
>
> You've now got a linear list of little boxes which will do their best
> to sit in neat rows within a big box. Unlike a <table>, they don't
> have any notion of "being in rows", they just behave as one list that
> tries to best fill the available container.
>
> This isn't a popular way of doing image thumbnail galleries, but it
> ought to be. It usually works far better than <table> markup,
> particularly for narrow windows.
The only proviso is that if the image-boxes are of different heights the
result be a bit higgledy-piggledy.
Navigation:
[Reply to this message]
|