Wrapping Text Around an Image

  • Resolved mkgago

    (@mkgago)


    19 years, 10 months 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 https://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 https://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 - 16 through 30 (of 32 total)

  • Anyone. . .please help

    The View Source for the current post shows this:
    <div class="storycontent">
    <p><img src="https://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 ?

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

    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 https://www.familywebwatch.com/blog

    Any help is most appreciated.

    Anyone?

    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.

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

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

    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.

    ???

    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="https://imageurl " alt="alt text" />

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

    clay,

    That did the trick! Thanks! ??

    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

    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.

    https://www.michiganblog.net

    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!

    Ok…I’ve put the images there…and it still doesn’t work…in fact, when I reload it shows the flag image in a different spot. Now, it renders perfectly in netscape, but not in IE…any suggestions?

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