image with caption but no ugly border and still wrap tex?
Check my sample post. If that’s what you want, you can accomplish it with some inline CSS. Try this:
<div style="float:left;margin:0 10px 5px 0;"> <img src="PATH-TO-IMAGE" alt="Img description" title="Img title" width="IMG-WIDTH" height="IMG-HEIGHT" /> <div style="color:#777;font:normal 80% Arial;">YOUR CAPTION</div> </div>
See the style property of the “wrapper” div:
float:left;margin:0 10px 5px 0;
If you want your image aligned to the left, leave the value of the float property as it is, if you want it aligned to the right… well, change the value to right.
The margin values I used are suggested, you can play with those values too. The margin values go like this:
top right bottom left
The caption wrapper has these properties/values:
color:#777;font:normal 80% Arial;
In the font property, notice that I’m using % units, you can play with it. DO NOT use pixel units (i.e. font: normal 12px Arial) that’s of bad practice. Either use ‘%’ or ’em’ units.
The color property is self explanatory. Change it to fit your needs.
Oh, and here’s my sample post
Thanks but that doesn’t seem to be working. The caption looks great – just how I want it. But the rest of the post’s text still just starts below the image. I would like it to wrap around the image like it normally does. I’m definitely no expert – maybe it’s too complicated for me. Or is it one of those things you need some sort of CSS upgrade for? I keep thinking I should be able to figure it out but I’ve been messing with it for a couple hours now…
Any more ideas before I give up?
Wait it is working! So stupid – it’s because I had no spaces in the fake copy I was using. Sheesh. Thanks so much problem solved! Yay!
No, for this you shouldn’t need the CSS upgrade.
One thing I failed to mention is that I did this in the HTML editor. If you’re using the WYSIWYG, switch to the HTML editor and try again. Since I don’t use the WYSIWYG at all, I believe the button for the HTML editor reads HTML or something like that. Sorry I can’t give you more details.
Give that a try. If you still can’t, I’ll enable the WYSIWYG so that I can give your better instructions.
glad it worked.
The topic ‘image with caption but no ugly border and still wrap tex?’ is closed to new replies.