20 Replies Latest reply: Mar 4, 2013 3:07 AM by hans-g. RSS

    How do I "wrap" text around an image

    Fred K. Community Member

      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.

        • 1. Re: How do I "wrap" text around an image
          kennethkawamoto2 CommunityMVP

          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/

          • 2. Re: How do I "wrap" text around an image
            osgood_ CommunityMVP

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

            • 3. Re: How do I "wrap" text around an image
              Fred K. Community Member

              Hi osgood,

               

              Thanks for the answer.

               

              Because I'm new in Dreamweaver the stuff is not realy clear for me.

               

              Till now on I have made the adjustments for the layout with CSS-properties (box-size / margin / float etc.... and the name of the image I use is defined in CSS-backgrond-image).

               

              I begin to think that my way is not 100% OK.... by reading your suggested code?

               

              The code you write belongs in the HTML .... or not?

               

              I get confused to do things in HTML and SCC both! Is it possible to solve this problem in CSS only ..... or am I talking "rubbish"?

               

              Is it possible to give a hint.... what I must write in the HTML and what in the CSS.... may be you have an example?

               

              By the way: here the yellow-box is a sub-box, and the orange-box is the entire page.

               

              Thank you!

               

              weg.jpg

              • 4. Re: How do I "wrap" text around an image
                osgood_ CommunityMVP

                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;

                }

                • 5. Re: How do I "wrap" text around an image
                  Fred K. Community Member

                  Thanks!

                   

                  But I do something wrong! *&&^%&$$!!!!

                   

                  In my case I have the image in an separate box in the yellow box-container....so the yellow box consists of 2 things... 1) the text itself and 2) the image-box with the image. Is that Ok ? or is there a better way?

                   

                  In your text ... the word IMG is indeed "img" or must it be the name of my image (example: /Images/MyPicture.jpg)?

                   

                  #subBoxName img {

                  float: left;

                  margin-right: 12px;

                  margin-top: 12px;

                  margin-bottom: 12px;

                  }

                   

                  Do I understand well: you posted two examples.... the one above should be OK by itself?

                   

                  And: I think in my case the yellow box hase the name: #Body #BodyMidden (not only 1 # in the name)

                  • 6. Re: How do I "wrap" text around an image
                    osgood_ CommunityMVP

                    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;

                    }

                    • 7. Re: How do I "wrap" text around an image
                      hans-g. CommunityMVP

                      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

                      • 8. Re: How do I "wrap" text around an image
                        kennethkawamoto2 CommunityMVP

                        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/

                        • 9. Re: How do I "wrap" text around an image
                          hans-g. CommunityMVP

                          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

                          • 10. Re: How do I "wrap" text around an image
                            kennethkawamoto2 CommunityMVP

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

                            • 11. Re: How do I "wrap" text around an image
                              Fred K. Community Member

                              Hi Hans-Günter & Kenneth Kawamoto,

                               

                              Thanks for so far.

                               

                              1) The example of Hans is near by...........

                               

                              2) I will try to explain more .... so there's more light on my question.

                               

                               

                              Below (first example) a screenshot of a WORD document. I can place the image anywhere in the text, the text goes always around the image.

                              Second example: the text goes around an image that is "rounded"

                              weg-3.jpg

                               

                              Below: the image that I was trying with in Dreamweaver. (just like the Word-document as discribed above). I want text just like above. And as you can see it has shadow around and rounded corners In the example of Hans the shadow dissapears, and it goes not around the image.

                              weg-1.jpg

                               

                              So............any suggestions ? ?

                              • 12. Re: How do I "wrap" text around an image
                                hans-g. CommunityMVP

                                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-BDEC-D4BAE05F90F1a.html

                                 

                                Good luck!

                                Hans-Günter

                                • 13. Re: How do I "wrap" text around an image
                                  kennethkawamoto2 CommunityMVP

                                  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/

                                  • 14. Re: How do I "wrap" text around an image
                                    mhollis55 CommunityMVP

                                    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

                                    • 15. Re: How do I "wrap" text around an image
                                      Nancy O. CommunityMVP

                                      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.

                                      • 16. Re: How do I "wrap" text around an image
                                        Fred K. Community Member

                                        Thanks for the posts

                                         

                                        I figured something out from the website ALT-WEB.COM ... Nancy O had said.

                                         

                                        Now I have this (below) and I am satisfied with it.

                                        View of screenshot (part of) and code below.

                                         

                                        I' am not sure the code is correct because of the colour of the code in my Dreamweaver-text-editor.... I suppose (e.g.) that some comment should be gray and other text should be blue ??? isn't it?

                                         

                                        By the way: if I reply to -one- person....who gets a mail that there is an answer of me....just only that person or all persons of that discussion?

                                         

                                        Fred

                                        weg.jpg

                                        CODE................

                                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                                        <html xmlns="http://www.w3.org/1999/xhtml">

                                        <head>

                                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                                        <title>Untitled Document</title>

                                        <link href="Css/LayOut.css" rel="stylesheet" type="text/css" />

                                        <style type="text/css">

                                        .floatLeft {

                                            float: left;

                                            width: 300px;

                                            height: 200px;

                                            margin: 10px;

                                            margin-top: 8px;

                                            margin-bottom: 7px;

                                            margin-left: 0px;

                                        }

                                        .floatLeft p {

                                            margin-top: 0px;

                                        }

                                        /**border around image**/

                                        .floatLeft img {

                                            border-radius: 8px;

                                        }

                                        #BodyMid {

                                            width: 600px;

                                            clear: both;

                                            margin-right: auto;

                                            margin-left: auto;

                                        }

                                        </style>

                                        </head>

                                         

                                        <div id="Body">

                                          <div id="BodyLeft"></div>

                                          <!- End body Left->

                                          <div id="BodyMid"><!- Begin body Mid->

                                            <div class="floatLeft"><!-Begin floatleft->

                                              <p><img src="Images/wegtest.jpg"  width="300  height="200" /></p>

                                            </div>

                                            <!-end floatleft->

                                           

                                            <p>Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores  Non, per elit, nunc suscipit fiant enim at. Euismod consuetudium videntur ad hendrerit eodem adipiscing laoreet cum claritas, etiam.</p>

                                            <p>Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes  Iriure molestie dynamicus, erat decima. Videntur consequat legunt te odio assum iusto me est. Non, per elit, nunc suscipit fiant enim at.  nobis lius per. Iriure molestie dynamicus, erat decima. Videntur consequat legunt te odio assum iusto me est. Non, per elit, nunc suscipit fiant enim at.   Iriure molestie dynamicus, erat decima. Videntur consequat legunt te odio assum iusto me est. Non, per elit, nunc suscipit fiant enim at. Euismod consuetudium videntur ad hendrerit eodem adipiscing laoreet cum claritas, etiam.</p>

                                          </div>

                                          <!- end body Mid->

                                        </div>

                                        <!- end body->

                                        </html>

                                        CODE END..................

                                         

                                        below the screenshot (colours ???)

                                        www.jpg

                                        • 17. Re: How do I "wrap" text around an image
                                          Nancy O. CommunityMVP

                                          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.

                                          • 18. Re: How do I "wrap" text around an image
                                            hans-g. CommunityMVP

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

                                             

                                            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

                                            • 19. Re: How do I "wrap" text around an image
                                              Fred K. Community Member

                                              Hallo All,

                                               

                                              Ok thanks for so far.....I can go further.

                                               

                                              BTW. my colour-problem in code is solved.... Nancy said use double - hyphen in comments.... that was 1 solution.

                                               

                                              The other was a forgotten " (double quote) after the width declaration of my image ("300 ).

                                               

                                              Say:.....all begining is difficult 

                                              • 20. Re: How do I "wrap" text around an image
                                                hans-g. CommunityMVP

                                                Hi Fred,

                                                 

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

                                                 

                                                Hans-Günter