9 Replies Latest reply on Oct 31, 2008 4:37 AM by Newsgroup_User

    Wrapping text around an image

    dwceb Level 1

      Having trouble wrapping a text paragraph around an image.

      A) Using CSS page layout (float-based layout).

      B) I put my image in first and adjusted the properties in the Box rule definition.

      C) I pasted my paragraph in beside the image.

      As I understand it the paragraph should have wrapped around the image.

      I have researched it in 3 books plus the on-line help section. I have learned a lot but it still won't work.

      What am I doing wrong?

      Thanks.

      Becker

        • 1. Re: Wrapping text around an image
          Level 7
          dwceb wrote:
          > Having trouble wrapping a text paragraph around an image.
          >
          > A) Using CSS page layout (float-based layout).
          >
          > B) I put my image in first and adjusted the properties in the Box rule
          > definition.
          >
          > C) I pasted my paragraph in beside the image.
          >
          > As I understand it the paragraph should have wrapped around the image.
          >
          > I have researched it in 3 books plus the on-line help section. I have learned
          > a lot but it still won't work.
          >
          > What am I doing wrong?
          >
          > Thanks.
          >
          > Becker
          >
          >
          >
          Can you paste the code and css you are using here or better still link
          to the page?

          It sounds as though what you are doing is correct but something is
          obviously wrong and that can only be detected by looking at the code/css.
          • 2. Re: Wrapping text around an image
            dwceb Level 1
            Osgood.....

            Thank you for answering my post. Here is the code.... (I hope this works. This is my first time posting code.)

            Thanks again.

            dwceb
            • 3. Re: Wrapping text around an image
              CaryD Level 2
              You can try this code. As it is you need to have the image floating either left or right so the content following it (the text) will flow to the side and below.

              <!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>
              <style type="text/css">
              #div1 {
              width:734px;
              }
              #div1 img {
              float: left;
              margin: 0 10px 10px 0;
              }
              </style>
              </head>
              <body>
              <div id="div1"><img src="Image Folder/Store Picture.jpg" width="227" height="142" />
              <p>About Us</p>
              <p>Your lengthy paragraph...</p>
              </div>
              </body>
              </html>
              • 4. Re: Wrapping text around an image
                dwceb Level 1
                CaryD.....

                Thank you for replying to my request for help.

                I replied to your post but for some reason it does not show up so I will reply again.

                I am trying to see the difference between your code and mine. The basic difference being that you used the division tag "div" and I used the "apdiv". I am not sure I understand the difference other than one is "insert" and the other one is "draw".

                The other difference is yours has the entry "float: left;". Did you enter that by hand? When I edit your code in the Rule Definition dialog box under the category "Box" the "float" box is empty. I am trying to understand how that entry got in the code.

                As you can probably see I am just starting with Dreamweaver CS3 and am very weak in the code department. I like it and I am picking it up fairly quickly, but I can see it is going to be an ongoing learning process.

                Thanks again for replying.

                Becker
                • 5. Re: Wrapping text around an image
                  Level 7
                  > As you can probably see I am just starting with Dreamweaver CS3 and am
                  > very
                  > weak in the code department.

                  DW will punish you relentlessly until you can come up to speed with code.
                  Please take a learning break here -

                  http://www.w3schools.com

                  and get some understanding under your belt before trying to use DW.

                  --
                  Murray --- ICQ 71997575
                  Adobe Community Expert
                  (If you *MUST* email me, don't LAUGH when you do so!)
                  ==================
                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  ==================


                  "dwceb" <webforumsuser@macromedia.com> wrote in message
                  news:gec64j$j8t$1@forums.macromedia.com...
                  > CaryD.....
                  >
                  > Thank you for replying to my request for help.
                  >
                  > I replied to your post but for some reason it does not show up so I will
                  > reply
                  > again.
                  >
                  > I am trying to see the difference between your code and mine. The basic
                  > difference being that you used the division tag "div" and I used the
                  > "apdiv".
                  > I am not sure I understand the difference other than one is "insert" and
                  > the
                  > other one is "draw".
                  >
                  > The other difference is yours has the entry "float: left;". Did you enter
                  > that by hand? When I edit your code in the Rule Definition dialog box
                  > under
                  > the category "Box" the "float" box is empty. I am trying to understand how
                  > that
                  > entry got in the code.
                  >
                  > As you can probably see I am just starting with Dreamweaver CS3 and am
                  > very
                  > weak in the code department. I like it and I am picking it up fairly
                  > quickly,
                  > but I can see it is going to be an ongoing learning process.
                  >
                  > Thanks again for replying.
                  >
                  > Becker
                  >

                  • 6. Re: Wrapping text around an image
                    CaryD Level 2
                    quote:

                    Originally posted by: dwceb
                    I am trying to see the difference between your code and mine. The basic difference being that you used the division tag "div" and I used the "apdiv". I am not sure I understand the difference other than one is "insert" and the other one is "draw".



                    For the purposes of this sample I thought simpler code would be better. The only styling your div had which affected the content of the div was the width, so that is all I kept from your original div styling. I removed "ap" from the name as that stands for "absolutely positioned", and the div is no longer positioned absolutely with the CSS.

                    In a real page I would use an ID or class (if either is even necessary) that gives an idea of the purpose of the content. Some ID names you might see are wrapper, banner, masthead, header, maincontent, subcontent, mainnav, subnav, or footer. "Div1" would not be good as it doesn't tell me anything. Just as with classes, you also don't want to use names describing what things look like since a style change would make the ID or class name misleading.

                    For instance, using the class name, .floatleft, with various elements is a bad choice because it defeats the flexibility of style sheets. What if you want everything with a .floatleft class to float right? Now you have to go into all your pages and change the names of the classes to something else.

                    That's just a little bit of info on naming things since you're just learning this stuff, and it really is helpful when it comes to the future maintenance of a site.

                    quote:

                    Originally posted by: dwceb
                    The other difference is yours has the entry "float: left;". Did you enter that by hand? When I edit your code in the Rule Definition dialog box under the category "Box" the "float" box is empty. I am trying to understand how that entry got in the code.



                    I typed it by hand, but a quick test here shows it in the Rule Definition dialog. Are you sure you had "#div1 img" selected rather than "#div1"? The image within #div1 is what I'm floating, not the div itself.
                    • 7. Re: Wrapping text around an image
                      dwceb Level 1
                      CaryD.....

                      Thanks for the explanation. Because of you I am a little bit smarter.

                      Thanks again.

                      Becker
                      • 8. Re: Wrapping text around an image
                        dwceb Level 1
                        Murray *ACE*.....

                        Thanks for your comment. You are absolutely correct and I am finding that out the more I go along. Also what I am finding out is that you can set it up with the rule definitions but the real difference is in tweaking the code.

                        Thanks again and I will return the favor later on (as my experience grows) by helping someone else who is just getting started.

                        Becker

                        • 9. Re: Wrapping text around an image
                          Level 7
                          Good luck, Becker.

                          --
                          Murray --- ICQ 71997575
                          Adobe Community Expert
                          (If you *MUST* email me, don't LAUGH when you do so!)
                          ==================
                          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                          ==================


                          "dwceb" <webforumsuser@macromedia.com> wrote in message
                          news:geen3s$6o5$1@forums.macromedia.com...
                          > Murray *ACE*.....
                          >
                          > Thanks for your comment. You are absolutely correct and I am finding that
                          > out
                          > the more I go along. Also what I am finding out is that you can set it up
                          > with
                          > the rule definitions but the real difference is in tweaking the code.
                          >
                          > Thanks again and I will return the favor later on (as my experience grows)
                          > by
                          > helping someone else who is just getting started.
                          >
                          > Becker
                          >
                          >
                          >