Viewing 13 replies - 1 through 13 (of 13 total)
  • It’s best to post a link to your site if you want help with layout etc.

    Thread Starter whisperedhope

    (@whisperedhope)

    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..@_@;

    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.

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

    Thread Starter whisperedhope

    (@whisperedhope)

    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: https://butterflyd.animeblogger.net/

    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!

    Thread Starter whisperedhope

    (@whisperedhope)

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

    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.

    Thread Starter whisperedhope

    (@whisperedhope)

    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; ?>;
    }

    Thread Starter whisperedhope

    (@whisperedhope)

    I’d still like some help if anyone’s willing…

    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="https://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.

    Thread Starter whisperedhope

    (@whisperedhope)

    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.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Image Wrap?’ is closed to new replies.