12 Replies Latest reply on Jul 19, 2007 5:36 PM by Newsgroup_User

    HTML Slice causes jumble on page in dreamweaver

    cgeorg07
      So in fireworks I have a header on top, and navbar on the left. The whole center of the page is white with a large HTML Slice. As soon as I enter text on the html slice in dreamweaver everything gets all distorted. I am using 1 pixel transparent spacer in my html setup in fireworks. Any help would be greatly appreciated. Also if I am not clear I can put up some screenshots. Thanks!
        • 1. Re: HTML Slice causes jumble on page in dreamweaver
          whorneff310 Level 1
          If someone could answer this that would be GREATLY appreciated. I have the same thing. And we are not talkng about writing so that they table becomes bigger. But ANY WRITING makes the page distort. Any ideas?

          Wil
          • 2. Re: HTML Slice causes jumble on page in dreamweaver
            Level 7
            whorneff310 wrote:
            > If someone could answer this that would be GREATLY appreciated. I have the
            > same thing. And we are not talkng about writing so that they table becomes
            > bigger. But ANY WRITING makes the page distort. Any ideas?
            >
            > Wil
            >

            A link to a page would be helpful, but it sounds like you're using FW's
            exported html code, whihc produces a locked table. If you start puttting
            text into one of those cells, the table can (and usually will) break.

            --
            Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
            Extending Knowledge, Daily
            http://www.communityMX.com/
            CommunityMX - Free Resources:
            http://www.communitymx.com/free.cfm
            ---
            .:Adobe Community Expert for Fireworks:.
            news://forums.macromedia.com/macromedia.fireworks
            news://forums.macromedia.com/macromedia.dreamweaver
            • 3. Re: HTML Slice causes jumble on page in dreamweaver
              whorneff310 Level 1
              Thanks for the response Jim. I don't have any of this up on a server yet to give a link. But you're right, that's exactly what I'm doing using exported html code. The real problem is that I have all my text written in fireworks and it's one of those long scrolling pages that will have anchors. I base my slices on the way the text looks in fireworks (12, verdana). But then when I'm in dreamweaver and I cut, paste, and attatch a style sheet for 12 verdana, it's larger than it should be and the table breaks. Anyway to get around this?

              Thanks again
              Wil
              • 4. Re: HTML Slice causes jumble on page in dreamweaver
                cgeorg07 Level 1
                Okay, I threw this together to just give you and example of what keeps happening to me. First link is a screenshot of my fireworks document, and the second is after the export. Thank You!

                http://tinyurl.com/39oxd9

                http://tinyurl.com/38ltuv
                • 5. Re: HTML Slice causes jumble on page in dreamweaver
                  Level 7
                  cgeorg07 wrote:
                  > Okay, I threw this together to just give you and example of what keeps
                  > happening to me. First link is a screenshot of my fireworks document, and the
                  > second is after the export. Thank You!
                  >
                  > http://tinyurl.com/39oxd9
                  >
                  > http://tinyurl.com/38ltuv
                  >

                  Bear in mind, the problem you are experiencing is that you are using FW
                  as a web page creation tool. It's a graphics program that happens to
                  have some html features. Fairly limited html features I might add.
                  Ideally, create your graphics in FW and build your pages in a proper
                  html editor such as Dreamweaver. Do not use the FW html. This will
                  resolve your problems, but you will have to learn html at least in a
                  basic way.

                  If you can create a link to the original PNG file, I can offer more
                  detailed suggestions.

                  --
                  Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                  Extending Knowledge, Daily
                  http://www.communityMX.com/
                  CommunityMX - Free Resources:
                  http://www.communitymx.com/free.cfm
                  ---
                  .:Adobe Community Expert for Fireworks:.
                  news://forums.macromedia.com/macromedia.fireworks
                  news://forums.macromedia.com/macromedia.dreamweaver
                  • 6. Re: HTML Slice causes jumble on page in dreamweaver
                    whorneff310 Level 1
                    cgeorge07--
                    since you(we) haven't gotten any real answers as to what exactly to do I'll tell you what seems to have solved the problem for me. I set everything up in fireworks like before. The entire area where there would be text don't even slice, I fill it with a spacer image. Then in dreamweaver I draw a layer for where the text should be. I add the text, I preview it in the browser and everything looks fine. So far

                    Wil
                    • 7. HTML Slice causes jumble on page in dreamweaver
                      pixlor Level 4
                      I also think FW is not the right tool for this job. I looked at your HTML and I think the problem is that size of the text content makes that cell higher than cell with the flower pot image, so the table breaks. At 9 pt, it's fine. But also, the table is quite complex, because of how you have it sliced. If you slice it more simply, you might have better luck. And, I have a couple of other suggestions.

                      First, consider removing the outer shims from the design. You can produce this effect with a little CSS or a simple table wrapped around the one Fireworks produces.

                      Here's a different set of slice guides you might try: cgeorg-reslice.png I changed your borders to orange and added slice lines in purple.

                      Think of the design as a 5x5 table - at least from a logical standpoint.
                      The first row has your complete header graphic.
                      In rows 2-4, the 1st, 3rd, and 5th columns are full height (rowspan="3").
                      Row 2, 1st and 5th column are your single-pixel borders, and they would be best done with a background color for the cell and a single pixel transparent cell as content.
                      Row 2, column 3 is your vertical spacer.
                      Row 2, column 2 is your flower pot image plus the white space around it, just to make things simple. Also, for this slice, grab the bit of the image that is in row 3.
                      Row 2, column 4 is your text.
                      For row 3, the only item left that isn't part of another cell is the dotted line. Make that one image.
                      Row 4. Well...think of it as 8 sub-rows. Make each image in column 2 span the full width of the column. Make the slice for the text in column 4 span the entire width as well.
                      Row 5 is a single-pixel border. Have it span the full width of the image and use a background color for the cell with a single-pixel transparent gif for content.

                      Unless you are extremely careful with the text in row 2 column 4, you are going to have difficulties with your table breaking. One way you can get around this is to make an overall table of three rows and five columns. In this case, column 2 of the middle row has a nested table of the flower pot image and the navigation images, while column 4 simply has the two blocks of text separated by the dotted line graphic. The dotted line graphic won't always line up with the bottom of the flower pot image, but you won't have to worry about your table breaking.

                      Good luck!
                      • 8. Re: HTML Slice causes jumble on page in dreamweaver
                        Level 7
                        whorneff310 wrote:
                        > cgeorge07--
                        > since you(we) haven't gotten any real answers as to what exactly to do I'll
                        > tell you what seems to have solved the problem for me. I set everything up in
                        > fireworks like before. The entire area where there would be text don't even
                        > slice, I fill it with a spacer image. Then in dreamweaver I draw a layer for
                        > where the text should be. I add the text, I preview it in the browser and
                        > everything looks fine. So far
                        >
                        > Wil
                        >

                        Now increase the size of your text in the browser . . .

                        I'm happy to give answers if I have enough of the details to do so, as
                        are many others here.

                        --
                        Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                        Extending Knowledge, Daily
                        http://www.communityMX.com/
                        CommunityMX - Free Resources:
                        http://www.communitymx.com/free.cfm
                        ---
                        .:Adobe Community Expert for Fireworks:.
                        news://forums.macromedia.com/macromedia.fireworks
                        news://forums.macromedia.com/macromedia.dreamweaver
                        • 9. Re: HTML Slice causes jumble on page in dreamweaver
                          JoeDaSilva Level 4
                          Trying to fix html problems when you're using Fireworks html code is giant waste of time. Do yourself a favor and take the next step into Dreamweaver or a similar tool.
                          • 10. Re: HTML Slice causes jumble on page in dreamweaver
                            cgeorg07 Level 1
                            I just want to thank everyone for there help. I have realized after many hours of struggling that using fireworks as a majority of the web page building is a lost cause. Thanks to everyones advice, I have just been creating buttons in fireworks for example and importing its fireworks html into dreamweaver. So I guess its best to work in parts like that.....Thanks Again.
                            • 11. Re: HTML Slice causes jumble on page in dreamweaver
                              whorneff310 Level 1
                              Jim, I humbly apologize. I jumped to a conclusion too soon. I'd been trying to work around this issue for days to no avail. Even my bright idea of placing the layer onto the page doesn't quite work out. And frankly, I'm completely stuck. I created some screenshots and would be grateful if you could give me some direction. Here are the screenshots

                              http://s208.photobucket.com/albums/bb55/whorneff310/

                              I really want my page to look how it does on the "page layout" photo. I now realize the fireworks is insufficient. I've learned how to create an entire page with layers in dreamweaver. Though I don't see how that would be much different than doing what I did, which was to have fireworks create the table, use a spacer image where the text would be and then simply place a layer over that image. I'm not quite sure what you mean by increase the font size in the browser. I tried that and nothing happed. I've put that website up on the server as created at

                              www.gorillamatz.com(just a domain i have parked).

                              Additionally my css classes for the text and headers look have different colors in different browswer(those are the two other fotos I linked to).

                              Grateful for any help
                              Wil


                              http://s208.photobucket.com/albums/bb55/whorneff310/
                              • 12. Re: HTML Slice causes jumble on page in dreamweaver
                                Level 7
                                OK what I really need is your FW PNG file, not screen shots. The grabs
                                are helpful but there is no way to experiment or play with the file. If
                                you prefer not to post it live to your site, then please email me off
                                list with it.

                                As for the increase font size, as you make the text bigger in the
                                browser, it's going to spill out of your faux container borders,
                                noticeable at the bottom.

                                I would also add that this is a REALLY long page. Nice use of named
                                anchors but still pretty long.

                                Fireworks is "not sufficient" because it is not a web page creation
                                tool; it's a graphics editor and comping tool. Make your graphics in FW
                                and create your final page layouts in DW or another suitable program.

                                --
                                Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                                Extending Knowledge, Daily
                                http://www.communityMX.com/
                                CommunityMX - Free Resources:
                                http://www.communitymx.com/free.cfm
                                ---
                                .:Adobe Community Expert for Fireworks:.
                                news://forums.macromedia.com/macromedia.fireworks
                                news://forums.macromedia.com/macromedia.dreamweaver

                                whorneff310 wrote:
                                > Jim, I humbly apologize. I jumped to a conclusion too soon. I'd been trying
                                > to work around this issue for days to no avail. Even my bright idea of placing
                                > the layer onto the page doesn't quite work out. And frankly, I'm completely
                                > stuck. I created some screenshots and would be grateful if you could give me
                                > some direction. Here are the screenshots
                                >
                                > http://s208.photobucket.com/albums/bb55/whorneff310/
                                >
                                > I really want my page to look how it does on the "page layout" photo. I now
                                > realize the fireworks is insufficient. I've learned how to create an entire
                                > page with layers in dreamweaver. Though I don't see how that would be much
                                > different than doing what I did, which was to have fireworks create the table,
                                > use a spacer image where the text would be and then simply place a layer over
                                > that image. I'm not quite sure what you mean by increase the font size in the
                                > browser. I tried that and nothing happed. I've put that website up on the
                                > server as created at
                                >
                                > www.gorillamatz.com(just a domain i have parked).
                                >
                                > Additionally my css classes for the text and headers look have different
                                > colors in different browswer(those are the two other fotos I linked to).
                                >
                                > Grateful for any help
                                > Wil
                                >
                                >
                                > http://s208.photobucket.com/albums/bb55/whorneff310/
                                >