Without using tables and not by editing the image itself, how to create a text caption, that looks like the way some illustrations in books have a description underneath, and so that the text belongs with the image and is less wide than the image. This should be something that works without having to specify the image size.

Something like what has been attempted at muslimheritage.com or at chemistrytimes.com

5 answers

5
points

You shouldn't need that second div. Something like this should do the trick.

<div class="imgblock">
    <img src="foo" alt="bar" />
    <p>I am a caption, hear me roar!</p>
</div>

Then you can style that text based on the parent div:

.imgblock p {STYLES}
Answered over 7 years ago by Ben Shoults
1
point

You need a bit of extra markup:

<div class="imgblock">
<img src="foo" alt="bar" />
<div class="imgcaption">
I am a caption, hear me roar!
</div>
</div>

Style (borders, padding, background color, font size) as desired. So long as .imgblock is floated, it should "shrink wrap" to the size of the image. I'm struggling to recall if there are browsers in current use where the div does not shrink wrap. If this is a problem (or .imgblock is not floated) then If all your images are the same size you could add a width to .imgblock, otherwise set the width via inline style

Answered over 7 years ago by Richard Grevers
  • Edited the question to add that it should be something that works without having to specify the image size each use. Rob Kam over 7 years ago
joneff 28
1
point

I would go with Ben Shoults's answer for a starting point since it's the minimal form of such a structure. However, all other options should be had in mind.

Regardless of the case, the tricky part is not to forget to float the structure block, otherwise the image with caption will sit lonely on a new line.

Also, floats with unspecified width take the minimum possible width, which is not always as minimum as you think. Hence, don't forget widths as well. The best would be to either know how wide the image is in addvance, or set the width progamatically.

So depending on the complexity of the case, the HTML might take any of these forms

<!-- >> Basic thumb -->
<div class="thumb your-float-class">
    <img src="{src}" alt={alt} class="image" />
    <p>{caption para 1}</p>
    <p>{caption para 2}</p>
    ...
</div>
<!-- << Basic thumb -->

<!-- >> Failsafe basic thumb -->
<div class="thumb your-float-class">
    <span class="image"><img src="{src}" alt={alt} /></span>
    <p>{caption para 1}</p>
    <p>{caption para 2}</p>
    ...
</div>
<!-- >> Failsafe basic thumb -->

<!-- >> Thumb with link -->
<div class="thumb your-float-class">
    <a href="{url}" class="image"><img src="{src}" alt={alt} /></a>
    <p>{caption para 1}</p>
    <p>{caption para 2}</p>
    ...
</div>
<!-- << Thumb with link -->

<!-- >> Thumb with link and separate captions holder -->
<div class="thumb your-float-class">
    <a href="{url}" class="image"><img src="{src}" alt={alt} /></a>
    <div class="caption">
        <p>{caption para 1}</p>
        <p>{caption para 2}</p>
        ...
    </div>
</div>
<!-- << Thumb with link and separate captions holder -->

If you wonder, can I use BR instead of P, the answer is "yes", but P might come in handy in some cases.

Anyway the styles for the basic version would then be

.thumb {
    padding: 5px;
    width: 200px; /* only if you know the width for all images */
    background: #f0f0f0;
    border: 1px solid #cccccc;
}
thumb.your-float-left-class {
    margin: .5em 1em .5em 0;
}
thumb.your-float-right-class {
    margin: .5em 0 .5em 1em;
}
thumb .image {}
thumb .image img {
    border: 0;
}
thumb p {
    margin: 0.5em 0 0 0; /* Use :last-child pseudo class if you dont care about IE */
}

So from here, you could pretty much customize everything.

And finally -- hwo to choose which for of thumb block to use -- it entirely deppends on your project. Choose the one that best fits your design and would be easier to maintain. If you would provide us the design mock-up, then we might suggest something even better.

Answered over 7 years ago by joneff
  • There's a mock-up at http://zxspec.awardspace.co.uk/zx80/zx80.html Rob Kam over 7 years ago
  • That's a very rough mock-up, but there is also http://zxspec.awardspace.co.uk/zx80/ferro.html to give an idea of what to aim for. Rob Kam over 7 years ago
0
points

It's worth mentioning that in HTML5 there is specific markup to handle figures and captions. The general idea behind the new element is to codify existing practices and make the markup more semantically valuable. Here's the example from the spec:

<figure>
 <img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
           latest project intently.">
 <legend>Bubbles at work</legend>
</figure>

There is also a draft figure microformat, allowing you to include information like author and subject in such a way that it can be extracted reliably by robots (which may or may not be desirable):

<div class="figure">
  <img class="image" src="photo.jpeg" alt="">
  <p class="legend">
    <a rel="tag" href="http://en.wikipedia.org/wiki/Photography">Photo</a>
    of <span class="subject">Albert Einstein</span> by
    <span class="vcard credit">
      <span class="fn">Paul Ehrenfest</span>
      (<span class="role">photographer</span>)
    </span>
  </p>
</div>

The styling tips given in the other answers would still apply to either of these examples.

Answered over 7 years ago by Rob Crowther
danwellman 5600
-4
points

You could also use some JavaScript to automatically add captions to all the images on a page. This jQuery plugin includes a very similar sort of caption to the one in the chemistry example you linked to, but it also does really attractive animated captions that appear on mouseover: jCaption

Answered over 7 years ago by danwellman
  • I don't see why this answer deserves a -3 ?! this is an additional suggestion to those above that look at hardcoding the captions. It's not 'wrong' to use jQuery to achieve what the poster requested danwellman over 7 years ago
  • An interesting answer but it shouldn't be necessary to use JavaScript to achieve something so simple. Rob Kam over 7 years ago
  • I see your point, but if you had 500 images to caption it would no longer be something so simple. It would be tedious and repetitive (and therefore prone to errors), and time consuming (and therefore expensive). danwellman over 7 years ago