Need help? Check out our Support site, then


WordPress.com Forums » Support

image with caption but no ugly border and still wrap tex?

  1. rcbw
    Member

    Hi there,

    I'm trying to figure out how to insert an image with a caption (so I can give a photo credit under the photo) but without that weird polaroid border effect. Based on other discussions here on the forum, it seems like the best way to do that is to use a table. But when I do that the text no longer wraps around the image.

    Here's a dumby page I've been experimenting with:
    http://fishmilksalad.wordpress.com/2009/08/11/112/

    Using this:
    <table border="0">
    <tbody>
    <tr>
    <td><img src="IMAGE SOURCE HERE" width="300" height="225" class="size-medium wp-image-111" /></td>
    </tr>
    <tr>
    <td>CAPTION HERE</td>
    </tr>
    </tbody></table>

    Thanks for any help!

    The blog I need help with is fishmilksalad.wordpress.com.

  2. devblog
    Member

    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.

    HTH.

  3. devblog
    Member

    Oh, and here's my sample post

    http://sandboxskins.wordpress.com/2009/08/11/image-with-caption/

  4. rcbw
    Member

    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?

  5. rcbw
    Member

    @devblog Yes that is exactly what I want. But why isn't it working for me? :-(

  6. rcbw
    Member

    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!

  7. devblog
    Member

    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.

  8. devblog
    Member

    glad it worked.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags