15 Replies Latest reply on Jul 14, 2011 8:22 PM by pixlor

    Centering canvas on browser screen

    fabdana

      I have been trying to set up my Fireworks pages so that they look centered on a standard browser. Under Modify - Canvas - Canvas Size, I chose the "top center" arrow from the grid of 9 choices.  When I export (I export to Dreamweaver), under Options I chose Page Alignment - Center.  This did not center the page. So, in the HTML within Dreamweaver, I added <p align=center> in this line:

      <body bgcolor="#b0b0b0" onLoad="MM_preloadImages('images/Page1_r2_c2_s2.jpg');"><p align=center>  But still, the page never looks centered. Is there a way to get these pages to look centered without having to enter HTML code on every page?  Thanks very much!!!   Dana

        • 1. Re: Centering canvas on browser screen
          Linda Nicholls Level 4

          Use the images you created in Fireworks to build the  HTML page in Dreamweaver. Use Dreamweaver to code the page, not Fireworks.

          • 2. Re: Centering canvas on browser screen
            fabdana Level 1

            Thanks, but what html code do I use and in which line do I insert it into?  I'm not an html expert.  I'm using <p align=center>.  Do I put it in the line right after </head> ?  This is how it looks now (see the bold text).

            </script>
            </head>
            <body bgcolor="#b0b0b0" onLoad="MM_preloadImages('images/Page1_r2_c2_s2.jpg');"><p align=center>
            <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1024">

             

            It just doesn't seem to work.  If anyone can please give me this one missing puzzle piece, I'll be able to finish this site!  Thanks!!

            • 3. Re: Centering canvas on browser screen
              Linda Nicholls Level 4

              p align=center instructs the prowser to center align a paragraph. How did you export the page? As HTML and images or CSS and images?

              • 4. Re: Centering canvas on browser screen
                pixlor Level 4

                You really need to understand a few basics if you want to develop Web sites. A site isn't made from design, it's made from code.

                 

                However, here is a good answer on how to place your content in the center of a page:

                http://simplebits.com/notebook/2004/09/08/centering/

                • 5. Re: Centering canvas on browser screen
                  fabdana Level 1

                  Thanks for sharing this link.  I'm a novice at web design and Fireworks. I can't find an actual class where I live, so I just learn from online tutorials. I am studying the info from the link you kindly sent me, and will try to center my page!  I know it's not as easy as just hitting a "center" command!  I still prefer Fireworks over iWeb, Rapidweaver and all the others that lock you into an ugly template.

                  Regards.

                  • 6. Re: Centering canvas on browser screen
                    fabdana Level 1

                    Thanks, Linda.  I put slices over all of the text that I want to appear as "rollovers" and links to other pages.  I did not slice up the rest of the page (photos, banners, etc.), which is probably one of the problems. (I'm trying to learn this via the internet, and it's hard!)  So, when I export to Dreamweaver using Export Wizard, I choose "export as Java Script Rollover" and I check the box that says "include areas without slices" - and everything looks fine (the rollovers and links work), I just have this centering probem. One of the other forum members sent me a link that I will check out ASAP. In the meantime, if you think of anything else that you care to share with me, just pass it alaong.  Thanks very much!

                    • 7. Re: Centering canvas on browser screen
                      fabdana Level 1

                      Linda - Sorry, I forgot answer your question in full.   I export HTML and Images, not CSS and Images.  This info is in addition to my recent post from a few minutes ago.  Thanks.

                      • 8. Re: Centering canvas on browser screen
                        pixlor Level 4

                        fabdana wrote:

                         

                        Thanks for sharing this link.  I'm a novice at web design and Fireworks. I can't find an actual class where I live, so I just learn from online tutorials. I am studying the info from the link you kindly sent me, and will try to center my page!  I know it's not as easy as just hitting a "center" command!  I still prefer Fireworks over iWeb, Rapidweaver and all the others that lock you into an ugly template.

                        Regards.

                         

                        Here's a good beginner tutorial:

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

                         

                        I like Elizabeth Castro's book on HTML and CSS. It's readable and also useful as a reference.

                        http://www.amazon.com/HTML-XHTML-Sixth-Elizabeth-Castro/dp/0321430840/ref=sr_1_1?ie=UTF8&q id=1310336353&sr=8-1

                         

                        Sitepoint also has a number of good books, especially their CSS books. (They also have articles, newsletters, and a forum.)

                        http://www.sitepoint.com/

                         

                        Smashing Magazine is a good source of all kinds of design information:

                        http://www.smashingmagazine.com/

                        1 person found this helpful
                        • 9. Re: Centering canvas on browser screen
                          fabdana Level 1

                          Thank you SO much!   These are great resources.

                          • 10. Re: Centering canvas on browser screen
                            pixlor Level 4

                            You're welcome!

                            • 11. Re: Centering canvas on browser screen
                              fabdana Level 1

                              Dear Pixlor - thanks to all of your references, I was FINALLY able to center my pages!  It took a while to figure out where to insert all the codes, but it works.  Thanks again.

                              • 12. Re: Centering canvas on browser screen
                                fabdana Level 1

                                Dear Pixlor - just one more question!  The Castro HTML book is on the way.  In the meantime, I managed to center my pages using this reference link you sent me:

                                http://simplebits.com/notebook/2004/09/08/centering/

                                 

                                ALL of the pages are centered, but I can't get the index.htm page to center!  Take a look at the page and you can view the code. Notice that the image is slightly to the left:

                                http://www.fabdana.com/index.htm

                                 

                                I just don't get it!  It looks centered when in Dreamweaver, but it's never centered on the browser.  If it's not too much to explain, can you please help me?  I've been trying to find an answer online, and I've tried several other codes for centering, but no luck.  Thanks again! You've already helped me a lot.

                                • 13. Re: Centering canvas on browser screen
                                  pixlor Level 4

                                  Hey there,

                                   

                                  Yes, you have a few problems.

                                   

                                  First, you have your container div starting in your head section. The tags in html are like parentheses in math - they have to match in pairs and have to fully enclose any other sets. For example, you can write:

                                  { [ () () ] () }  { () }

                                  but you can't write

                                  { [ () ()  () }  { () ] }

                                  because the start of the square bracket is in the first set of curly brackets, but the end is in the second set.

                                   

                                  The head section is for stuff that doesn't appear in your page, such as meta tags, JavaScript code, CSS definitions and so on. The body section is for all the stuff that will display, such as HTML text and images. Both head and body are enclosed in the "html" tag.

                                   

                                  You need to move your opening div for #container out of the head section and just below your body tag.

                                   

                                  Second, you have an additional div ("centered"), but you have no CSS definitions for it. And you open two divs but only have one closing tag (/div). Everything you open needs to be closed. (A few tags are not paired, such as the img tag, but most are.) Just remove that div id="centered" line.

                                   

                                  Third - and this is the bit that keeps your page from looking centered - your table of content is 681 pixels wide, but you're centering a region that is 1024 pixels wide. In your definition of #container, you need to change width to 681px.

                                   

                                  Also, you should probably add the "text-align: left;" part, although it doesn't matter with your site because you don't actually HAVE any text, all your content is in images....

                                   

                                  ...Which is not how you want to build your pages. Your text you want to have as text. Text rendered by a browser is clearer than text in images. Plus, without text, the search engines have nothing to index.

                                   

                                  Go through the tutorial on NetTuts+ to see how you would do that. The author uses Photoshop for graphics, but Fireworks works just as well.

                                   

                                  Good luck!

                                  • 14. Re: Centering canvas on browser screen
                                    fabdana Level 1

                                    Wow, I really appreciate all of this information. I do have a lot to learn - and this site is just for fun (I'm not using it to market myself!).  I will definitely work on these problems. I just cut and pasted the info that was in some of the reference material you sent me. Interestingly, the other pages ARE centered, but I guess I have many errors on the index.htm page. Thank you so much for taking the time to do this. I am most appreciative and will try to work this out myself.   Kind regards.

                                    • 15. Re: Centering canvas on browser screen
                                      pixlor Level 4

                                      Happy to help! Hang in there.