WordPress.org

Forums

[resolved] Wrapping Text Around an Image (33 posts)

  1. mkgago
    Member
    Posted 10 years ago #

    I'm having trouble wrapping text around an image in the body of a post. A previous topic in this forum recommended this site http://www.tamba2.org.uk/wordpress/graphicalcss/align/index.html for that issue. I've tried to do what that page says (even though, honestly, some of the things on that page--like pasting things twice into the css doc--don't make any sense to me), to no avail.

    My site is http://www.tatteredcoat.com , and the post I'm having a problem with is the top one--"Shooting the Moon."

    Here is what's in the style sheet:

    .img-shadow1 {
    clear: both;
    float:right;
    background: url(images/shadowAlpha.png) no-repeat bottom right !important;
    background: url(images/shadow.gif) no-repeat bottom right;
    margin: 20px 0 0 17px !important;
    margin: 20px 0 0 8px;
    }

    .img-shadow1 img {
    display: block;
    position: relative;
    background-color: #fff;
    border: 1px solid #a9a9a9;
    margin: -6px 6px 6px -6px;
    padding: 4px;
    }
    div.clearer {
    clear: left;
    line-height: 0;
    height: 0;
    }

    And here is the code from the message itself:

    <div class="img-shadow1">
    <img src="URL" align="right">
    </div>
    <div class="clearer"> </div>

    What am I doing wrong? How can I get the text to wrap around the image?

    Thanks in advance for your help.

  2. Mark (podz)
    Support Maven
    Posted 10 years ago #

    Put all that stuff on the same line.

    Here is exactly what one of my last posts looks like in the edit box:
    <div class="img-shadow"><img src="http://www.tamba2.org.uk/T2/pix/chaos11.gif" alt="" /></div>
    Apparently it drives the internet. I"ve just read somewhere that it was the people wanting

    Not that the image stuff is all on one line and that there is then a linebreak before the text.

  3. mkgago
    Member
    Posted 10 years ago #

    actually, it is on one line in the code itself--I just spaced it that way to make it readable here. but thanks for the thought.

    (this is another example, however, of something that doesn't make sense to me in that tamba2 page--what difference does it make whether code is on the same line?)

  4. mkgago
    Member
    Posted 10 years ago #

    aha! fixed the problem. Podz, I noticed that your code doesn't contain an align property in the image tag, while mine did. Now that I've removed it, the text is wrapping.

    It looks like this was entirely my fault, as the tamba2 page does not include any alignment in the image tag itself.

    Thanks for the help, Podz.

  5. Mark (podz)
    Support Maven
    Posted 10 years ago #

    Glad it's all working :)

  6. steagl
    Member
    Posted 10 years ago #

    You have the image floating to left in the CSS but alligned to right in the HTML, change the HTML into:

    <div class="img-shadow1">
    <img src="URL">
    </div>
    <div class="clearer"> </div>

    and it will works fine.

    Bye

  7. mkgago
    Member
    Posted 10 years ago #

    hey podz, how can i get my site's URL to be linked from my name on the right hand column of this page? When I look at my profile page, I don't see a place to enter a URL....

  8. benjellos
    Member
    Posted 10 years ago #

    I am having all kinds of trouble wrapping text, can someone please help?

    Here is my post:
    <div class="img-shadow"><img src="http://www.thebenjies.com/wp-images/Hawkeye.gif" alt="Hawkeyes" /><div class="clearer"> </div>
    I can't believe it, maybe I can. Iowa takes the top team in the nation into overtime, but Northwestern takes Iowa into overtime and we lose. I've lost all hope!</div>

    Here is my result
    http://www.thebenjies.com

  9. mooses
    Member
    Posted 10 years ago #

    This isn't help for the text-wrapping (which I always have problems with myself), but if you include the image width in the div tag, like so:
    <div class="img-shadow" style="width:136px;">
    then the image shadow will sit where it's supposed to.

  10. Mark (podz)
    Support Maven
    Posted 10 years ago #

    @benjellos
    <div class="clearer"> </div>
    Take that line away.
    You might need it after the text if the text is shorter than the image, but for now, just remove it.

  11. benjellos
    Member
    Posted 10 years ago #

    Still having no luck with this, made some adjustments but still not wrapping.

  12. benjellos
    Member
    Posted 10 years ago #

    <img src="http://www.thebenjies.com/wp-images/Hawkeye.gif" alt="Hawkeyes" />I can't believe it, maybe I can. Iowa takes the top team in the nation into overtime, but Northwestern takes Iowa into overtime and we lose. I've lost all hope!

  13. Mark (podz)
    Support Maven
    Posted 10 years ago #

    benjellos - I'm sure you are going to say YES!!! but are you sure you have followed everything on that page ? It does work - honestly it does. I use this technique a lot, and the latest post I have has code the same as in the second post above.

  14. benjellos
    Member
    Posted 10 years ago #

    This is what I added to my layout.css

    div.cent {
    text-align: center;
    }

    div.clearer {
    clear: left;
    line-height: 0;
    height: 0;
    }

    .img-shadow {
    clear: both;
    float:left;
    background: url(images/shadowAlpha.png) no-repeat bottom right !important;
    background: url(images/shadow.gif) no-repeat bottom right;
    margin: 20px 0 0 17px !important;
    margin: 20px 0 0 15px;
    }

    .img-shadow img {
    display: block;
    position: relative;
    background-color: #fff;
    border: 1px solid #a9a9a9;
    margin: -6px 6px 6px -6px;
    padding: 4px;
    }

    .p-shadow {
    width: 90%;
    float:left;
    background: url(images/shadowAlpha.png) no-repeat bottom right !important;
    background: url(images/shadow.gif) no-repeat bottom right;
    margin: 10px 0 10px 30px !important;
    margin: 30px 0 0 8px;
    }

    .p-shadow div {
    background: none !important;
    background: url(images/shadow.gif) no-repeat left top;
    padding: 0 !important;
    padding: 0 6px 6px 0;
    }

    .p-shadow p {
    color: #777;
    background-color: #fff;
    font: italic 1em georgia, serif;
    border: 1px solid #a9a9a9;
    padding: 4px;
    margin: -6px 6px 6px -6px !important;
    margin: 0;
    }

  15. Mark (podz)
    Support Maven
    Posted 10 years ago #

    Do you want to edit that top post that you have now ?
    I can see the code and once it's in, if it does not work I'll try and figure why not.

    (I'm online and checking your site now)

  16. benjellos
    Member
    Posted 10 years ago #

    You can take a look if you wish.
    I'm sure it's something easy that I'm missing.

  17. benjellos
    Member
    Posted 10 years ago #

    Anyone. . .please help

  18. Mark (podz)
    Support Maven
    Posted 10 years ago #

    The View Source for the current post shows this:
    <div class="storycontent">
    <p><img src="http://www.thebenjies.com/wp-images/Hawkeye.gif" alt="Hawkeyes" />I can’t believe it, maybe I can. Iowa takes the top team in the nation into overtime, but Northwestern takes Iowa into overtime and we lose. I’ve lost all hope! asd asd as ............
    </p>

    There is no css for the wrapping ?

  19. benjellos
    Member
    Posted 10 years ago #

    What am I missing?
    Tell me what to add, still learning CSS.

  20. davincim
    Member
    Posted 10 years ago #

    I'm having trouble with wrapping text as well. I followed what mkgago did, and I made a little progress, but the text is not going high enough.

    I'm trying to wrap the text in the first post found on http://www.familywebwatch.com/blog

    Any help is most appreciated.

  21. davincim
    Member
    Posted 10 years ago #

    Anyone?

  22. Gillie2tat
    Member
    Posted 10 years ago #

    You don't do it with CSS is my understanding - you put align="right" or align="left" into the image tag and the text will flow around it.

    Like this:-

    <img src="myimage.jpg" align="right" alt="my picture" height="x number of pixels indicating height of image" width="x number of pixels indicating width of image" title="my picture">

    The reason I include the title is that it will show up as a tooltip in browsers other than IE whereas the ALT tag only shows up as a tooltip in IE but is required under HTML disability specs at W3.

  23. Gillie2tat
    Member
    Posted 10 years ago #

    also align="center" used in this way is not recognised by any browser. Only align="right" and align="left" are recognised.

  24. davincim
    Member
    Posted 10 years ago #

    Thanks, Gillie2tat. I'll give it a try.

  25. davincim
    Member
    Posted 10 years ago #

    Okay, it worked! But now I need help with putting space around the image. I tried using "vspace" and "hspace", but it doesn't seem to be the correct solution.

    ???

  26. clay
    Member
    Posted 10 years ago #

    I prefer to set the float and margins for images manually- and tweak the results.

    Don't use align on the image tag- it is deprecated in xhtml

    this is what I do for image wrapping:

    <img style="float:right; padding: 10px 0 20px 20px; " src="http://imageurl " alt="alt text" />

    Change float to left and swap the padding for a left side image

  27. davincim
    Member
    Posted 10 years ago #

    clay,

    That did the trick! Thanks! :)

  28. clay
    Member
    Posted 10 years ago #

    davincim:

    If you end up with a few words dangling underneath the picture, adjust the amount of bottom padding: sometimes I use padding: 10 0 50 20 if I want to push text from the bottom of the picture over

  29. hallierichter
    Member
    Posted 9 years ago #

    Okay...I have tried everything on this page and not one single thing works!! The shadow thing almost works, the text is wrapping around an empty space and then the image displays much much lower on the page... I need help. I have tried this for two days and am feeling quite desperate! Please, help me.

    http://www.michiganblog.net

  30. moshu
    Member
    Posted 9 years ago #

    This is where your blog is looking for the "shadow" img.
    Is it there?
    /wordpress/wp-content/themes/journalized-winter[1]/images/shadowAlpha.png
    Notice the [1] in the theme name!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.