WordPress.org

Ready to get started?Download WordPress

Forums

Help - how to add padding between image and text in a post (17 posts)

  1. Fabrian
    Member
    Posted 8 years ago #

    Hi,

    I'm using a sligtly modified blix theme. Basically, I was wondering if there is an easy way to add some padding inbetween an image and text in a post. *Edit (with the built in editor)

    Ex: http://www.thefabhouse.com/images/imgex.gif

    Thx,

    Fabrian

  2. moshu
    Member
    Posted 8 years ago #

    Did you have the chance to take a look at this tutorial?
    Using_Images
    (it's a very good idea to try to search the Codex before posting)

  3. Fabrian
    Member
    Posted 8 years ago #

    I did look, I guess not good enough. Thanks you!

  4. vkaryl
    Member
    Posted 8 years ago #

    Just for ease of use, keep this in mind: best way to search (considering the apparently permanently "broke" status of search here)

    In google, enter site:http://wordpress.org/support plus your search terms (after the space). Returns results for the support forum ONLY; and use site:http://wordpress.org/codex plus your search terms (after the space). Returns results for the codex ONLY.

  5. pizdin_dim
    Member
    Posted 8 years ago #

    Your should read the above tutorial. In the meantime, try adding something like margin: 40px 30px 20px 10px; as a style for the image. Keep in mind that the above numbers are probably not what you want, change them to suit. The order is "top right bottom left".

  6. Fabrian
    Member
    Posted 8 years ago #

    In the blix theme there's this..
    /* images
    --------------------------------------------------*/
    img.left {
    float:left;
    margin:0 12px 0 0;
    }

    img.right {
    float:right;
    margin:0 0 0 12px;
    }

    img.center {
    display: block;
    margin:0 auto;
    }

    /* container
    --------------------------------------------------*/

    If I add class="img.left" in the path for an inserted image through the post editor, it doesn't work the way it should. I'm not really sure why, I'm a begginer as far as css goes, I'm sure I'm doing something wrong. Is there somewhere else I'm supposed to be editing this stuff?

    Sorry for the noob post, I'm trying to learn..

  7. moshu
    Member
    Posted 8 years ago #

    The four values are in this order: top right bottom left.

  8. mstegink
    Member
    Posted 8 years ago #

    Try this link for css. It should be a great help. http://www.w3schools.com/css/default.asp

    Regards,
    Martijn

  9. pizdin_dim
    Member
    Posted 8 years ago #

    According to your stylesheet, images defined as class="left" will have a right margin of 12px and images defined as class="right" will have a left margin of 12px, which looks ok to me. Where you're perhaps going wrong is with your class="img.left", if that's what you're using. Instead, it should be something like this:


    <img src="someimage.jpg" alt="some image" class="left" />

  10. Fabrian
    Member
    Posted 8 years ago #

    Thanks for the information and links. I've been reading as much as I can since I put my site up a few weeks ago. My specialty is hardware, I haven't even thought about code in years.

    I think my main problems were with placement of tags and understanding how they should be laid out and relationships between them.

    Piz_din's link example above is really what I was looking for. Basically a what goes where type of thing.

    Again, thanks for helping someone who really shouldn't be asking these basic questions in the first place, appreciated.

  11. Fabrian
    Member
    Posted 8 years ago #

    I have one more question. I'm only using the post editor. My code is right, but the text still doesn't work right with the image. Even with my img.left class the text is still slammed up against the image. Could this be because of using the post editor or is there another way to edit the html?

    Thanks you

  12. pizdin_dim
    Member
    Posted 8 years ago #

    I've had a look at the picture on your website home page and it looks ok to me. You have the image defined as margin: 0px 12px 0px 30px and that's how it display for me. Are you sure you're not viewing your browsers cache? Assuming you're using exploder or firefox, refresh the page using Ctrl+F5.

  13. Fabrian
    Member
    Posted 8 years ago #

    I was just going to post that I was able to get it to work by using style="margin: 0px 12px 0px 30px;"

    Still though, Using something like: <img src="testimg.gif" class="left" /> doesn't do a damn thing in the post editor (refering to the class). The class is there in the stylesheet, I wish I could just insert it. Any idea why it's not working?

  14. pizdin_dim
    Member
    Posted 8 years ago #

    In your "layout.css" file you have

    img.left {float:left; margin:0 12px 0 0;}
    img.right {float:right; margin:0 0 0 12px;}

    Which is not the same margin as what you have with your inline style above.

  15. vkaryl
    Member
    Posted 8 years ago #

    If you're using the "functionality" (yeah, read sarcasm there) offered by the inbuilt rich text editor, you won't be able to add stuff like that no matter that it exists within the stylesheet, because the inbuilt "functionality" strips the html out of your posts and edits.

    If you disable the RTE, you should be able to insert those tags where you want them.

  16. spencerp
    Member
    Posted 8 years ago #

    Edited* Glad ya got it now!

    spencerp

    Since it's RESOLVED now, can ya maybe change the status of this post to "resolved" rather then unresolved!?

  17. Fabrian
    Member
    Posted 8 years ago #

    Pizdin: I know, I just messed with it and that's how it turned out.

    Vkaryl: Disabling the rich text editor worked. My class entry now works!

    Thank you guys so much!

Topic Closed

This topic has been closed to new replies.

About this Topic