Forum Moderators: not2easy
They suggest the following coding to allow you to display captions:
.caption { margin: 5px;
padding: 5px;
width: 45px;
border: solid 0px #E5E5FF;
background: #E5F2FF;
font-size:90%;
color: blue }My question is how do you get the css to adjust the caption width to the width of the image? After all, not every image is going to be 45px wide. If your image is 225px wide then a 45px caption is going to look mighty silly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html>
<head>
<title> </title>
<style type="text/css">
*{
margin:0; /*removes all margins and padding from all elements*/
padding:0;
}
.image_box{
float:left; /*"shrink wraps the box width to that of the widest content*/
}
.caption {
/*block level paragraph automatically fills container, so no width is needed*/
text-align:center;
background: #E5F2FF;
font-size:90%;
color: blue;
}
</style>
</head>
<body>
<div class="image_box">
<img src="path/to/image.jpg" />
<p class="caption">Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>
cEM
Thanks ever so much for yr. help.
form, img {
margin: 0;
padding: 0;
border: 0; font-size:60%;
}a:hover img {border:solid red 1px }
p img { padding: 0; max-width: 100%; }
img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }
.right { float: right }
.left { float: left }
.caption { margin: 5px;
padding: 5px;
width: 45px;
border: solid 0px #E5E5FF;
background: #E5F2FF;
font-size:90%;
color: blue }
If I understood yr. code it specifies the image to float left. What I'd like is to create code that would give me the option of floating the image right OR left (in the current css I use class="right" or class="left" or caption="right" or caption="left" to do this).
By "container" do you mean a virtual container or a physical one like a border around the image?
<No site specifics, thanks. See TOS #13 [WebmasterWorld.com]> ..that may be more complex that you want, but it is a pretty nice approach.
[edited by: SuzyUK at 6:50 am (utc) on June 15, 2005]
Also, how would you indicate in the img display code in my blog post whether you wished the image/caption to float right or left?
cEM and rjohara are correct, however if your images are of varying sizes you will still need to have some way to tell your containing div/element (caption div) what size to be.
Whether you use max-width or width.. it's possibly best done inline as you are adding class names anyway for the floats.
If you just float the box with no width specified it will shrinkwrap the largest content but if that largest content is the caption you will land up with a wider caption than image, which I presume is not the desired effect.
So taking the code in your original post here's an example of how it might work.. try it with varying image sizes and if you change border sizes you will need to adjust the width of the caption div to suit..
CSS:
.caption {
margin: 5px;
padding: 5px;
/* width: 45px; */ /* width cannot go here unless all images are same size so put width inline instead */
border: 1px solid #777; /* I changed this to for demo */
background: #E5F2FF;
font-size:90%;
color: blue;
}
.caption img {border: 1px solid #777;} /* adjust to suit */
.left {float: left;}
.right {float: right;}/* note if border is used on the caption image the inline width of caption box should be width of image + left/right borders */
HTML
<div class="caption left" style="width: 111px;">
<img style="width: 109px; height: 56px;" src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" alt="" title="" />
<p>A caption that is wider than the image to show that float alone will not do it</p>
</div>
The caption div is your container/wrapper you can add in left or right beside caption in the class=".." bit as multiple class names can be used separated by a space.
the width should possibly be put in inline as presumably if you're entering the image details you have the image width to hand just add any image borders to the width to allow for the box-model too.. If your blog software will not allow you to add inline styles you may have to keep your images to set widths and use more (seperated) class name to select the relevant width..
Suzy
I can detect the image width as I upload & add it inline though my blog doesn't output img dimensions with its display code. Given that, I'm assuming I only have to insert the caption width & not the image dimensions in the code?
..I only have to insert the caption width & not the image dimensions in the code
Yes that should be enough, in some cases there may be a momentary flicker on page load while your browser detects the image dimensions if they're not specified, but the explicit width on the container div will at least help reduce that too.
Suzy
