WordPress.org

Ready to get started?Download WordPress

Forums

Styling images with "caption" (10 posts)

  1. riis
    Member
    Posted 7 years ago #

    Hi

    I'm styling some images with a caption class and 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... I have used all kinds of classes but I doesn't help... Any ideas?

    You can see my problem here...

    Thanks!

  2. Doodlebee
    Member
    Posted 7 years ago #

    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 :)

  3. riis
    Member
    Posted 7 years ago #

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

  4. Doodlebee
    Member
    Posted 7 years ago #

    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?)

  5. frozonecold
    Member
    Posted 7 years ago #

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

  6. whooami
    Member
    Posted 7 years ago #

    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 :P

  7. Doodlebee
    Member
    Posted 7 years ago #

    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.

  8. Drawer
    Member
    Posted 7 years ago #

    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: http://donnabarstow.com/park_blog/ and http://donnabarstow.com/WordPress/, which I know looks odd, but I'm still working on it. But it will probably always look odd.

  9. moshu
    Member
    Posted 7 years ago #

    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.

  10. Drawer
    Member
    Posted 7 years ago #

    Thank you, Moshu.

Topic Closed

This topic has been closed to new replies.

About this Topic