17 Replies Latest reply on Mar 27, 2009 1:45 PM by Newsgroup_User

    Asking advice from more experienced devs

    Andy Bay Level 2
      Hi!

      I'm stuck:

      I'm trying to create a web page that has a curvy shape in the left side of it. My client wants the text to wrap around that shape. The way I decided to go was to slice the curvy shape in Fireworks using the polygonal slice tool. The problem is, when I export and open it in Dreamweaver, I can't figure out how I can get the text so that it will wrap around that slice. I think that the text should be in the same table cell with the slices so that the wrap would be possible, but how I can't seem to get it right, the sliced image always gets messed up. Is there an easy way to do what I'm trying to achieve? I am not very experienced with web design, so there might be better ways to do the wrap.

      If anyone can point me in the right direction, I would appreciate it a lot! Thanks!
        • 1. Re: Asking advice from more experienced devs
          pixlor Level 4
          quote:

          Originally posted by: Andy Bay
          Hi!

          I'm stuck:

          I'm trying to create a web page that has a curvy shape in the left side of it. My client wants the text to wrap around that shape. The way I decided to go was to slice the curvy shape in Fireworks using the polygonal slice tool. The problem is, when I export and open it in Dreamweaver, I can't figure out how I can get the text so that it will wrap around that slice. I think that the text should be in the same table cell with the slices so that the wrap would be possible, but how I can't seem to get it right, the sliced image always gets messed up. Is there an easy way to do what I'm trying to achieve? I am not very experienced with web design, so there might be better ways to do the wrap.

          If anyone can point me in the right direction, I would appreciate it a lot! Thanks!

          Can you post an image? Just how curvy are we talking about here?

          • 2. Asking advice from more experienced devs
            Andy Bay Level 2
            Sure!

            Here's the link:
            http://img525.imageshack.us/img525/9300/bgsample.jpg

            I would simply like the main content text to wrap it's right side edge along the curve.
            • 3. Re: Asking advice from more experienced devs
              pixlor Level 4
              quote:

              Originally posted by: Andy Bay
              Sure!

              Here's the link:
              http://img525.imageshack.us/img525/9300/bgsample.jpg

              I would simply like the main content text to wrap it's right side edge along the curve.

              Um...no. I'm sorry.

              I take it you're coming from a print design background, or your client has expectations of Web design that are brought over from print layout. Where a product like InDesign (or even Word to some extent) have the ability to mark out a non-rectangular shape to wrap text around, all HTML layout is composed of boxes. Also, all images are rectangles as well. That polygon slice you used is meant to map out a section of a larger, rectangular image used as an image map. When the user's mouse is within the defined area, a mouse action can take place. There is no layout capability based on polygons.

              So...what can you do with boxes, and why would it break?
              First, you could make a table-based layout. This is probably the easiest approach for someone new to Web design. What you could do is slice your image into horizontal rows and then each row could be made into a one-row table of two cells. The first, left-hand cell would have the grey area as a background and you would put some of your text into it. The right-hand cell would have the red and blue half of that horizontal slice. And so on for each horizontal slice.

              Suppose you get your text blocked out so it looks great for you. You know where the text breaks and everything lines up. That's all fine and good until someone looks at the Web page who doesn't have the font you specify or who decides to use a different font size. Or, who simply uses a different browser. Your nicely formatted text then breaks in strange and probably awkward places. Worse, if the font size is too big for the text to fit in the table cells, the cells will expand and your sweeping background image is now separated by gaps.

              CSS doesn't improve things much. You can put your image as a background to a div and then have divs of varying widths as children in that main div. Still, if the user chooses a larger font size, the paragraphs will push down the page, possibly to where they begin to overlap the blue and red area.

              HTML is best designed understanding that you're working with boxes and that they will flow in ways you can't control. If you want to have a very specific, non-gridded layout, where you can control the font and font size, you'll need to move to Flash.

              I suggest you learn your HTML and CSS so that you don't get caught trying to do something for a client that just isn't possible. Here's my list of resources.

              Here's a book I like:
              HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) by Elizabeth Castro
              It covers everything in small chunks and is light enough to carry around and read.

              Some tutorials:
              HTML Code Tutorial
              W3Schools
              This one has a friendly tone, although it has lots of ads: Page Tutor
              The CSS Tutorial

              Also, check out the site recommendations by Silkrooster here:
              A question about using Fireworks to build a website

              Good luck!


              • 4. Re: Asking advice from more experienced devs
                Andy Bay Level 2
                Damn, I quess thinks are never as easy as you might think :/

                Anyway, thanks a lot for your effort, I appreciate your help greatly!
                • 5. Re: Asking advice from more experienced devs
                  Andy Bay Level 2
                  One thing came to mind:

                  Could it maybe be possible to achieve this by giving the image slices absolute positions inside a table cell and then putting the text in that same table cell? That way the positions and relationships of the images would never break right? Or is there something that I'm not considering?
                  • 6. Re: Asking advice from more experienced devs
                    Level 7
                    > Could it maybe be possible to achieve this by giving the image slices
                    > absolute
                    > positions inside a table cell

                    You would never want to place an absolutely positioned element directly into
                    a table cell. The reason you don't see this 'ragged justification' done on
                    web pages is that there is no simple/non-awkward/reliable way to do it.

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


                    "Andy Bay" <webforumsuser@macromedia.com> wrote in message
                    news:gqg02p$23j$1@forums.macromedia.com...
                    > One thing came to mind:
                    >
                    > Could it maybe be possible to achieve this by giving the image slices
                    > absolute
                    > positions inside a table cell and then putting the text in that same table
                    > cell? That way the positions and relationships of the images would never
                    > break
                    > right? Or is there something that I'm not considering?
                    >

                    • 7. Re: Asking advice from more experienced devs
                      Andy Bay Level 2
                      Ok thanks for your input!

                      Is it the same with divs -could I absolute position the image slices inside a div and then put the text in the same div and tell it to wrap to the image slices?

                      There must be some way to do this right? :)
                      • 8. Re: Asking advice from more experienced devs
                        pixlor Level 4
                        quote:

                        Originally posted by: Andy Bay
                        Ok thanks for your input!

                        Is it the same with divs -could I absolute position the image slices inside a div and then put the text in the same div and tell it to wrap to the image slices?

                        There must be some way to do this right? :)

                        No, this is not print! There is no way to do it in HTML. You can't do it because you can't completely control the way the output is going to look. You can't control how wide or narrow the user's browser window is going to be. You can't control the user's font size. Not with HTML. If it absolutely has to look a certain way, make a PDF. Of course, that isn't a Web page.

                        You need to learn how to design for the Web and that means 1) putting everything in boxes and 2) making it flexible. You must let go of wanting total control of how it's going to look, because you simply do not have that.


                        • 9. Re: Asking advice from more experienced devs
                          Andy Bay Level 2
                          Ok :( Well I do appreciate your kind help on this issue, I guess I have some more studying to do. I think I came come up with a pretty decent compromise: Though I can't get the text to wrap totally against the curve, I think I can atleast make the different text chapters align a little bit to the curve by using different table structures. By this I mean that while I can't wrap individual words, atleast I have some controls on how the chapters align to the design. Right? :)
                          • 10. Re: Asking advice from more experienced devs
                            pixlor Level 4
                            quote:

                            Originally posted by: Andy Bay
                            Ok :( Well I do appreciate your kind help on this issue, I guess I have some more studying to do. I think I came come up with a pretty decent compromise: Though I can't get the text to wrap totally against the curve, I think I can atleast make the different text chapters align a little bit to the curve by using different table structures. By this I mean that while I can't wrap individual words, atleast I have some controls on how the chapters align to the design. Right? :)


                            No.

                            You don't have that much control.

                            We've had tables for 15 years or better. If we could use them to do what you want, the Web would be full of sites with nice, curvy right-alignments. It isn't. The height of the table will depend on the font size the user chooses. That means that a chapter table may be taller or shorter than you intend, and so the text will not align where you think it will. What looks fine to you won't stay fine once it gets out there in the real world.

                            But...hey. This is your choice. You can accept the advice you've been given, which is to learn how HTML works and build a design that works within the limitations of the media. Or, you can spend a few days trying to build something you think will work. But just make sure you view the resulting page and change the font size up and down to see what effect it has on your design.

                            You asked for advice. You've been given advice. You don't want to accept the answer. I don't know what else to say.


                            • 11. Asking advice from more experienced devs
                              Andy Bay Level 2
                              Don't get me wrong, I do accept your answer and I do appreciate your help on this issue. What I was talking about in my last post is not like my original wish. I was simply talking about making boxes (just like you said I have to) that are more narrow in the top and wider at the bottom. By doing that I think I can get the chapters (that are inside the individual boxes) to follow the curvy shape just a little bit. It is of course not very accurate and not the ideal solution, but it does make the layout look nicer. I have tried several different layout options, but it is very hard to make the design look good with the curves, that are compulsory for the client, if the text doesn't follow their flow at all. If I make the tables (or divs) the way I described but leave some space for font size changes, I think it will work on 95% of the cases. The rest 5% is still going to be problematic, but I can accept that -the text will still be readable, but the site layout suffers a little bit. I don't think that's a very big deal if it affects only those using very large or very small font sizes.

                              In the meanwhile, what do you guys think of this:
                              http://www.makeuseof.com/dir/csstextwrap/
                              • 12. Re: Asking advice from more experienced devs
                                Level 7
                                And, when you get your boxes all lined up someone comes along and makes the
                                text larger on the page, and your words start wrapping an your nice
                                alignment goes right in the dumper.

                                You can't do it.

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


                                "Andy Bay" <webforumsuser@macromedia.com> wrote in message
                                news:gqh4vc$guk$1@forums.macromedia.com...
                                > Don't get me wrong, I do accept your answer and I do appreciate your help
                                > on
                                > this issue. What I was talking about in my last post is not like my
                                > original
                                > wish. I was simply talking about making boxes (just like you said I have
                                > to)
                                > that are more narrow in the top and wider at the bottom. By doing that I
                                > think
                                > I can get the chapters (that are inside the individual boxes) to follow
                                > the
                                > curvy shape just a little bit. It is of course not very accurate and not
                                > the
                                > ideal solution, but it does make the layout look nicer. I have tried
                                > several
                                > different layout options, but it is very hard to make the design look good
                                > with
                                > the curves, that are compulsory for the client, if the text doesn't follow
                                > their flow at all. If I make the tables (or divs) the way I desrcubed but
                                > leave
                                > some space for font size changes, I think it will work on 95% of the
                                > cases. The
                                > rest 5% is still going to be problematic, but I can accept that -the text
                                > will
                                > still be readable, but the site layout suffers a little bit. I don't think
                                > that's a very big deal if it affects only those using very large or very
                                > small
                                > font sizes.
                                >
                                > In the meanwhile, what do you guys think of this:
                                > http://www.makeuseof.com/dir/csstextwrap/
                                >

                                • 13. Re: Asking advice from more experienced devs
                                  Andy Bay Level 2
                                  Please stop saying "you can't do it". Everything is possible, you just need to find the best solution. The link below seems to make possible the very thing you guys constantly tell me I can't do:

                                  http://www.makeuseof.com/dir/csstextwrap/
                                  • 14. Re: Asking advice from more experienced devs
                                    Level 7
                                    Andy Bay wrote:
                                    > Please stop saying "you can't do it". Everything is possible, you just need to
                                    > find the best solution. The link below seems to make possible the very thing
                                    > you guys constantly tell me I can't do:
                                    >
                                    > http://www.makeuseof.com/dir/csstextwrap/
                                    >
                                    Sure you can do it, but would you do it a second time? Doesn't look like
                                    it will be much fun to edit, or you may have to revisit the site every
                                    time you make a tweak to the design.

                                    It dumps the code into DW as one big text block.

                                    Here's the code generated from a simple S type curve on either side of
                                    some text, using Method 2 (XHTML and classes):

                                    <script type="text/javascript" src="shapewrapper.js"></script>
                                    <script
                                    type="text/javascript">shapeWrapper("15","7.5,148,0|22.5,156,0|37.5,160,56|52.5,154,73|67 .5,147,86|82.5,147,95|97.5,151,104|112.5,156,112|127.5,161,115|142.5,158,118|157.5,152,119 |172.5,147,114|187.5,137,108|202.5,121,100|217.5,105,88|232.5,0,44|247.5,0,0|262.5,0,0|277 .5,0,0|292.5,0,0|307.5,0,0|322.5,0,0|");</script>
                                    <div class="lW" style="width:148px;"></div><div class="rW"
                                    style="width:0px;"></div><div class="lW" style="width:156px;"></div><div
                                    class="rW" style="width:0px;"></div><div class="lW"
                                    style="width:160px;"></div><div class="rW"
                                    style="width:56px;"></div><div class="lW"
                                    style="width:154px;"></div><div class="rW"
                                    style="width:73px;"></div><div class="lW"
                                    style="width:147px;"></div><div class="rW"
                                    style="width:86px;"></div><div class="lW"
                                    style="width:147px;"></div><div class="rW"
                                    style="width:95px;"></div><div class="lW"
                                    style="width:151px;"></div><div class="rW"
                                    style="width:104px;"></div><div class="lW"
                                    style="width:156px;"></div><div class="rW"
                                    style="width:112px;"></div><div class="lW"
                                    style="width:161px;"></div><div class="rW"
                                    style="width:115px;"></div><div class="lW"
                                    style="width:158px;"></div><div class="rW"
                                    style="width:118px;"></div><div class="lW"
                                    style="width:152px;"></div><div class="rW"
                                    style="width:119px;"></div><div class="lW"
                                    style="width:147px;"></div><div class="rW"
                                    style="width:114px;"></div><div class="lW"
                                    style="width:137px;"></div><div class="rW"
                                    style="width:108px;"></div><div class="lW"
                                    style="width:121px;"></div><div class="rW"
                                    style="width:100px;"></div><div class="lW"
                                    style="width:105px;"></div><div class="rW"
                                    style="width:88px;"></div><div class="lW" style="width:0px;"></div><div
                                    class="rW" style="width:44px;"></div><div class="lW"
                                    style="width:0px;"></div><div class="rW" style="width:0px;"></div><div
                                    class="lW" style="width:0px;"></div><div class="rW"
                                    style="width:0px;"></div><div class="lW" style="width:0px;"></div><div
                                    class="rW" style="width:0px;"></div><div class="lW"
                                    style="width:0px;"></div><div class="rW" style="width:0px;"></div><div
                                    class="lW" style="width:0px;"></div><div class="rW"
                                    style="width:0px;"></div><div class="lW" style="width:0px;"></div><div
                                    class="rW" style="width:0px;"></div>
                                    <p>text goes here</p>

                                    But if it works for you go ahead and use it. What you're being told here
                                    is related to best practices, not just "getting it done."

                                    --
                                    Jim Babbage
                                    • 15. Re: Asking advice from more experienced devs
                                      Level 7
                                      See - you can't do it. Nobody in their right mind would do it that way.

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


                                      "Jim Babbage .:CMX:. & .:Adobe Community Expert:."
                                      <jbabbage@newmediaservices.ca> wrote in message
                                      news:gqj7ns$80c$1@forums.macromedia.com...
                                      > Andy Bay wrote:
                                      >> Please stop saying "you can't do it". Everything is possible, you just
                                      >> need to find the best solution. The link below seems to make possible the
                                      >> very thing you guys constantly tell me I can't do:
                                      >> http://www.makeuseof.com/dir/csstextwrap/
                                      > Sure you can do it, but would you do it a second time? Doesn't look like
                                      > it will be much fun to edit, or you may have to revisit the site every
                                      > time you make a tweak to the design.
                                      >
                                      > It dumps the code into DW as one big text block.
                                      >
                                      > Here's the code generated from a simple S type curve on either side of
                                      > some text, using Method 2 (XHTML and classes):
                                      >
                                      > <script type="text/javascript" src="shapewrapper.js"></script>
                                      > <script
                                      > type="text/javascript">shapeWrapper("15","7.5,148,0|22.5,156,0|37.5,160,56|52.5,154,73|67 .5,147,86|82.5,147,95|97.5,151,104|112.5,156,112|127.5,161,115|142.5,158,118|157.5,152,119 |172.5,147,114|187.5,137,108|202.5,121,100|217.5,105,88|232.5,0,44|247.5,0,0|262.5,0,0|277 .5,0,0|292.5,0,0|307.5,0,0|322.5,0,0|");</script>
                                      > <div class="lW" style="width:148px;"></div><div class="rW"
                                      > style="width:0px;"></div><div class="lW" style="width:156px;"></div><div
                                      > class="rW" style="width:0px;"></div><div class="lW"
                                      > style="width:160px;"></div><div class="rW" style="width:56px;"></div><div
                                      > class="lW" style="width:154px;"></div><div class="rW"
                                      > style="width:73px;"></div><div class="lW" style="width:147px;"></div><div
                                      > class="rW" style="width:86px;"></div><div class="lW"
                                      > style="width:147px;"></div><div class="rW" style="width:95px;"></div><div
                                      > class="lW" style="width:151px;"></div><div class="rW"
                                      > style="width:104px;"></div><div class="lW" style="width:156px;"></div><div
                                      > class="rW" style="width:112px;"></div><div class="lW"
                                      > style="width:161px;"></div><div class="rW" style="width:115px;"></div><div
                                      > class="lW" style="width:158px;"></div><div class="rW"
                                      > style="width:118px;"></div><div class="lW" style="width:152px;"></div><div
                                      > class="rW" style="width:119px;"></div><div class="lW"
                                      > style="width:147px;"></div><div class="rW" style="width:114px;"></div><div
                                      > class="lW" style="width:137px;"></div><div class="rW"
                                      > style="width:108px;"></div><div class="lW" style="width:121px;"></div><div
                                      > class="rW" style="width:100px;"></div><div class="lW"
                                      > style="width:105px;"></div><div class="rW" style="width:88px;"></div><div
                                      > class="lW" style="width:0px;"></div><div class="rW"
                                      > style="width:44px;"></div><div class="lW" style="width:0px;"></div><div
                                      > class="rW" style="width:0px;"></div><div class="lW"
                                      > style="width:0px;"></div><div class="rW" style="width:0px;"></div><div
                                      > class="lW" style="width:0px;"></div><div class="rW"
                                      > style="width:0px;"></div><div class="lW" style="width:0px;"></div><div
                                      > class="rW" style="width:0px;"></div><div class="lW"
                                      > style="width:0px;"></div><div class="rW" style="width:0px;"></div><div
                                      > class="lW" style="width:0px;"></div><div class="rW"
                                      > style="width:0px;"></div>
                                      > <p>text goes here</p>
                                      >
                                      > But if it works for you go ahead and use it. What you're being told here
                                      > is related to best practices, not just "getting it done."
                                      >
                                      > --
                                      > Jim Babbage

                                      • 16. Re: Asking advice from more experienced devs
                                        Level 7
                                        Murray *ACE* wrote:
                                        > See - you can't do it. Nobody in their right mind would do it that way.
                                        >
                                        egg-zactly!

                                        --
                                        Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                                        http://www.communityMX.com/
                                        ---
                                        .:Adobe Community Expert for Fireworks:.
                                        http://www.adobe.com/communities/experts/members/206.html
                                        ---
                                        • 17. Re: Asking advice from more experienced devs
                                          Level 7
                                          > Please stop saying "you can't do it". Everything is possible, you just
                                          > need to
                                          > find the best solution.

                                          Well, here's another prototype idea from CSS guru, Eric Meyer.
                                          http://meyerweb.com/eric/css/edge/raggedfloat/demo.html

                                          Eric notes that it's not perfect and has many compromises. But if it suits
                                          your purpose then go for it.

                                          To my mind, it's still a lot of work for a small effect though.

                                          --
                                          Regards

                                          John Waller