Re: request help - aligning text
am 18.06.2007 12:11:54 von dorayme
In article ,
"Marnok.com" wrote:
> 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 , 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
--
dorayme
Re: request help - aligning text
am 18.06.2007 12:23:01 von Steven Saunderson
On Mon, 18 Jun 2007 10:52:25 -0000, "Marnok.com"
wrote:
> 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
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
> 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
>
--
Steven
request help - aligning text
am 18.06.2007 12:52:25 von wizardharry
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
, 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
Re: request help - aligning text
am 18.06.2007 13:19:32 von Andy Dingley
On 18 Jun, 11:52, "Marnok.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 . Mess with
the markup inside this as much as you like.
You give each
a matching class attribute of
You put all these
s into a container
Use CSS to set the width of the image
s to be small, with them
floated left and without clearing;
Set the width of the container
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
, 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 markup,
particularly for narrow windows.
http://brainjar.com/csss/positioning/ should be enough of a CSS
tutorial for you to work out the rest.
Re: request help - aligning text
am 18.06.2007 13:24:45 von jkorpela
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
,
> 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 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 element,
set its width to the same as the image width, and float it in CSS.
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Re: request help - aligning text
am 18.06.2007 13:35:03 von Ben C
On 2007-06-18, Andy Dingley wrote:
> On 18 Jun, 11:52, "Marnok.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 . Mess with
> the markup inside this as much as you like.
>
> You give each
a matching class attribute of
>
> You put all these
s into a container
>
> Use CSS to set the width of the image
s to be small, with them
> floated left and without clearing;
>
> Set the width of the container
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
, 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 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.
Re: request help - aligning text
am 18.06.2007 14:01:11 von wizardharry
"Steven Saunderson" wrote in message
news:g3nc73dgvcukuk71dc5r2gv3l037d812ev@4ax.com...
> On Mon, 18 Jun 2007 10:52:25 -0000, "Marnok.com"
> wrote:
>
>> 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
>
> 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!
Re: request help - aligning text
am 18.06.2007 14:01:24 von wizardharry
"dorayme" wrote in message
news:doraymeRidThis-7EDCB4.20115418062007@news-vip.optusnet. com.au...
> In article ,
> "Marnok.com" wrote:
>
>> 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 , 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
>
>
>
> --
> dorayme
Yes, also very nice, thank you
Re: request help - aligning text
am 18.06.2007 14:11:18 von Neredbojias
On Mon, 18 Jun 2007 10:11:54 GMT dorayme scribed:
> In article ,
> "Marnok.com" wrote:
>
>> 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 ,
>> 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
>
>
I remember you working on that before. -A really nice job there.
PS: Did the j/s actually come from Bootnic?
--
Neredbojias
He who laughs last sounds like an idiot.
Re: request help - aligning text
am 18.06.2007 15:04:07 von Andy Dingley
On 18 Jun, 12:35, Ben C wrote:
> 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.
Re: request help - aligning text
am 18.06.2007 17:36:42 von Adrienne Boswell
Gazing into my crystal ball I observed Andy Dingley
writing in news:1182165572.108958.290190
@k79g2000hse.googlegroups.com:
> This isn't a popular way of doing image thumbnail galleries, but it
> ought to be. It usually works far better than 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.
--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
Re: request help - aligning text
am 19.06.2007 01:52:01 von dorayme
In article ,
"Marnok.com" wrote:
>
> "Steven Saunderson" wrote in message
> > The URL is < http://phelum.net/images/Misc/ >
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
Re: request help - aligning text
am 19.06.2007 02:18:10 von dorayme
In article ,
Ben C wrote:
> 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
Re: request help - aligning text
am 19.06.2007 02:19:19 von dorayme
In article
,
Neredbojias wrote:
> > How about something like
> >
> >
>
> 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.
--
dorayme