request help - aligning text

[dorayme]

Hi

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.
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. The closest I came was
putting each image/text pair in a <table align="right">, which worked to the
extent that one image shuffled when window was resized (I think the others
remained in place due to other page elements)

Can anyone help me with this?

How about something like

<http://tinyurl.com/2j73ba>

 

[Steven Saunderson]

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. The closest I came was
putting each image/text pair in a <table align="right">

I tried a few approaches but ended up putting each image/text in a
table. It seems okay but FF bottom aligns rather than top aligns.

The URL is < http://phelum.net/images/Misc/ >

HTH













, which worked to the

 

[Marnok.com]

Hi

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.
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. The closest I came was
putting each image/text pair in a <table align="right">, which worked to the
extent that one image shuffled when window was resized (I think the others
remained in place due to other page elements)

Can anyone help me with this?

Thanks

 

[Andy Dingley]

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.

http://brainjar.com/csss/positioning/ should be enough of a CSS
tutorial for you to work out the rest.

 

[Jukka K. Korpela]

Scripsit Marnok.com:

I have a page with multiple small images,

Do we have a URL? There are several approaches (well, I guess just two, but
each with variations) to the problem, like those described at
http://www.cs.tut.fi/~jkorpela/www/captions.html
and the choice depends on the specifics of your page. For example, how long
are the captions? Are the images of the same size?

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. The closest I
came was putting each image/text pair in a <table align="right">,
which worked to the extent that one image shuffled when window was
resized (I think the others remained in place due to other page
elements)

Rather, you could use <table align="left"> for each pair, unless your page
isn't in Arabic or Hebrew (where it is natural to start reading from the
right). But it's impossible to tell what really went wrong, since you
specified no URL.

An alternative approach is to wrap each image/text pair in a <div> element,
set its width to the same as the image width, and float it in CSS.

 

[Ben C]

Searching back a few months for "Ansel Adams" might find you a good
example of this.



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.

 

[Marnok.com]

I tried a few approaches but ended up putting each image/text in a
table. It seems okay but FF bottom aligns rather than top aligns.

The URL is < http://phelum.net/images/Misc/ >

HTH

I'll look at this, thanks for your help!

 

[Marnok.com]

How about something like

<http://tinyurl.com/2j73ba>

Yes, also very nice, thank you

 

[Neredbojias]

How about something like

<http://tinyurl.com/2j73ba>

I remember you working on that before. -A really nice job there.

PS: Did the j/s actually come from Bootnic?

 

[Andy Dingley]

The only proviso is that if the image-boxes are of different heights the
result be a bit higgledy-piggledy.

Widths too. My usual compromise fix for this is to set the width of
the image-box in ems (based on the texts), min-width in pixels (based
on the image, plus some minimum allowance for the text) and similarly
for the heights. It works tolerably well for thumbnail "galleries"
where we care more about consistency than optimized fit. For "article
pages with multiple images" I do the same, then over-ride with
explicit widths (pixels) inlined on each image box, according to the
particular image.

You have to choose your particular best compromise here accordng to
context. There's no "one size fits all" solution.

 

[Adrienne Boswell]

Gazing into my crystal ball I observed Andy Dingley

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.

That's the way I always do it. Just set a width and height (ems) for the
image box, and I'm good to go.

 

[dorayme]

Yes, that is nice...

(btw, I knew a feller once, in Melbourne, who had 35,000 slides
of trams (mainly Melbourne ones!) and many others of trains)

 

[dorayme]

The only proviso is that if the image-boxes are of different heights the
result be a bit higgledy-piggledy.

Yes, this is a big problem and I favour author management. That
is, collecting the pics in groups of similar size, fashioning the
divs to be big enough to contain the largest of the images and so
on. All a bit time consuming. Perhaps too much when there are big
numbers involved or unknown quantities. The magic of tables - and
here I am talking of a table that contains all the images in
cells (not just tables to cater for captions) is that they manage
some of these things for you, the downside being the lack of
wrapping, imo very important for accessibilty.

 

[dorayme]

I remember you working on that before. -A really nice job there.

PS: Did the j/s actually come from Bootnic?

Look at the js source link.