2 Replies Latest reply: Feb 2, 2010 10:46 AM by martcol RSS

    Setting page size in Dreamweaver

    danae830 Community Member

      Hello,

       

      I was wondering if anyone could tell me how to set the page size. I would like to avoid annoying scroll bars (horizontal and vertical) appearing.

       

      Here's an example :

       

      http://www.mihaiedrisch.com/pages/index.htm

       

      Thank you very much for your help.

        • 1. Re: Setting page size in Dreamweaver
          Nancy O. CommunityMVP

          Use CSS to set the width of your page.  The code below is an example of a centered, fixed-width layout:

           

          body {

          width: 970px; /**width in px, % or ems**/

          background: #333;

          margin:0 auto; /**centers on screen**/

          }

           

          I would like to avoid annoying scroll bars (horizontal and vertical) appearing.

           

          You can't prevent vertical scrollbars from appearing on smaller displays or when text size is increased in browser.  But you can limit the need for horizontal scrolling if you choose a page width that provides comfortable viewing for the majority of your target users. Under 1000px for most laptop/desktop users.  Or use % for liquid layouts that resize to browser viewport.

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          www.alt-web.com/
          www.twitter.com/altweb
          www.alt-web.blogspot.com 

          • 2. Re: Setting page size in Dreamweaver
            martcol Community Member

            Gosh!  Your question in my mind is quite vague and I think that you first need to think about what you want.

             

            One suggestion would be to try a few of the layouts that are available to you as default pages in Dreamweaver and see how those pages are contained (or not)  There are a number of permutations for a page layout including fixed width, elastic and liquid (I get elastic and liquid mixed up).  I use DW inCS4 and there are a heap of possible page layouts available.  They are different to templates in DW.  I don't know what is available in other versions.

             

            I think that scroll bars are avoided partly, by not fixing width/height on elements that contain content that is bigger than that element.  For instance if you fix a height to a <div> that is 200px and you put text in there that will go to 400px then your visitor will need a scroll bar to view it.  If you don't set the height and accept that the <div> can expand with the content then no scroll bar is neccessary.  There are other things that you do but I think that's the nub of it.  I always think of the WWW as a land of compromise.  There are so many variables but at some stage the designer has to make firm decisions about what to go for.  This includes thinking about your potential audience.  What size monitor you think they might have, what browser they use and to some extent how computer savvy they might be.

             

            When you layout a page using CSS you have a range of ways to set sizes.  This includes px values, em, point, % and there might be others!

             

            I'm already tying myself up in knots trying to explain this stuff!

             

            I'd suggest you do a bit more research and possibly say a bit more about what you would like to achieve.  I didn't really get the link you posted.  Is that your site or an example of a site you would like to emulate?  That page by the way, on my 26" monitor doesn't look so good - but that might be about the different ways we see the world.

             

            There, that should kick off the discussion.  We can wait for an expert now to point out whether I'm misleading you!

             

            Have fun

             

            Martin

             

            [Edit]  Looks like Nancy beat me to it.  Listen to her - not me