Image in a span issue

[Michael Laplante]

This is probably an easy thing that I'm overlooking.

What I'm trying to accomplish:
An image surrounded by white padding, surrounded by a black border. An image
caption would appear INSIDE the black border, giving the whole thing a kind
of annotated "photo" look.

The images will be either to the left or right with main body text flowing
around them, or in the center of the page with no text flowing around them,
i.e. as their own paragraph.

The code:

..floatingright {
float:right;
border-style:solid;
border-width:1px;
padding:10px;
margin:5px;
text-align: center;
}

The code above produces the first effect I'm trying to achieve very nicely,
i.e. captioned photos with main body text flowing nicely around them.

In the main body, the code is:
<p><span class="floatingright"><img....><h2>Image caption<h2></span></p>


However, the code below doesn't work:
..centre {
float:none;
border-style:solid;
border-width:1px;
padding:10px;
margin:5px;
text-align: center;
background-color: White;
}

<p align="center"><span class="centre"><img....><h2>Image
caption<h2></span></p>

I get the image in the centre of the page, but it isn't surrounded by white
padding or black border. Instead the padding and border appear in a small
band at the bottom and behind the image -- as if the image is "too big" for
the container. Make sense?

This page is on my hard drive, so no example online posted but I can do, if
no one can figure it out.

Must be something easy I'm missing right?

M

 

[Michael Laplante]

This is probably an easy thing that I'm overlooking.

Belay all. Solved the issue -- using a block level element inside another.
Using <b> instead of <h2> solves the problem.

M

 

[Jonathan N. Little]

Belay all. Solved the issue -- using a block level element inside another.
Using <b> instead of <h2> solves the problem.

Sort of your problem was trying to put a *block* element inside an
*inline* element. A standard class for me (I use combination of 2
classes to float images left or right...

STYLE:
..pixbox {
margin-bottom: 1em; padding: 1em; border: 1px solid black;
color: black; background-color: silver;
font-size: .8em; font-family: arial, helvetica, sans-serif;
}
..pixbox IMG { display: block; margin: auto; }
..pushright { float: right; margin-left: 1em; }
..pushleft { float: left; margin-right: 1em; }



CODE:

<div class="pixbox pushright">
<img src="somepix.jpg" alt=My Pix">
The caption for pix floated right
</div>


or

<div class="pixbox pushleft">
<img src="somepix.jpg" alt=My Pix">
The caption for pix floated left
</div>