Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > request help - aligning text

Reply
Thread Tools

request help - aligning text

 
 
dorayme
Guest
Posts: n/a
 
      06-18-2007
In article <(E-Mail Removed)>,
"Marnok.com" <(E-Mail Removed)> 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 <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>

--
dorayme
 
Reply With Quote
 
 
 
 
Steven Saunderson
Guest
Posts: n/a
 
      06-18-2007
On Mon, 18 Jun 2007 10:52:25 -0000, "Marnok.com"
<(E-Mail Removed)> 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 <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
> 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
 
Reply With Quote
 
 
 
 
Marnok.com
Guest
Posts: n/a
 
      06-18-2007
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


 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      06-18-2007
On 18 Jun, 11:52, "Marnok.com" <(E-Mail Removed)> 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.

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


 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      06-18-2007
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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      06-18-2007
On 2007-06-18, Andy Dingley <(E-Mail Removed)> wrote:
> On 18 Jun, 11:52, "Marnok.com" <(E-Mail Removed)> 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.
 
Reply With Quote
 
Marnok.com
Guest
Posts: n/a
 
      06-18-2007

"Steven Saunderson" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> On Mon, 18 Jun 2007 10:52:25 -0000, "Marnok.com"
> <(E-Mail Removed)> 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 <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



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


 
Reply With Quote
 
Marnok.com
Guest
Posts: n/a
 
      06-18-2007

"dorayme" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> In article <(E-Mail Removed)>,
> "Marnok.com" <(E-Mail Removed)> 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 <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>
>
> --
> dorayme


Yes, also very nice, thank you


 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      06-18-2007
On Mon, 18 Jun 2007 10:11:54 GMT dorayme scribed:

> In article <(E-Mail Removed)>,
> "Marnok.com" <(E-Mail Removed)> 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 <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>


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.
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      06-18-2007
On 18 Jun, 12:35, Ben C <(E-Mail Removed)> 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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Aligning text =?Utf-8?B?Sm9l?= ASP .Net 2 01-25-2006 07:35 PM
aligning text with space-normalized text Steven Bethard Python 6 07-01-2005 05:38 PM
Aligning text within a JTextArea Phillip Java 2 01-23-2004 04:03 PM
Re: aligning text in a asp label Onur Bozkurt ASP .Net 0 07-25-2003 09:39 AM
IE/Netscape question: aligning text BGW HTML 3 07-08-2003 07:46 PM



Advertisments