request help - aligning text

Discussion in 'HTML' started by dorayme, Jun 18, 2007.

  1. dorayme

    dorayme Guest

    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 <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
    dorayme, Jun 18, 2007
    #1
    1. Advertising

  2. 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 <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
    Steven Saunderson, Jun 18, 2007
    #2
    1. Advertising

  3. dorayme

    Marnok.com Guest

    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
    Marnok.com, Jun 18, 2007
    #3
  4. dorayme

    Andy Dingley Guest

    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 <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.
    Andy Dingley, Jun 18, 2007
    #4
  5. 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/
    Jukka K. Korpela, Jun 18, 2007
    #5
  6. dorayme

    Ben C Guest

    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 <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.
    Ben C, Jun 18, 2007
    #6
  7. dorayme

    Marnok.com Guest

    "Steven Saunderson" <> wrote in message
    news:...
    > 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 <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!
    Marnok.com, Jun 18, 2007
    #7
  8. dorayme

    Marnok.com Guest

    "dorayme" <> wrote in message
    news:...
    > 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 <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
    Marnok.com, Jun 18, 2007
    #8
  9. dorayme

    Neredbojias Guest

    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 <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.
    Neredbojias, Jun 18, 2007
    #9
  10. dorayme

    Andy Dingley Guest

    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.
    Andy Dingley, Jun 18, 2007
    #10
  11. 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 <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.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Jun 18, 2007
    #11
  12. dorayme

    dorayme Guest

    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
    dorayme, Jun 19, 2007
    #12
  13. dorayme

    dorayme Guest

    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
    dorayme, Jun 19, 2007
    #13
  14. dorayme

    dorayme Guest

    In article
    <Xns995334C6D26DAnanopandaneredbojias@198.186.190.161>,
    Neredbojias <> wrote:

    > > 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?


    Look at the js source link.

    --
    dorayme
    dorayme, Jun 19, 2007
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Onur Bozkurt

    Re: aligning text in a asp label

    Onur Bozkurt, Jul 25, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    753
    Onur Bozkurt
    Jul 25, 2003
  2. =?Utf-8?B?Sm9l?=

    Aligning text

    =?Utf-8?B?Sm9l?=, Jan 25, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    1,185
    =?Utf-8?B?Sm9l?=
    Jan 25, 2006
  3. Phillip
    Replies:
    2
    Views:
    3,171
  4. BGW
    Replies:
    3
    Views:
    443
  5. Steven Bethard

    aligning text with space-normalized text

    Steven Bethard, Jun 30, 2005, in forum: Python
    Replies:
    6
    Views:
    372
    Steven Bethard
    Jul 1, 2005
Loading...

Share This Page