WordPress.org

Ready to get started?Download WordPress

Forums

Image Wrap? (14 posts)

  1. WhisperedHope
    Member
    Posted 7 years ago #

    When I try to wrap text around images, there is no space between the image and the test, as seen here:
    http://i2.photobucket.com/albums/y5/xoNoaox/Other%205/Help1.png

    I tried using that 'class' thing, and adding something to the stylesheet pretaining the images, but it doesn't seem to work. As well, I can't skip a line in the image and do something like this person has done on their blog:

    http://i2.photobucket.com/albums/y5/xoNoaox/Other%205/Help2.png

    Skipping lines doesn't seem to work for me because I believe the text is filling up the space between the image and the sidebar instead of just going to a new line. Any help? ^^;

  2. onocrotalus
    Member
    Posted 7 years ago #

    It's best to post a link to your site if you want help with layout etc.

  3. moshu
    Member
    Posted 7 years ago #

  4. WhisperedHope
    Member
    Posted 7 years ago #

    I tried the Codex @_@; That was where I got the 'class' thing and the stuff I put in the style sheet, both of which didn't work, unless I did something wrong somewhere @_@;

    Is layout the problem? I just wanted the text to wrap..@_@;

  5. Bodhipaksa
    Member
    Posted 7 years ago #

    You need to have a margin specified in the stylesheet pertaining to the class that the photograph has been assigned to. If the image is floating to the left, as in the screenshot, you need to put a margin on the right, and probably the top and bottom as well. So something like

    margin:5px 12px 5px 0px; put into that class would do what you want.

  6. moshu
    Member
    Posted 7 years ago #

    Sorry, I can't see code in an image. You want specific help with code? Provide a link...

  7. WhisperedHope
    Member
    Posted 7 years ago #

    Oh, that margin worked for the one picture in the screenshot, but then all my other pictures went wrong xP But thanks for the help! Definitely got closer.

    EDIT: Oh, here's the site, then: http://butterflyd.animeblogger.net/

  8. Bodhipaksa
    Member
    Posted 7 years ago #

    You need to assign a unique class to that picture. Then the style you apply to it won't affect anyone else.

    But so far you've not been very forthcoming. If the best you can do is to tell us you put "stuff" in your stylesheet how do you expect anyone to help you?

    Goodnight and good luck!

  9. WhisperedHope
    Member
    Posted 7 years ago #

    I'm sorry? I don't what people need to help @_@; Sorry I asked v_v;

  10. moshu
    Member
    Posted 7 years ago #

    People need information to be able to help you. Saying things like "I put stuff in stylesheet..." doesn't give a clue what did you do.

  11. WhisperedHope
    Member
    Posted 7 years ago #

    Hm, okay, well, I tried putting that class="right", class="left", etc. in the image src but that didn't leave a space. Then I put

    img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
    img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }

    in the style sheet, but that didn't work, either. My stylesheet currently has this pretaining to images:

    .post img {
    float:left;
    border:1.5px solid <?php echo $water_maincolor_1; ?>;
    margin:0 0 1px 3px;
    }

    .post .wp-smiley {
    float:none;
    border:0;
    margin:0;
    }

    #content a img {
    border: 1.5px solid <?php echo $water_maincolor_2; ?>;
    }

  12. WhisperedHope
    Member
    Posted 7 years ago #

    I'd still like some help if anyone's willing...

  13. Michael Bishop

    Posted 7 years ago #

    Your CSS needs help. I could only find one example of an image with text, the one that's in the first screen shot. Your CSS for images in posts automatically floats it left, however you've added the class="right" to the image, which does nothing, as it appears you've drop that from the style sheet.

    A quick CSS primer, when using padding and margins, you can define top, right, bottom, left margins in one declaration (in that order).

    So your CSS is floating the image to the left, but giving the right margin 0. Change that to margin: 0 5px 1px 3px and you should have a 5px gap between the images and the text.

    A better approach would be delete that .post img and create two classes, .left and .right.

    If it was me, I'd do
    .left {
    float: left;
    border:1.5px solid <?php echo $water_maincolor_1; ?>;
    padding: 2px;
    margin: 0 5px 0 5px;
    }

    and
    .right {
    float: right;
    border:1.5px solid <?php echo $water_maincolor_1; ?>;
    padding: 2px;
    margin: 0 5px 0 5px;
    }

    Then add the class the img tag (<img class="left" src="http://example.com/image.jpg" alt="image" />). That way, if you want the image to the right of the text, it will float over, and give some space, likewise to the left.

    I added 2px of padding between the border and image, but that's a personal preference.

    Obviously the space can be adjusted to your liking.

  14. WhisperedHope
    Member
    Posted 7 years ago #

    Ah, thanks so much for the reply ^^ I actually don't mind if the images are floating left if I be less picky, I really just want the words to be on the right of the image with space between it. I'd also like to center an image with words underneath, but I guess a permanent floating left image wouldn't premit that to work ^^;

    I tried taking out the .post img and made two classes, and it worked for the one picture in the screenshot (although the image was on the right instead of the left), but all my other images became distorted. I tried playing around with the margins also, and the pictures weren't distorted anymore, but I found that the border around said images disappeared when I did so.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags