|
|
Posted by Nick Theodorakis on 08/09/06 03:36
Michael Laplante wrote:
> 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
--
Nick Theodorakis
nick_theodorakis@hotmail.com
contact form:
http://theodorakis.net/contact.html
Navigation:
[Reply to this message]
|