Styling images with “caption”

Actually, no, you *can’t* see your problem there. ??

If you want the caption text to appear to the top right of your image, you need to do something like this:

<div class="image">
<p class="caption">Test here</p>
<img class="textify" src="image.gif" />
<hr />
</div>

And in your CSS file:

p.caption {
float:left;
}

img.textify {
float:right;
margin:0 0 5px 5px;
}

hr {
clear:both;
visibility:hidden;
}

Hope that helps you out ??

Nope… this didn’t work at all. The image wouldn’t stay inside the caption….

Image inside the caption? I didn’t suggest that.

I don’t understand what you mean by having an image *inside* the caption? Perhaps if you were more clear in your question (or posted a link that works?)

He wanted a border around the whole image with enough extra space under the image to fit a caption.

actually he said what he wanted and its not a caption at the bottom.

“I want the text inside the caption to wrap around the image to the left. I want the text to being from top-right but it will only start at bottom-right…“

If he wanted a normal caption (at the bottom) I would have piped in hours ago with the solution ??

And if he wants a obrder around it, all he needs to do is apply the border style to the outlying div.

He must want something other than what he’s asking for (not explaining it well, I mean), because the code I posted does exactly what he’s describing. Which is why I’m asking for an appropriate link that actually works.

Well, Riis never came back, but I appreciate your answers, doodlebee! I’ve found a couple of things you wrote about captions, and even though I never learned CSS, I’m trying to patch things together to finally get 2 blogs started.

One is more photos, one is more cartoons, so you can see why captions are essential.

The first time, you said to:
“So, in your post:

<div class=”caption”>
<img src=”image.gif” />
caption text here
</div>

In your stylesheet:

div.caption {
width:auto;
float:left;
font-size:0.8em;
text-align:center;
}

That’s it. Now your image is floated left, with caption text.”

I tried that, and it worked, although my code post immediately changed every div I put in it, to a p. Now I see that you changed it to a p, too.

Do you know how to make longer captions fit the width of an image, or is that what the hr is for?

I wish wish wish someone would design a plugin for captions. Another good way to stop photos, cartoons, etc, from being posted illegally and anonymously everywhere.

I’m at: https://donnabarstow.com/park_blog/ and https://donnabarstow.com/WordPress/, which I know looks odd, but I’m still working on it. But it will probably always look odd.

I tried that, and it worked, although my code post immediately changed every div I put in it, to a p.

Rule of thumb: if you use your own HTML tags (code) turn off the visual/wysiwyg editor.

Thank you, Moshu.