|
|
Posted by Michael Laplante on 07/13/06 18:15
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
Navigation:
[Reply to this message]
|