WordPress.org

Ready to get started?Download WordPress

Forums

Padding photos so text doesn't butt against them. (16 posts)

  1. everysandwich
    Member
    Posted 9 years ago #

    Greetings. I've just upgraded to 1.5. and all seems grand except that when I insert a pic in a post thusly, as I've done with the earlier WP version, (<img src="http://link.to.the.picture" style="padding:3px;
    margin:0px" border="1" align="right">) the text butts against the border, and changing the padding doesn't seem to help. Yet changing border or margin alters those features accordingly. How do I get some separation between the border of the pic and the text. Do need to alter something instyle.css within the default theme folder? Here's a sample of the text-to-picture crowding at the moment: (http://freelancefred.com/blog/?p=159) --- Any help or pointing to resources is appreciated.

  2. Root
    Member
    Posted 9 years ago #

    The pukka way to do this is to float the image.

  3. m8rk
    Member
    Posted 9 years ago #

    use hspace and vspace

    hspace="10" vspace="10"

  4. Root
    Member
    Posted 9 years ago #

    Well I can't go along with that. valign has long been deprecated plus separated CSS is the way to go.

  5. macgizmo
    Member
    Posted 9 years ago #

    the hspace and vspace tags will work, but the problem is that it puts that space on BOTH sides, not just the side where text butts up against it.

  6. m8rk
    Member
    Posted 9 years ago #

    "valign has long been deprecated plus separated CSS is the way to go."

    I didnt know that - thanks!

    So what's the code to float the image in css: just specifying space at the side of an image??

  7. allotherplaces
    Member
    Posted 9 years ago #

    In your example above, you have:

    <img src="http://link.to.the.picture" style="padding:3px; margin:0px" border="1" align="right">

    How do you get WP to put in: style="padding:3px; margin:0px"

    Ive seen this in the source of other WP sites and for the lif eof me i cant figure out how to do that

    thanx

  8. Pplproof
    Member
    Posted 9 years ago #

    You would add something like this to your CSS:

    #photo
    align: left | right | center
    padding: 0 0 0 0 (If four values are given, they apply to top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.)
    margin: 0 0 0 0 (If four values are given, they apply to top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.)
    border: (The border property can only set all four borders; only one border width and border style may be given. To give different values to an element's four borders, an author must use one or more of the border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, or border-left-width properties.)

    In your case, margin is the important one to pay attention to, as it determines the amount of space between itself and the next bit of content.

    After editing the CSS and defining a name for the element you're going to use, you can add this to your template.

    <img src='http://link.to.your.picture' id='photo' /> (referencing the #photo ID element that you defined in your CSS) Adjust the values in your CSS till it looks correct. Hope that helps!

  9. Pplproof
    Member
    Posted 9 years ago #

    Regarding the first post, think of padding and margins like moving to a new house. Padding is what you put inside the box, right? The padding is the space between the content and the border (even if it's invisible, use your imagination) of the "box". The margin is the space between two boxes. They do seem very similar, but that gives you a simplified idea of the difference. :)

  10. everysandwich
    Member
    Posted 9 years ago #

    Allotherplaces -- I'm too short on blogskills to have come up with a way for WP to do the work. I just kept a copy of the general link-to -picture code handy in a notepad file and then I inserted an image in the post with wp. I then swapped the image link into the notepad file and copied that whole clump back in the post, replacing blob of code WP originally inserted for the image. It was much simpler than I just described.
    Pplproof, thanks so much for that detailed and clear description. Heaven help me, I might be learning. I think I almost understand it. We are talking about the style.css doc in the default themes folder, correct?

  11. everysandwich
    Member
    Posted 9 years ago #

    pplproof -- In my style.css lines 320 to 360 of the default 1.5 theme I see code that to my untrained eye looks as if it's intended to do what you described -- img. alignright has margin settings of 0 0 2px 7px, left has 0 7px 2px 0. there's also a centered setting and one for float right and float left. So I'm guessing that my problem is that I just need to figure out how to insert images in my posts that take advantage of this CSS? There's also this descriptive bit in the CSS:
    Using 'class="alignright"' on an image will (who would've
    thought?!) align the image to the right. And using 'class="centered',
    will of course center the image. This is much better than using
    align="center", being much more futureproof (and valid) *

    I have the feeling all the information is in front of me. I just don't know my way around tags and slashes well enough to make it happen. Thanks again for your help.

  12. jeremycherfas
    Member
    Posted 9 years ago #

    Everysandwich, Given the information in the style.css that you have discovered it becomes much easier. In the IMG tag, insert class="alignright" or whatever after you have pasted it from the notebook. That's it.

    So it reads <img class="alignright" src="http://link.to.your.picture" />

    This tells the image to use the CSS setting of the class alignright, which has already been set up for you.

  13. everysandwich
    Member
    Posted 9 years ago #

    jeremycherfas, pplproof et al. That did it! Thank you so much! I really appreciate the help.

  14. Root
    Member
    Posted 9 years ago #

    I cant agree entirely with pplproof I am sorry to say. What the padding is (or should be) to be precise is platform dependant. IE and FF are the exact opposite

  15. allotherplaces
    Member
    Posted 9 years ago #

    Thanks for your replies - to all!

    OK I figured out a 'manual automated' way of inserting the code for images

    I grabbed some code and read the tutorials at
    http://www.mandarindesign.com/boxes.html#thinborderfloat

    Added the code to my CSS

    Then, I use a Mac, i added these snippets to my iSnip app:

    class="imgleft"
    class="imgright"

    to be placed into the <img src="

    if ya have a mac, go get iSnip - very simple, cool and free!

    http://isnip.net/

  16. futb0l
    Member
    Posted 9 years ago #

    I have a border around all my images so I use margin so that the text wont be touching it.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.