Centred image with caption

  • Thread starter Michael Laplante
  • Start date
M

Michael Laplante

This should be dead easy. I'm trying to produced a centred image on the page
framed by white trim, a black border and a caption.
This is what I have that's not working:

<p style="text-align: center;">
<span style="border: 2px solid black; background-color: white; margin: 5px;
padding: 10px;">
<img style="width: 616px; height: 639px;" alt="astronaut"
src="whatever.jpg">
<br>
This is the caption for the photo
</span>
</p>


This should be dead simple, but my borders around the image are messed up.
The span doesn't appear to "encompass" the image but is collapsed at the
bottom of the image.

M
 
C

Cylix

I never see this writing style :(
You better use a table to do so, something like

<table style="border: 1px solid #000000">
<tr>
<td><img alt="astronaut" src="img/img0001.gif"></td>
</tr>
<tr>
<td>This is the caption for the photo </td>
</tr>
</table>
 
C

Cylix

Sorry, forget the centralize requirement:

<table align="center" style="border: 1px solid #000000">
<tr>
<td><img alt="astronaut" src="img/img0001.gif"></td>
</tr>
<tr>
<td>This is the caption for the photo </td>
</tr>
</table>
 
N

Nick Theodorakis

Michael said:
This should be dead easy. I'm trying to produced a centred image on the page
framed by white trim, a black border and a caption.
This is what I have that's not working:

<p style="text-align: center;">
<span style="border: 2px solid black; background-color: white; margin: 5px;
padding: 10px;">
<img style="width: 616px; height: 639px;" alt="astronaut"
src="whatever.jpg">
<br>
This is the caption for the photo
</span>
</p>


This should be dead simple, but my borders around the image are messed up.
The span doesn't appear to "encompass" the image but is collapsed at the
bottom of the image.

The formatting model for inline elements (such as <span>) is different
from (and, IMO, harder to understand than) the formatting of blocks.
You've also complicated it by adding a replaced element (<img>) and by
using <br>. You can read more about the formatting models here:

<http://www.w3.org/TR/CSS21/>

especially paying attention to sections 8, 9 and 10.

Instead of using a <span> to make the border, change it to a <div>. Then
give it width (accounting for the image, all margins and padding) and
center it by making the left and right margins "auto."

I roughed out a couple of examples for you here:

<http://theodorakis.net/080806.html>

(examples 2 and 3, the first one is basically your markup that's not
working).

Jukka also has some ideas on using images with captions:

<http://www.cs.tut.fi/~jkorpela/www/captions.html>

Nick
 
M

Michael Laplante

Nick Theodorakis said:
The formatting model for inline elements (such as <span>) is different
from (and, IMO, harder to understand than) the formatting of blocks.
You've also complicated it by adding a replaced element (<img>) and by
using <br>. You can read more about the formatting models here:

Thx, yes, I solved this one myself before I read your reply. However, I'm
unclear what you mean by "adding a replaced element"?
Why does the line return make it more complicated?

M
 
M

Michael Laplante

Thx, solved it via the DIV route though. Honestly, I'm starting to hate CSS
for layout. The simplest of things seems to require the most awkward
solutions.

I'm tempted to simply revert to tables -- I figure if you have to keep
coming up with hacks for different versions / browsers why not just consider
tables as the "ultimate" hack and use them until the browsers get their
bloody act together?

Venting,

M
 
B

Beauregard T. Shagnasty

Michael Laplante wrote:

[CSS]
The simplest of things seems to require the most awkward solutions.

That's just because you're still new to it. Don't worry, it will all
fall into place one day soon. Took me a month or so to get the mindset,
several years ago.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top