Support » Fixing WordPress » Wrapping Text Around an Image

  • Resolved mkgago

    (@mkgago)


    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.

Viewing 15 replies - 1 through 15 (of 32 total)
  • Mark (podz)

    (@podz)

    Support Maven

    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.

    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?)

    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.

    Mark (podz)

    (@podz)

    Support Maven

    Glad it’s all working 🙂

    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

    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….

    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

    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.

    Mark (podz)

    (@podz)

    Support Maven

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

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

    <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!

    Mark (podz)

    (@podz)

    Support Maven

    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.

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

    Mark (podz)

    (@podz)

    Support Maven

    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)

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

Viewing 15 replies - 1 through 15 (of 32 total)
  • The topic ‘Wrapping Text Around an Image’ is closed to new replies.