Skip navigation
Currently Being Moderated

How do I "wrap" text around an image

Feb 27, 2013 1:55 AM

Hi,

 

How do I wrap text around an image....like a balloon, depending on how I place the image in the text-field.

 

Like Below >>>>> if I pull the image up (green-arrow) the text must go down (blue-arrow) and around the image.

Which properties must both boxes (text-box + image-box)  have?

 

weg.jpg.

 
Replies
  • Currently Being Moderated
    Feb 27, 2013 2:48 AM   in reply to Fred K.

    If the image is at the top left it would be easy - float: left; However if you want to place it at the bottom left like in your picture it won't be possible unless you break up the text with <p>.

     

    Although I'm not sure if this is currently supported by browsers, there's CSS Regions you can use for this purpose:

    http://dev.w3.org/csswg/css3-regions/

    http://html.adobe.com/webstandards/cssregions/

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 2:54 AM   in reply to kennethkawamoto2

    You can insert the image anywhere within the text and float it left (style="float: left;"):

     

    <img src="images/myImage.jpg" width="150" height="150" alt="" style="float: left;" >

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 4:14 AM   in reply to Fred K.

    Include the below css in your css stylesheet or insert it along with the other css styles in the head section of your page.

     

    Change #subBoxName to the name you have given the yellow container.

     

    This code is for a container with and id name

     

     

    #subBoxName img {

    float: left;

    margin-right: 12px;

    margin-top: 12px;

    margin-bottom: 12px;

    }

     

     

    This code is for a container with and class name

     

    .subBoxName img {

    float: left;

    margin-right: 12px;

    margin-top: 12px;

    margin-bottom: 12px;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 5:56 AM   in reply to Fred K.

    Take the image out of the image box. You don't need another box around the image. Just insert the image into the text box (the yellow box) itself, without another box wrapping the image.

     

    Then use the name of your yellow box to replace subBoxName if its named something else.

     

    #subBoxName img {

    float: left;

    margin-right: 12px;

    margin-top: 12px;

    margin-bottom: 12px;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 11:44 AM   in reply to Fred K.

    Hi,

     

    maybe you search for this? Please have look here at a my rough layout: http://hansgd.de/AdobTest/TextUmfliessen/TextUmfliessenFotoLink.php.

     

    In this form of presentation I work with borders around the text and the image (they are naturally not necessary) and a certain spacing (can be modified at will) which surrounds the text. Into the image is integrated a link.

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 12:47 PM   in reply to hans-g.

    hans-g, your solution is closer but can you anchor your image at the bottom left as the OP specified?

     

    --

    Kenneth Kawamoto

    http://www.materiapima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 2:53 PM   in reply to kennethkawamoto2

    Hi Kenneth,

     

    hhm, didn't he say "depending on how I place the image in the text-field." BUT where is the problem, are YOU  satisfied now, by clicking to my link from above?

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 28, 2013 2:18 AM   in reply to hans-g.

    > are YOU  satisfied now

     

    How? If you look at Fred's picture, the floating image is at the bottom of the text block. Your exapmle does not do that. (No need to wrap the image in <span> by the way.) However, you may be right, Fred didn't actually mean it - may as well, since as I said earlier it's not posible to do so with simple float: left;

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 28, 2013 7:27 AM   in reply to Fred K.

    Hallo Fred,

     

    why do you not integrate your photos created with WORD for reasons of simplicity into the DW text as I've shown you above. Adapt my design just as long as it corresponds to your ideas.

     

    What concerns the text around the frog picture I do not have high hopes. I see only two possibilities:

     

    1. You use the entire file (including text and photo) as a screenshot and insert it altogether into your DW file.
    2. InDesign allows "wrapping text around objects". See also: http://helpx.adobe.com/en/indesign/using/text-wrap.html.

      As for the possibilities of export of Indesign files see

      http://help.adobe.com/en_US/indesign/cs/using/WS376CC874-7325-4e1a-BDE C-D4BAE05F90F1a.html

     

    Good luck!

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 28, 2013 8:30 AM   in reply to Fred K.

    Fred, what you are trying to do is called "exclusions".  Here's a good explanation for it: http://galjot.si/css-exclusions

     

    I made a quick example using your frog: http://www.materiaprima.co.uk/dev/exclusion/exclusion.html

     

    A big caveat: the example above currently only works on Internet Explorer 10. However, I couldn't get the IE10 to understand my polygon exclusion area though, so it is kind of working but not fully

     

    Chrome 25 currently understands exclusions (with Experimental Webkit Features flag turned on) but only for shape-inside - you'll need shape-outside for the frog to work as in my example.

     

    In any case this is for the future. Currently you cannot do this.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 28, 2013 9:01 AM   in reply to Fred K.

    Fact of the matter is, web pages are limited.

     

    Unless we have the client download fonts, we are, essentially, limited to five. Unless we use images. All exclusions, inclusions and so on are rectangular, period. It is really hard to put a photo into the middle of a web page and have text naturally flow around it like you can do in print. photos and graphics like to be floated either left or right.

     

    You can create boxes for image files and have text with them, but you have to declare a div (rectangle) for that.

     

    So we cannot do a lot of the stuff that the print people can do. And there isn't (to my knowledge) a drag-and-drop WYSIWYG website editor that actually works and creates standard HTML and CSS.

     

    But, within those limitations, we can do some pretty magnificent things.

     

    A few comments about your website, Fred. You want to make the photos and images a little larger than what they may be on the printed page. And you do, definitely, want to break up the text. Text on the Worldwide Web is pretty low-resolution, coming in at either 72 DPI (PC. Linux, Windows) or 96DPI (Macintosh, except for Retina Display, which is higher). This causes eye fatigue.

     

    You need to take any text block and break it up, either with photos or with other graphic elements so that you give the eye some "rest." As a result, you'll notice that people do not read your web pages, they scan them.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 28, 2013 9:26 AM   in reply to Fred K.

    As Mark said, designing for the web is nothing like desktop publishing.  CSS float-left and float-right are well suited to wrapping text around images but you can't position images anywhere.  They will be aligned with top of text.

    http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml

     

    Using a multi-column layout is another option but your text will remain inside boxes rather than wrap around image.

    http://alt-web.com/DEMOS/3-CSS-boxes.shtml

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 2, 2013 9:25 AM   in reply to Fred K.

    Copies of web forum posts are sent to all people who participate in a discussion if they have e-mail selected in their forum preferences.  Some people prefer not to receive e-mail copies. 

     

    HTML comments must contain double hyphens like this:

    <!--comment-->

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 2, 2013 9:55 AM   in reply to Fred K.

    Hello Fred, hello all,

     

    at the suggestion of kennethkawamoto2 about  "exclusions" I've been searching and working a little bit more. To get straight to the point: We all will have interesting possibilities to future projects AND/BUT we have to wait 'till the most of us (and esp. our visitors) can use IE 10.

     

    Here is another link (thanks to Paula) http://msdn.microsoft.com/en-us/library/ie/hh673558.aspx, where Microsoft shows some topics about "exclusions". On the basis of that I made a real formless draft, only to see what's possible. You can find it - using IE 10 - here: http://hansgd.de/AdobTest/TextUmfliessenCSS/TextUmfliessenCSSWINOrig.p hp.

     

    drExclus.JPG

     

    And again Paula: "If you, or anyone else wishes to vote for support of many of these ’new’ css3 features ..." (Hans is continuing) use https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform.

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 4, 2013 3:07 AM   in reply to Fred K.

    Hi Fred,

     

    you're welcome. It will be fun to see what still happens in this sector!

     

    Hans-Günter

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points