6 Replies Latest reply on Dec 14, 2010 4:51 PM by pixlor

    export css overlap question


      I have a simple 2 column layout with a header. The right column is opaque and I have it overlapping the bottom of the header. This gives the illusion of another box which I planned on using for my navigation. I assumed if I put a slice across the whole page on the overlap and marked it as a background Fireworks would just make it into a division with a  background image. Wouldn't doing this be the same as drawing some graphic, placing it on some background rectangles then slicing that up? It seems like a simple problem but I've tried everything I can think of, even taking into Photoshop only to get the same overlap problem. Am I missing something simple or can't it be done. Here is a .png of what I am talking about. http://www.kazburg.com/NewKaz.png


      Other forum post I've looked at said to name everything which I have done but still get the "Primitive rectangle" message.

        • 1. Re: export css overlap question
          pixlor Level 4

          You mean your right-hand column is transparent...


          What is simple to you is not necessarily simple to do in HTML/CSS. HTML and CSS are built around the idea that divs are stacked blocks. Overlapping is something that is rather tricky.


          Instead of thinking of your design as having three rectangles with rounded corners (also tricky in HTML/CSS), think of it as a header with rounded corners, a left-hand sidebar with rounded corners, and a right column that is square at the top, butted against the header, and has rounded corners at the bottom.


          Add your navigation items over the header (which has two colors in its background) and you should be fine. (Also note that, if you do it this way, your right-hand column can have an opaque background, simplifying your CSS work even further.)


          Draw your blocks logically, where they work with HTML/CSS, not necessarily where the color changes are.

          • 2. Re: export css overlap question
            imfishinohio Level 1

            Thank you for the input. I will actually end up with 4 rectangles. The

            header and navigation will both be the full width of the page with the two

            columns underneath. I just have to export it with the absolute values then

            use them images and reconstruct it in Fireworks.That takes time. My actual

            question was more to find out if I was missing something that wouldn't let

            it export my slice or if Fireworks just won't do it. To many times I have

            found a work around only to find out later I should of made something a

            background image rather than a foreground one or something simple like that.

            I am fairly new and have found out if you don't cross your T's and do your

            eyes something simple won't work the way I see in the tutorials I watch.

            Thanks again for your input

            • 3. Re: export css overlap question
              imfishinohio Level 1

              Yes Transparent lol

              • 4. Re: export css overlap question
                pixlor Level 4

                Hmm...I like to use the slicing guides. These can be dragged onto the from the rulers. You can double-click on a guide to set its position exactly, so close is fine for the dragging action.


                Then, set the slicing tool to snap to guides. This is a good way to make slices exactly where you want and that don't overlap.


                These images aren't necessarily the best way to make the pages, though. I recommend this tutorial. The author uses Photoshop, but I ran through it with Fireworks and it works just fine.

                http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-i n-easy-to-understand-steps/

                • 5. Re: export css overlap question
                  imfishinohio Level 1

                  Pixlor, I do use the guides and snap to guides for setting up the page. I

                  didn't  know they could be double clicked and set to an exact position. That

                  will make things so much easier.

                    I looked over that tut on slicing. I get it now. It made me realize a big

                  flaw in my design process. I can also see where it will save me headaches

                  down the road. Good thing for me you are so intuitive on what I was doing.

                    Thank so much for giving me your time. You have helped me with my design

                  process more than you think.

                  • 6. Re: export css overlap question
                    pixlor Level 4

                      I think it was the word "reconstruct" that made me say, "Hmmm...." Glad you liked the tutorial. I think it's wonderfully well-written.


                    Fireworks is your design tool and your graphics production tool.


                    Just as a home builder might design in Autocad but then turns to concrete, wood, nails and such to actually build, we need to turn to code when we build. Fireworks isn't what you use to build code. Not, that is, if you want to maintain some level of sanity.


                    We design in Fireworks because it's easy to produce - in graphics - the result you want to have when you do write your code. Your FW design is your blueprint, but it isn't your code-building material and FW isn't your code-building tool.