WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Wrapping text Around Images (22 posts)

  1. brianbonner
    Member
    Posted 8 years ago #

    Ok now I have a new problem. Wrapping text around images. I followed the tutorial and added this to the .css:
    p img { padding: 0; max-width: 100%; }
    p.center { text-align: center; }
    p.right { text-align: right; }
    p.blue { color: blue; }
    p.red { color: red; }
    p.green { color: green; }
    p.purple { color: purple; }
    p.black { color: black; }
    img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
    img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }
    img.center {display: block; margin-left: auto; margin-right: auto}

    I used this code in the post:
    <img src="/wp-images/nativity.jpg" alt="Nativity Scene" class="left" />
    Now this works great when looking at it in Firefox, but in IE the image is blank. What gives?

    You can see the post here:
    http://uncooperativeblogger.com/2005/12/01/the-war-on-christmas/

  2. brianbonner
    Member
    Posted 8 years ago #

    I am doing it exactly as it says in the wp codex, and the style sheet is exactly like the default now, and it still shows a blank where the image should be in IE.

    Nobody knows how to do this properly?

  3. vkaryl
    Member
    Posted 8 years ago #

    See reply to other thread please.

  4. The image being that small one? Visible in both FF and IE.

  5. brianbonner
    Member
    Posted 8 years ago #

    I needed to add

    position: relative;

    to the style sheet. This was left out of the tutorial.

  6. Robin
    Member
    Posted 8 years ago #

    Hey ok I tried to do this and it didn't work...can someone help me here I've been trying to set up my blog this way for a while now.

    http://fragilemusings.net

    Here is my css:

    http://www.fragilemusings.net/wp-content/themes/thirteen/style.css

    And here is what I did with the image in the post:

    <img src="/pics/housework.jpg" alt="Housework" class="right" />

  7. Robin
    Member
    Posted 8 years ago #

    Any help would be really appreciated.

  8. Robin
    Member
    Posted 8 years ago #

    Ok somebody must know.

  9. jwurster
    Member
    Posted 8 years ago #

    Maybe add "postion: relative;" to the left and right items. I think I saw that in another forum post.

  10. Robin
    Member
    Posted 8 years ago #

    I don't know what you mean? Where in the CSS should I put that?

  11. jwurster
    Member
    Posted 8 years ago #

    Where you defined the "left" and "right" image information?

  12. moshu
    Member
    Posted 8 years ago #

    Instead of "display: inline" you should have
    float: left; [or right] for those right/left image classes. No position whatever needed.

  13. Robin
    Member
    Posted 8 years ago #

    Oooooh, it works! Thanks!!!

  14. brianbonner
    Member
    Posted 8 years ago #

    This is the correct code:

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

  15. brianbonner
    Member
    Posted 8 years ago #

    Moshu,
    You better check that with IE. For IE you need position: relative;

  16. WP1
    Member
    Posted 8 years ago #

    Hello!

    I just want to thank brianbonner for initially posting about this and all the contributors.

    This information has saved me so much time. My post now look so professional.

    I am placing the RSS feed into my NewsReader.

    Thank you, thank you, thank you all.

    WP1

    Edit: OOPs!! The RSS feed does not appear to be working. WP1

  17. Pentarix
    Member
    Posted 8 years ago #

    I'm still looking for an answer on this, none of the things recommended here have worked for me. I'm trying to add an image on my About page at http://www.solegoal.com and have the text wrap around to the left of it, any suggestions?

  18. Doodlebee
    Member
    Posted 8 years ago #

    moshu is correct - if you want your image to be on the left, and the text to wrap around the right side, you have to have this:

    img.left {
    float:left;
    margin: 0 5px 5px 0;}

    and yout HTML:

    <img src="image" class="left">

    This will give your image 5 pixels padding on the right side and the bottom, and the text will wrap around the image. No "position:relative;" needed - not even for IE.

    However, for IE - the fact that you used "display:inline" is why you need that relative positioning. Floats work just as well for IE as they do for any other browser (amazingly) - and they are for this type of purpose. That's all you need.

  19. bemedia200
    Member
    Posted 7 years ago #


  20. lonetrotter
    Member
    Posted 7 years ago #

    Have I understood everything right if I say I still have to edit each imported image and write class="left" even if I use this tips above?

    Im in need of the same function - but without writing anything. I want to introduce this to some very lowtech people - and I think the left and right align buttons is just enough advanced. Is there no way to let the buttons automatically apply class="left" if I for example mark the image and push the align left button?

  21. cunparis
    Member
    Posted 7 years ago #

    I'm using this technique on my blog and it works fine for IE but for Firefox it doesn't work. It puts my image way down on the page. I can't figure out why. If anyone has any ideas please let me know. I'm using Firefox 2.0b2 so it's possible it's a bug.

    http://www.michaelmattox.com/blog/2006/09/30/the-post-office-is-a-bank/

    in my blog entry:

    <img class="left" id="image12" src="http://www.michaelmattox.com/blog/wp-content/uploads/2006/09/la-banque-postale-logo.png" alt="La Banque Postale Logo"/>Well it is in France at least. I kind of forget this fact....

    and in my css:

    img.left {
    float:left;
    border: 0px;
    margin: 5px 10px 0px 5px;
    }

  22. cunparis
    Member
    Posted 7 years ago #

    I figured out the problem, I submitted a bug for firefox but I'm not sure if it's a bug or just not specified in the css specs.

    the solution was to put all my divs that float right inside a containing div and float that one.

    hope this helps someone..

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.