5 Replies Latest reply on Sep 14, 2009 9:56 AM by pixlor

    Can't center html export

    abseabse

      Hello all,

       

      I've created a prototype using a set of pages and interactivity in Fireworks CS4. When I export using "HTML and images" the site content becomes aligned to the left even though I've specified "center" in the options dialogue.

       

      I can only preview this using IE6, is that part of the problem?

       

      I have tried to modify SLICES.XTT, replacing left with center, but that makes no difference.

       

      Does anyone understand this? I'm lost... Must deliver a prototype next week or a HUGE customer will be disappointed :|

        • 1. Re: Can't center html export
          Nadia-P Level 5

          The following will help center content in a browser - you need to do this in the code editor you use (probably Dreawmeaver?)

           

          Centering  content in a browser:

           

          Add the following css rule to your stylesheet or in the head of the document with any other style rules.

           

           

          #wrapper {

          position: relative;   /* remove this rule  this if you are NOT using AP Divs */

          width: 980px;  /*change to suit your page width */

          margin: 0 auto;

          }

           

          Then change:

           

          </head>

          <body>

           

          to

           

          </head>

          <body>

          <div id="wrapper">  <!-- open wrapper div -->

           

           

          and then change:  at the bottom of your page:

           

          </body>

          </html>

           

          to:

           

          </div>  <!-- closing wrapper div -->

          </body>

          </html>

           

           

          • 2. Re: Can't center html export
            abseabse Level 1

            Thanks for the post!

             

            I'm not using css, the export is just html and gifs with imagemaps. I could always center every page by editing its HTML code, but that is alot of work since my fireworks file exports into 20 pages or so. I'm just wondering why the "center" setting in the export options dialogue doesn't work...

             

            I've tried the export option "CSS and images" too, but that looks really weird in my browser. Could be that it doesn't support IE6? (at my work I cant install any other browser for security reasons).

            • 3. Re: Can't center html export
              Jim_Babbage Level 4

              The "Center" option only works for CSS and Images export. Ideally it 

              should have been disabled when you choose HTML and Images. Who knows, 

              though - maybe they will fix it for the next version.

               

              Just to confirm, you're just creating interactive mock-ups, right? 

              You're not actually building your final web site in FW?

               

              Jim Babbage

              • 4. Re: Can't center html export
                abseabse Level 1

                Yes I'm only creating a clickable prototype, or trying.

                 

                OK the center things was a bug then. But when I try exporting using the "css and images"-alternative, everything gets left centered as well... And some fields are badly aligned with each other, and some background colors turn white... Is all that because I use Internet Explorer 6?

                • 5. Re: Can't center html export
                  pixlor Level 4

                  In CSS, centering is inherited. Therefore, if you center your layout, everthing inside that is centered, unless you set a different alignment. The usual approach to centering a CSS layout is to apply a center alignment then a left alignment. Since the alignment is inherited, now everything will be left-aligned unless you have set something different.

                   

                  If you suddenly have white backgrounds, you'd have to look into the code to figure out where they come from, if they're images or CSS backgrounds.

                   

                  IE6 has a number of CSS rendering bugs, but what you've described doesn't sound like it's due to IE6.

                   

                  This is the problem with letting a program "think/design" for you. It has limited options, which may or may not be what you want. And, often it takes more time to troubleshoot and correct the auto-generated code than you'd have spent developing the design yourself.

                   

                  It seems to me that throwing a 100%-width, centered table, tr, and td tags after your body tag, then closing those tags right before your closing tags would be the quickest solution, even with 20 files.