captioning images

Discussion in 'HTML' started by Jeff Thies, Feb 9, 2004.

  1. Jeff Thies

    Jeff Thies Guest

    I'd like to place a "caption" under an image and insert both into the flow
    of text.

    I'm thinking of something like this:

    (Styles shown inline for readability, they would be defined as classes)

    <div style="float: left; padding: 10px"><img src="some_image.jpg"><div>my
    caption/credit</div></div>
    <p> enough content to flow around the image....</p>

    Perhaps the image container should have a margin set rather than padding,
    but padding doesn't break badly in old broken browsers like NS4.

    Seems like there should be a better way to do this. This is such basic
    stuff!

    What about inserting the image (and caption) into the flow of the paragraph?
    Aren't block level elements not allowed in paragraphs?

    What's the level of support for <object data="some_image_path"
    type="image/jpg"> ? (or is that jpeg). My IE5 (win 98) ignores the image and
    my Opera 7 and NS7.1 both ignore any text following the object. Haven't
    checked Mac. But that doesn't seem right. I used the example here:
    <http://www.w3.org/TR/html4/struct/objects.html>

    And, no, I don't want to add the "caption" with photoshop!

    I wasn't quite sure where to post this, I hope 3 groups isn't overkill!

    Jeff
    Jeff Thies, Feb 9, 2004
    #1
    1. Advertising

  2. Quoth the raven named Jeff Thies:

    > I'd like to place a "caption" under an image and insert both into the flow
    > of text.
    >
    > I'm thinking of something like this:
    >
    > (Styles shown inline for readability, they would be defined as classes)
    >
    > <div style="float: left; padding: 10px"><img src="some_image.jpg"><div>my
    > caption/credit</div></div>
    > <p> enough content to flow around the image....</p>


    Here's what I use.

    ..imgleft, .imgright {
    float: right;
    font-size: 90%;
    font-style: italic;
    padding: 1em;
    position: relative;
    text-align: center;
    }
    ..imgleft {
    float: left;
    }
    ..imgright {
    float: right;
    }


    <p>Blah blah blah blah blah blah blah blah blah blah blah
    <span class="imgright">
    <img src="../pathto/image.jpg" alt="Appropriate text" width="nnn"
    height="nnn" /><br>This is Caption
    </span>
    blah blah blah blah blah blah blah blah blah blah </p>

    <snip>

    > I wasn't quite sure where to post this, I hope 3 groups isn't overkill!


    The stylesheet group would have been enough, I suppose.

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Feb 9, 2004
    #2
    1. Advertising

  3. Jeff Thies

    Jeff Thies Guest

    >
    > > I'd like to place a "caption" under an image and insert both into the

    flow
    > > of text.
    > >

    <snip>
    >
    > Here's what I use.
    >
    > .imgleft, .imgright {
    > float: right;
    > font-size: 90%;
    > font-style: italic;
    > padding: 1em;
    > position: relative;


    Well that was easy enough! Why the position: relative?

    Jeff


    > text-align: center;
    > }
    > .imgleft {
    > float: left;
    > }
    > .imgright {
    > float: right;
    > }
    >
    >
    > <p>Blah blah blah blah blah blah blah blah blah blah blah
    > <span class="imgright">
    > <img src="../pathto/image.jpg" alt="Appropriate text" width="nnn"
    > height="nnn" /><br>This is Caption
    > </span>
    > blah blah blah blah blah blah blah blah blah blah </p>
    >
    > <snip>
    >
    > > I wasn't quite sure where to post this, I hope 3 groups isn't overkill!

    >
    > The stylesheet group would have been enough, I suppose.
    >
    > --
    > -bts
    > -This space intentionally left blank.
    Jeff Thies, Feb 9, 2004
    #3
  4. Jeff Thies

    Chet Guest

    "Jeff Thies" <> wrote in message
    news:XUCVb.17113$...
    | I'd like to place a "caption" under an image and insert both
    into the flow
    | of text.
    |
    | I'm thinking of something like this:
    |
    | (Styles shown inline for readability, they would be defined as
    classes)
    |
    | <div style="float: left; padding: 10px"><img
    src="some_image.jpg"><div>my
    | caption/credit</div></div>
    | <p> enough content to flow around the image....</p>
    |
    | Perhaps the image container should have a margin set rather
    than padding,
    | but padding doesn't break badly in old broken browsers like
    NS4.
    |
    | Seems like there should be a better way to do this. This is
    such basic
    | stuff!
    |
    | What about inserting the image (and caption) into the flow of
    the paragraph?
    | Aren't block level elements not allowed in paragraphs?
    |
    | What's the level of support for <object data="some_image_path"
    | type="image/jpg"> ? (or is that jpeg). My IE5 (win 98) ignores
    the image and
    | my Opera 7 and NS7.1 both ignore any text following the object.
    Haven't
    | checked Mac. But that doesn't seem right. I used the example
    here:
    | <http://www.w3.org/TR/html4/struct/objects.html>
    |
    | And, no, I don't want to add the "caption" with photoshop!
    |
    | I wasn't quite sure where to post this, I hope 3 groups isn't
    overkill!
    |
    | Jeff
    |

    Jeff,

    Why don't you just place a <br> between the image and caption and
    get rid of the caption div? It worked for me on a sample I did.
    It also validates strict 4.01 and looks ok in my browsers (IE6,
    NN7.1, Moz1.4, & Opera 7.11).

    http://webpages.charter.net/rwtest/stuff/image_caption.htm

    hth
    --
    Chet
    (remove NO.....SPAM)
    Chet, Feb 9, 2004
    #4
  5. Jeff Thies

    Jeff Thies Guest

    > | I'd like to place a "caption" under an image and insert both
    > into the flow
    > | of text.
    > |
    > | I'm thinking of something like this:
    > |
    > | (Styles shown inline for readability, they would be defined as
    > classes)
    > |
    > | <div style="float: left; padding: 10px"><img
    > src="some_image.jpg"><div>my
    > | caption/credit</div></div>
    > | <p> enough content to flow around the image....</p>
    > |
    > | Perhaps the image container should have a margin set rather
    > than padding,
    > | but padding doesn't break badly in old broken browsers like
    > NS4.
    > |
    > | Seems like there should be a better way to do this. This is
    > such basic
    > | stuff!
    > |
    > | What about inserting the image (and caption) into the flow of
    > the paragraph?
    > | Aren't block level elements not allowed in paragraphs?
    > |
    > | What's the level of support for <object data="some_image_path"
    > | type="image/jpg"> ? (or is that jpeg). My IE5 (win 98) ignores
    > the image and
    > | my Opera 7 and NS7.1 both ignore any text following the object.
    > Haven't
    > | checked Mac. But that doesn't seem right. I used the example
    > here:
    > | <http://www.w3.org/TR/html4/struct/objects.html>
    > |
    > | And, no, I don't want to add the "caption" with photoshop!
    > |
    > | I wasn't quite sure where to post this, I hope 3 groups isn't
    > overkill!
    > |
    > | Jeff
    > |
    >
    > Jeff,
    >
    > Why don't you just place a <br> between the image and caption and
    > get rid of the caption div? It worked for me on a sample I did.
    > It also validates strict 4.01 and looks ok in my browsers (IE6,
    > NN7.1, Moz1.4, & Opera 7.11).


    Thanks Chet. I think I did that so I could set the margin between the image
    the caption. But thinking of that now, I realize I can just set the margin
    on the image!

    Cheers,
    Jeff

    >
    > http://webpages.charter.net/rwtest/stuff/image_caption.htm
    >
    > hth
    > --
    > Chet
    > (remove NO.....SPAM)
    >
    >
    Jeff Thies, Feb 9, 2004
    #5
  6. Jeff Thies wrote:
    > What's the level of support for <object data="some_image_path"
    > type="image/jpg"> ? (or is that jpeg). My IE5 (win 98) ignores the image and
    > my Opera 7 and NS7.1 both ignore any text following the object. Haven't
    > checked Mac. But that doesn't seem right. I used the example here:
    > <http://www.w3.org/TR/html4/struct/objects.html>


    You need to end your object element, text inside it is treated something
    like the alt attribute of the image element. For instance:
    <object data="foo.jpg" type="image/jpeg">Alternate
    text</object>Following text
    Leif K-Brooks, Feb 9, 2004
    #6
  7. Jeff Thies wrote:

    > I'd like to place a "caption" under an image and insert both into the flow
    > of text.
    >
    > <div style="float: left; padding: 10px"><img
    > src="some_image.jpg"><div>my caption/credit</div></div>
    > <p> enough content to flow around the image....</p>


    That's more or less what I'd do. You probably want to set a width on the
    <div> though.

    > What about inserting the image (and caption) into the flow of the
    > paragraph? Aren't block level elements not allowed in paragraphs?


    You can set 'display:inline-block' on the <div>, but AFAIK that only works
    in Opera.

    > What's the level of support for <object data="some_image_path"
    > type="image/jpg"> ? (or is that jpeg).


    Good in most browsers, bad in IE/Win.

    And yes, it should be 'image/jpeg'. The list of all registered media types
    is here: http://www.iana.org/assignments/media-types/

    > My IE5 (win 98) ignores the image and


    .... see!

    > my Opera 7 and NS7.1 both ignore any text following the
    > object.


    And so they should. The <object> element works like this:

    <object data="blah" type="foo/bar">
    <p>This stuff is only displayed if the object can't be loaded.</p>
    </object>

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Feb 9, 2004
    #7
  8. In article Chet wrote:

    > Jeff,
    >
    > Why don't you just place a <br> between the image and caption and
    > get rid of the caption div? It worked for me on a sample I did.
    > It also validates strict 4.01 and looks ok in my browsers (IE6,
    > NN7.1, Moz1.4, & Opera 7.11).
    >
    > http://webpages.charter.net/rwtest/stuff/image_caption.htm


    And if you want to change it later so that image is centered and caption
    left-aligned?


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
    tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
    Lauri Raittila, Feb 9, 2004
    #8
  9. Jeff Thies

    Chet Guest

    "Lauri Raittila" <> wrote in message
    news:...
    |
    | And if you want to change it later so that image is centered
    and caption
    | left-aligned?
    |
    | --
    | Lauri Raittila <http://www.iki.fi/lr>
    <http://www.iki.fi/zwak/fonts>
    | Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on
    yksityinen
    | tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
    |

    Lauri,

    I updated my sample with the captions aligned center, left and
    right for you.

    http://webpages.charter.net/rwtest/stuff/image_caption.htm

    hth
    --
    Chet
    (remove NO.....SPAM)
    Chet, Feb 9, 2004
    #9
  10. Chet wrote:

    > > > Why don't you just place a <br> between the image and caption and
    > > > get rid of the caption div?


    Lauri:

    > > And if you want to change it later so that image is centered and caption
    > > left-aligned?


    Chet:

    > I updated my sample with the captions aligned center, left and
    > right for you.
    >
    > http://webpages.charter.net/rwtest/stuff/image_caption.htm


    And did you use <br> between image and caption?
    </question class="rhetorical">

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
    tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
    Lauri Raittila, Feb 9, 2004
    #10
  11. Jeff Thies

    Chet Guest

    "Lauri Raittila" <> wrote in message
    news:...
    | Chet wrote:
    |
    | > > > Why don't you just place a <br> between the image and
    caption and
    | > > > get rid of the caption div?
    |
    | Lauri:
    |
    | > > And if you want to change it later so that image is
    centered and caption
    | > > left-aligned?
    |
    | Chet:
    |
    | > I updated my sample with the captions aligned center, left
    and
    | > right for you.
    | >
    | > http://webpages.charter.net/rwtest/stuff/image_caption.htm
    |
    | And did you use <br> between image and caption?
    | </question class="rhetorical">
    |
    | --
    | Lauri Raittila <http://www.iki.fi/lr>
    <http://www.iki.fi/zwak/fonts>
    | Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on
    yksityinen
    | tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
    |

    In the sample as it is now, No, I didn't use the <br>. When I
    first posted it with the captions centered, yes I did.

    Chet
    Chet, Feb 9, 2004
    #11
  12. Jeff Thies

    Jeff Thies Guest

    "Chet" <> wrote in message
    news:...
    >
    > "Lauri Raittila" <> wrote in message
    > news:...
    > | Chet wrote:
    > |
    > | > > > Why don't you just place a <br> between the image and
    > caption and
    > | > > > get rid of the caption div?
    > |
    > | Lauri:
    > |
    > | > > And if you want to change it later so that image is
    > centered and caption
    > | > > left-aligned?
    > |
    > | Chet:
    > |
    > | > I updated my sample with the captions aligned center, left
    > and
    > | > right for you.
    > | >
    > | > http://webpages.charter.net/rwtest/stuff/image_caption.htm
    > |
    > | And did you use <br> between image and caption?
    > | </question class="rhetorical">
    > |
    > | --
    > | Lauri Raittila <http://www.iki.fi/lr>
    > <http://www.iki.fi/zwak/fonts>
    > | Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on
    > yksityinen
    > | tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
    > |
    >
    > In the sample as it is now, No, I didn't use the <br>. When I
    > first posted it with the captions centered, yes I did.


    I rather like the idea of the caption in the paragraph. Perhaps
    syntactically more meaningfull than a div.

    I also like Beauregard's idea of a floated span so that it can be embedded
    anywhere inside the paragraph (good for multiple images in long paragraphs).
    I had thought of floating an inline element, but I guess images are inline
    and they can be floated.

    Cheers,
    Jeff

    >
    > Chet
    >
    >
    Jeff Thies, Feb 10, 2004
    #12
  13. Beauregard T. Shagnasty wrote:

    > .imgleft, .imgright {
    > float: right;
    > font-size: 90%;
    > font-style: italic;
    > padding: 1em;
    > position: relative;
    > text-align: center;
    > }
    > .imgleft {
    > float: left;
    > }
    > .imgright {
    > float: right;
    > }


    Trying to understand this kind of styling...

    Since you first specify float: right for both classes, is it necessary
    to respecify it, below, for .imgright, again, or could you just specify the
    "exception" -- the left float for .imgleft.

    Separate question: with both left and right floats specified per class,
    below, could float be left out of the joint specification, above?

    (The way you have it is more clear for human viewers, I'd say -- so I'm
    wondering if that's why you did it that way, rather than it being
    technically necessary.)

    --
    Blinky Linux RU 4892F
    http://linuxnotjustforgeeks.org
    http://blinkynet.net
    Blinky the Shark, Feb 24, 2004
    #13
  14. Quoth the raven named Blinky the Shark:

    > Beauregard T. Shagnasty wrote:
    >
    >>.imgleft, .imgright {
    >> float: right;
    >> font-size: 90%;
    >> font-style: italic;
    >> padding: 1em;
    >> position: relative;
    >> text-align: center;
    >>}
    >>.imgleft {
    >> float: left;
    >>}
    >>.imgright {
    >> float: right;
    >>}

    >
    > Trying to understand this kind of styling...


    Me too...

    > Since you first specify float: right for both classes, is it necessary
    > to respecify it, below, for .imgright, again, or could you just specify the
    > "exception" -- the left float for .imgleft.
    >
    > Separate question: with both left and right floats specified per class,
    > below, could float be left out of the joint specification, above?


    Yes, either way. I've cleaned that up since. You don't need the first
    float and use both separate floats, or keep the first and eliminate
    the imgright { float: right; } The position: relative isn't needed,
    either.

    > (The way you have it is more clear for human viewers, I'd say -- so I'm
    > wondering if that's why you did it that way, rather than it being
    > technically necessary.)


    Thanks for pointing that out so others don't necessarily bloat their
    float.

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Feb 25, 2004
    #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. Guest
    Replies:
    4
    Views:
    896
    Eliyahu Goldin
    Jan 4, 2005
  2. Luis Esteban Valencia Muñoz
    Replies:
    0
    Views:
    770
    Luis Esteban Valencia Muñoz
    Jun 3, 2005
  3. wardemon

    Cache Images vs Static Images

    wardemon, Jun 14, 2007, in forum: ASP .Net
    Replies:
    3
    Views:
    660
    bruce barker
    Jun 14, 2007
  4. Keith Hughitt
    Replies:
    6
    Views:
    1,070
  5. Adrienne Boswell
    Replies:
    1
    Views:
    507
    dorayme
    Aug 4, 2009
Loading...

Share This Page