Captions under images

Discussion in 'HTML' started by sorry.no.email@spamsux.com, Apr 3, 2006.

  1. Guest

    Hi,

    I am preparing a family history site with a fair few images and have
    tried several methods of using CSS to get a caption under images.
    These are images floated left and right as well as images centred by
    enclosing them in p tags. A typical page is:

    http://people.aapt.net.au/~adjlstrong/strongs/chapter_5.html

    At the moment I am depending on title tags alone on the images as
    most of the methods I have tried and read about are cumbersome and
    convoluted or depend on images being all the same size on a page.

    A great example is:

    http://www.alistapart.com/articles/practicalcss/

    which starts simply and becomes more and more complex, leading to his
    question: 'So now we have a bunch of nested DIVs. How is this any
    better than the nested tables they replace?' Which he answers
    beautifully of course :)

    Can anybody suggest a straightforward way to put captions under all
    these images using CSS?

    Thanks for your trouble,

    Andrew.

    PS I have an unkind thought that this could actually be done fairly
    easily using tables :). Hmmmmm.....
    , Apr 3, 2006
    #1
    1. Advertising

  2. Neredbojias Guest

    To further the education of mankind, declaimed:

    > Can anybody suggest a straightforward way to put captions under all
    > these images using CSS?


    Considering browser vagaries/differences and positioning, there is none.
    The best pragmatic way I've found for image-captions is inline tables.
    Typically, however, there is an issue with inline vs. inline-block and
    Opera vs. other browsers.

    --
    Neredbojias
    Apprentice Learner
    Neredbojias, Apr 3, 2006
    #2
    1. Advertising

  3. BootNic Guest

    > "" <> wrote:
    > news:....
    >
    > Hi,
    >
    > I am preparing a family history site with a fair few images and
    > have tried several methods of using CSS to get a caption under
    > images. These are images floated left and right as well as images
    > centred by enclosing them in p tags. A typical page is:
    >
    > http://people.aapt.net.au/~adjlstrong/strongs/chapter_5.html

    [snip]
    >
    > Can anybody suggest a straightforward way to put captions under all
    > these images using CSS?



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content=
    "text/html; charset=windows-1252">
    <style type="text/css">
    ..img{
    border:solid brown 0.1em;
    margin: 5px 0 5px 0;
    padding: 1px;
    }
    ..img p{
    text-align:center;
    color:#008000;
    background-color:#FFFFE0;
    margin:1px 0 0 0;
    }
    ..img span{
    text-align:left;
    display:table;
    margin:auto;
    }
    </style>
    <!--[if IE]>
    <style type="text/css">
    ..img span{
    display:inline-block;
    }
    </style>
    <![endif]-->
    <title></title>
    </head>
    <body>
    <div class="img" style="width:100px">
    <img src="image1.gif" style="width:100px;height:100px;" alt=
    "image 1"><br>
    <p><span>caption 1</span></p>
    </div>
    <div class="img" style="width:150px">
    <img src="image2.gif" style="width:150px;height:100px;" alt=
    "image 2"><br>
    <p><span>caption 2</span></p>
    <p><span>A second paragraph.</span></p>
    </div>
    <div class="img" style="width:200px">
    <img src="image3.gif" style="width:200px;height:100px;" alt=
    "image 3"><br>
    <p><span>caption 3 with a longer caption that may
    wrap.</span></p>
    </div>
    </body>
    </html>

    --
    BootNic Monday, April 03, 2006 11:00 AM

    There is no such thing as an underestimate of average intelligence.
    *Henry Adams*
    BootNic, Apr 3, 2006
    #3
  4. wrote:
    > Hi,
    >
    > I am preparing a family history site with a fair few images and have
    > tried several methods of using CSS to get a caption under images.
    > These are images floated left and right as well as images centred by
    > enclosing them in p tags. A typical page is:
    >
    > http://people.aapt.net.au/~adjlstrong/strongs/chapter_5.html
    >
    > At the moment I am depending on title tags alone on the images as
    > most of the methods I have tried and read about are cumbersome and
    > convoluted or depend on images being all the same size on a page.
    >
    > A great example is:
    >
    > http://www.alistapart.com/articles/practicalcss/
    >
    > which starts simply and becomes more and more complex, leading to his
    > question: 'So now we have a bunch of nested DIVs. How is this any
    > better than the nested tables they replace?' Which he answers
    > beautifully of course :)
    >
    > Can anybody suggest a straightforward way to put captions under all
    > these images using CSS?


    <style type="text/css">

    ..pixbox{
    float: left;
    margin: .5em;
    border: 1px solid black;
    padding: .5em;
    color: #000;
    background-color: #ccc;
    text-align: center;
    }

    ..pixbox IMG {
    display: block;
    margin: 0 auto;
    border: 1px solid black;
    padding: 0;
    }

    </style>


    <div class="pixbox">
    <img src="image1.jpg" alt="my image 1">
    My caption for image 1
    </div>
    <div class="pixbox">
    <img src="image2.jpg" alt="my image 2">
    My caption for image 2
    </div>
    <div class="pixbox">
    <img src="image3.jpg" alt="my image 3">
    My caption for image 3
    </div>
    ...




    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Apr 3, 2006
    #4
  5. wrote:

    > Can anybody suggest a straightforward way to put captions under all
    > these images using CSS?


    There are several straightforward ways, with or without CSS. None of them is
    the correct one, since there is no markup designed for image captions, sadly
    enough. It's up to your taste and style as well as the context.

    For example, you could put each image in a single-cell table with a <caption>
    element and use an HTML attribute and/or some CSS to make the caption appear
    under the cell. This would work both for isolated images and (using
    <table align="left"> or <table align="right">) for floated images. More info:
    http://www.cs.tut.fi/~jkorpela/www/captions.html

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Apr 3, 2006
    #5
  6. mbstevens Guest

    wrote:
    > 'So now we have a bunch of nested DIVs. How is this any
    > better than the nested tables they replace?'


    If there are multiple image-caption pairs
    they _do_ qualify as tabular data -- so long as you
    keep all the images in one row/col, and all the captions
    in another row/col. This is not so good if there are enough
    images with captions _under_ them to wrap or cause
    horizontal scrolling. That's a reason to put the captions
    in one column _beside_ the images in a second column,
    if you are using a table.

    But if the captions must be under the images
    and there are enough to wrap or cause horizontal
    scrolling, then I would
    agree that the data should be represented in divs.

    Here's a good article on div representation:
    http://realworldstyle.com/thumb_float.html
    --
    mbstevens
    http://www.mbstevens.com/howtothumb
    http://rstoutart.com/j2905/paint.html (tabular labels/images)
    mbstevens, Apr 3, 2006
    #6
  7. Jose Guest

    > If there are multiple image-caption pairs
    > they _do_ qualify as tabular data -- so long as you
    > keep all the images in one row/col, and all the captions
    > in another row/col.


    How about putting the image and caption in the same cell, separated by a
    carriage return (or paragraph delimiter)? This should have the effect
    of keeping the two together, while putting the caption below the
    picture. Some may argue that it's not really a "table" with just one
    column; but I'd say it's a degenerate table and if that's what must be
    done to get around the lack of a caption element, so be it.

    Jose
    --
    Nothing takes longer than a shortcut.
    for Email, make the obvious change in the address.
    Jose, Apr 3, 2006
    #7
  8. mbstevens Guest

    Jose wrote:
    >> If there are multiple image-caption pairs
    >> they _do_ qualify as tabular data -- so long as you
    >> keep all the images in one row/col, and all the captions
    >> in another row/col.

    >
    >
    > How about putting the image and caption in the same cell, separated by a
    > carriage return (or paragraph delimiter)?


    In that case, there is no association of data down rows or across
    columns. You no longer have semantic markup. I would just use a div,
    which is _made_ for use as a kind of bag into which associated data
    can be placed.

    > This should have the effect
    > of keeping the two together, while putting the caption below the
    > picture. Some may argue that it's not really a "table" with just one
    > column; but I'd say it's a degenerate table and if that's what must be
    > done to get around the lack of a caption element, so be it.
    >
    > Jose
    mbstevens, Apr 3, 2006
    #8
  9. Jim Moe Guest

    wrote:
    >
    > Can anybody suggest a straightforward way to put captions under all
    > these images using CSS?
    >

    See also
    <http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm>.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Apr 3, 2006
    #9
  10. dorayme Guest

    In article <>,
    wrote:
    >several methods of using CSS to get a caption under images.
    > These are images floated left and right as well as images centred by
    > enclosing them in p tags. A typical page is:
    >
    > http://people.aapt.net.au/~adjlstrong/strongs/chapter_5.html
    >
    > At the moment I am depending on title tags alone on the images as
    > most of the methods I have tried and read about are cumbersome and
    > convoluted or depend on images being all the same size on a page.
    >
    > A great example is:
    >
    > http://www.alistapart.com/articles/practicalcss/
    >


    Well, there are complex issues here. For a start, this reference
    uses pics all the same size and so will be no help on this
    particular variable. But it is a nice example of some things, one
    of them being that it does separate style from content which
    should by now obviously be a good thing (whether over-riding is
    another matter).

    And it has the nice advantage of wrap. This is a very great
    advantage for a page chock full of thumbnails. You won't get this
    in tables, you will get scrollbars!

    As for tables being easier to write up, yes, probably. But only
    if you are judging crude looks. More subtle ones to accomodate
    different sized thumbnails to line up nicely in some way and it
    gets trickier even in tables.

    > Can anybody suggest a straightforward way to put captions under all
    > these images using CSS?


    Well, he did! It was simple enough? You break, you text-align and
    that is that. By the way, if you don't like the large space
    between the pic and the caption, add a zero or smaller
    line-height (assuming the caption is _not_ going to go on and on
    to wrap)

    If you are just captioning larger pictures, instead of your <p
    class="centre"><img src="images/headstone.jpg" title="Headstone
    of Joseph Strong" alt="Headstone of Joseph Strong" width="510"
    height="283" /></p> use a div, style it to centre and so on. (i
    am surprised, given you are using a centered p, that you did not
    just go on and simply use a break and caption text in the p?

    --
    dorayme
    dorayme, Apr 4, 2006
    #10
  11. OT: (was Re: Captions under images)

    While the city slept,
    () feverishly typed...

    > Hi,


    Hello again,

    So, you are still subjecting the legitimate owners of spamsux.com to ironic
    spam, despite my previous message (backed up by others on the group)

    Again, I ask, are you the legitimate owner of spamsux.com, or have they
    allowed you to use the domain as a reply-to address? The domain is
    registered, so if you are using it without their permission, they may have
    reasonable grounds to be rather annoyed -- especially if your posts to
    usenet are causing more spam to arrive on their servers.

    Cheers,
    Nige

    --
    Nigel Moss http://www.nigenet.org.uk
    Mail address will bounce. | Take the DOG. out!
    "Your mother ate my dog!", "Not all of him!"
    nice.guy.nige, Apr 6, 2006
    #11
  12. Guest

    Re: OT: (was Re: Captions under images)

    Hi,

    Ooooops, sorry about that!!! I will change,

    Andrew.

    On Thu, 6 Apr 2006 01:15:31 +0100, "nice.guy.nige"
    <> wrote:

    >While the city slept,
    >() feverishly typed...
    >
    >> Hi,

    >
    >Hello again,
    >
    >So, you are still subjecting the legitimate owners of spamsux.com to ironic
    >spam, despite my previous message (backed up by others on the group)
    >
    >Again, I ask, are you the legitimate owner of spamsux.com, or have they
    >allowed you to use the domain as a reply-to address? The domain is
    >registered, so if you are using it without their permission, they may have
    >reasonable grounds to be rather annoyed -- especially if your posts to
    >usenet are causing more spam to arrive on their servers.
    >
    >Cheers,
    >Nige
    , Apr 6, 2006
    #12
  13. Re: OT: (was Re: Captions under images)

    Hi Again!,

    That should be better?

    Andrew.


    On Thu, 06 Apr 2006 10:32:13 +1000, wrote:

    >Hi,
    >
    > Ooooops, sorry about that!!! I will change,
    >
    > Andrew.
    >
    >On Thu, 6 Apr 2006 01:15:31 +0100, "nice.guy.nige"
    ><> wrote:
    >
    >>While the city slept,
    >>() feverishly typed...
    >>
    >>> Hi,

    >>
    >>Hello again,
    >>
    >>So, you are still subjecting the legitimate owners of spamsux.com to ironic
    >>spam, despite my previous message (backed up by others on the group)
    >>
    >>Again, I ask, are you the legitimate owner of spamsux.com, or have they
    >>allowed you to use the domain as a reply-to address? The domain is
    >>registered, so if you are using it without their permission, they may have
    >>reasonable grounds to be rather annoyed -- especially if your posts to
    >>usenet are causing more spam to arrive on their servers.
    >>
    >>Cheers,
    >>Nige
    sorry.no.email@post_NG.com, Apr 6, 2006
    #13
  14. Stan McCann Guest

    Stan McCann, Apr 6, 2006
    #14
  15. Re: OT: (was Re: Captions under images)

    Hi Stan,

    Thanks for your reply:

    On 6 Apr 2006 09:14:16 -0700, Stan McCann <> wrote:

    >sorry.no.email@post_NG.com wrote in
    >news::
    >
    >> Hi Again!,
    >>
    >> That should be better?

    >
    >Now would you change your top posting behavior to in-line?


    Should I also change my will to include you :)

    Andrew.
    sorry.no.email@post_NG.com, Apr 7, 2006
    #15
    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. GrumpyDev
    Replies:
    0
    Views:
    415
    GrumpyDev
    Aug 21, 2003
  2. Andrew Crowe

    associating captions with images

    Andrew Crowe, Apr 5, 2004, in forum: HTML
    Replies:
    7
    Views:
    389
    Jukka K. Korpela
    Apr 6, 2004
  3. Kooner

    captions under photos

    Kooner, Jun 1, 2004, in forum: HTML
    Replies:
    35
    Views:
    1,252
    Mark Parnell
    Jun 30, 2004
  4. (Pete Cresswell)
    Replies:
    5
    Views:
    561
    brucie
    Oct 21, 2004
  5. Andrew
    Replies:
    2
    Views:
    360
    Andrew
    Dec 1, 2006
Loading...

Share This Page