33 Replies Latest reply: Sep 23, 2011 3:45 AM by MurraySummers RSS

    Web Sizes

    HoareLuke

      Hi All,

      I'm making a new site and I'm unsure about the sizes of the site and what it shoulod be. I want the site to be able to be viewed on all different types of scrrens and also I want the page to be center of the screen. Is anyone able to help me out.

       

      Many thanks.

        • 1. Re: Web Sizes
          mytaxsite.co.uk CommunityMVP

          This code will look after your requirement:

           

          body {

              width: 960px;

              margin: 0 auto;

          }

           

          The sceen size is set at 960px and this is considered to be very common for desktops and laptops.

           

          hth

          • 2. Re: Web Sizes
            HoareLuke Community Member

            Will that work with notbooks. Also how can i center it so my website is in the middle of the page so when it is ona big screen the the web site is in the center and it has jut colour around the side.

            • 3. Re: Web Sizes
              mytaxsite.co.uk CommunityMVP

              The above code will ensure everything is in the center (horizontally).  did you want vertically as well?

              • 4. Re: Web Sizes
                HoareLuke Community Member

                Yes. I dont mind how long the pages our long as i dont have to scroll left to right. Do you undertand mate what I'm trying to say.

                • 5. Re: Web Sizes
                  mytaxsite.co.uk CommunityMVP

                  HoareLuke wrote:

                   

                  Yes. I dont mind how long the pages our long as i dont have to scroll left to right. Do you undertand mate what I'm trying to say.

                   

                  Yes I understand your question.  I have prepared a test page here.  Ignore the text in it because it just a test but look at the blue borders.  The box itself is in the center of the screen.

                   

                  <http://www.mytechnet.talktalk.net/width01.htm>

                   

                  hth

                  • 6. Re: Web Sizes
                    HoareLuke Community Member

                    Hi, that link you have given me dose not work. Thanks

                    • 7. Re: Web Sizes
                      mytaxsite.co.uk CommunityMVP

                      HoareLuke wrote:

                       

                      Hi, that link you have given me dose not work. Thanks

                       

                      Try again because these forums have just been upgraded so the links are a bit dodgy.

                       

                      hth

                      • 8. Re: Web Sizes
                        HoareLuke Community Member

                        Hi there,

                        So let me just confirum this all please if I can. The page you have linked to me the page will be centerd in the middle at all times and my web site will be build in that blue box. Also any device, notbooks, laptops and desktops can view the site and they want have to go left to right.

                        • 9. Re: Web Sizes
                          mytaxsite.co.uk CommunityMVP

                          HoareLuke wrote:

                           

                          Hi there,

                          So let me just confirum this all please if I can. The page you have linked to me the page will be centerd in the middle at all times and my web site will be build in that blue box. Also any device, notbooks, laptops and desktops can view the site and they want have to go left to right.

                           

                          Yes absolutely as long as the screen size is 960px or about 15 inches and above..

                          • 10. Re: Web Sizes
                            HoareLuke Community Member

                            What happernes if i go to a smaller device like a notbook what will happeren.

                            • 11. Re: Web Sizes
                              mytaxsite.co.uk CommunityMVP

                              HoareLuke wrote:

                               

                              What happernes if i go to a smaller device like a notbook what will happeren.

                               

                               

                              On a smaller screen users will have have to scroll left and right arrows in a scroll bar.  The scroll bar will appear automatically on a smaller screen.  You can change the window size in the code to 800px if that is what you want but this might look odd on a very large screen.

                               

                              hth

                              • 12. Re: Web Sizes
                                HoareLuke Community Member

                                Is there no way I can make it so it changes to the device.

                                • 13. Re: Web Sizes
                                  MurraySummers CommunityMVP

                                  body {

                                      min-width: 800px;

                                      max-width:960px;

                                      margin: 0 auto;

                                  }

                                   

                                  Or you could use media queries (google that term) to affect what stylesheet you use based on what the width of the platform is.

                                  • 14. Re: Web Sizes
                                    HoareLuke Community Member

                                    Hi there,

                                    As you many tell I'm new to to this:) but I want my site be be able to be viewed on all screen sizes like professioanl sites our. How could I go about todo that.

                                    • 15. Re: Web Sizes
                                      MurraySummers CommunityMVP

                                      Tel us what it is about the answers you have already been given that you do not understand.

                                      • 16. Re: Web Sizes
                                        HoareLuke Community Member

                                        If i use

                                        Media queries let me just get this right it will re size the page to the person computer scrrren.

                                        • 17. Re: Web Sizes
                                          MurraySummers CommunityMVP

                                          Try it and see.  It's not an "EASY" button, but it may help.

                                          • 18. Re: Web Sizes
                                            HoareLuke Community Member

                                            What is the best way todo it then, keep it as a deafult size or do that^

                                            • 19. Re: Web Sizes
                                              Nancy O. CommunityMVP

                                              Below is a page that uses media queries. 

                                              http://alt-web.com/TEMPLATES/CSS-centered-round-boxes.shtml

                                              If you resize your browser's viewport to less than 480px, page changes to a Smartphone optimized layout.  View source in browser to see the code.

                                               

                                              Read more about using media queries in DW:

                                              http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html

                                               

                                               

                                              Nancy O.

                                              Alt-Web Design & Publishing

                                              Web | Graphics | Print | Media  Specialists 

                                              http://alt-web.com/

                                              http://twitter.com/altweb

                                              • 20. Re: Web Sizes
                                                HoareLuke Community Member

                                                Can you one help me out for 5 mins over skype or msn?

                                                • 21. Re: Web Sizes
                                                  HoareLuke Community Member

                                                  I really don't now about the page size

                                                  • 22. Re: Web Sizes
                                                    mytaxsite.co.uk CommunityMVP

                                                    HoareLuke wrote:

                                                     

                                                    I really don't now about the page size

                                                     

                                                     

                                                    If you don't want to use pixel sizes then you can use percentage sizes.  Therefore, you could set the width to (say) 75% and this will resize itself with various screen sizes.  You can test it by resizing the browser window and see what happens.

                                                     

                                                    Page sizes are in inches (or centimeters in Europe) and it is not easy to compare pixels with inches/cms because even the pixel size is not uniform in all the devises in the market.  iPad's pixel size is different from laptop's which is itself different from desktop's CRT screen or LCD screen.

                                                     

                                                    See this example using percentages for width:

                                                     

                                                    <http://www.mytechnet.talktalk.net/width02.htm>

                                                    • 23. Re: Web Sizes
                                                      HoareLuke Community Member

                                                      Well i used meadia Media queries is that a better move to make.

                                                      • 24. Re: Web Sizes
                                                        mytaxsite.co.uk CommunityMVP

                                                        HoareLuke wrote:

                                                         

                                                        Well i used meadia Media queries is that a better move to make.

                                                         

                                                        Yes it a better move and also very topical.  The new devices require new techniques and DW 5.5 has done a lot to meet this for the modern kits.

                                                        • 25. Re: Web Sizes
                                                          HoareLuke Community Member

                                                          HI there,

                                                           

                                                          How can i test that my Media queries are working right.

                                                          • 26. Re: Web Sizes
                                                            Nancy O. CommunityMVP

                                                            Depends on whether you used device dependant or device-width dependant scripts.

                                                             

                                                            If device dependant, upload site and supporting files to your remote server and test in as many web devices as you can lay  your hands on.  If device-width dependant, preview in browsers and resize your viewport.

                                                             

                                                             

                                                            Nancy O.

                                                            Alt-Web Design & Publishing

                                                            Web | Graphics | Print | Media  Specialists 

                                                            http://alt-web.com/

                                                            http://twitter.com/altweb

                                                            • 27. Re: Web Sizes
                                                              HoareLuke Community Member

                                                              His is my URL please could you test it out on as many device you have to see if it works. www.luke-hoare.biz/test

                                                              • 28. Re: Web Sizes
                                                                MurraySummers CommunityMVP

                                                                Your phone.css, tablet.css, and desktop.css files are all empty.  So, you will see no difference at all in any of them.

                                                                • 29. Re: Web Sizes
                                                                  HoareLuke Community Member

                                                                  I dont now why that is becuse I use the Media queries tab in Dreamweaver. Please could you help me out with this as I need my site up and running. What have I done wrong?.

                                                                  4

                                                                   

                                                                  Thanks

                                                                  • 30. Re: Web Sizes
                                                                    miah_biosc

                                                                    I am also wanting to make my website suitable for sifferent screens but not sure where to put in code?

                                                                     

                                                                    this is my template page:

                                                                     

                                                                    <link href="../CSS/Bio_CSS.css" rel="stylesheet" type="text/css" media="all" />
                                                                    <script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
                                                                    <!-- TemplateBeginEditable name="doctitle" -->
                                                                    <title>Welomce to Bioscience</title>
                                                                    <!-- TemplateEndEditable -->
                                                                    <!-- TemplateBeginEditable name="head" -->
                                                                    <!-- TemplateEndEditable -->
                                                                    <!-- TemplateParam name="leftsidebar" type="text" value="left" -->
                                                                    <body class="current"><div id="head"><img src="../Assets/BioLogo.jpg" width="300" height="150" align="left">
                                                                      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="980" height="150" id="FlashID">
                                                                        <param name="movie" value="../Assets/Bio_980x150_Banner.swf">
                                                                        <param name="quality" value="high">
                                                                        <param name="wmode" value="opaque">
                                                                        <param name="swfversion" value="6.0.65.0">
                                                                        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
                                                                        <param name="expressinstall" value="../Scripts/expressInstall.swf">
                                                                        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
                                                                        <!--[if !IE]>-->
                                                                        <object data="../Assets/Bio_980x150_Banner.swf" type="application/x-shockwave-flash" width="980" height="150">
                                                                          <!--<![endif]-->
                                                                          <param name="quality" value="high">
                                                                          <param name="wmode" value="opaque">
                                                                          <param name="swfversion" value="6.0.65.0">
                                                                          <param name="expressinstall" value="../Scripts/expressInstall.swf">
                                                                          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
                                                                          <div>
                                                                            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                                                                            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
                                                                          </div>
                                                                          <!--[if !IE]>-->
                                                                        </object>
                                                                        <!--<![endif]-->
                                                                      </object>
                                                                    </div>


                                                                    <div align="center" id="foot">
                                                                      <div align="justify">&copy;2010 Bioscience Pty Ltd, 488 Nicholson Road Forrestdale, WA, 6112, Ph: (08) 9397 2446, Fax: (08) 9397 2447, Email: <a href="mailto:bioscience@biosciencewa.com ">bioscience@biosciencewa.com </a></div>
                                                                    </div>

                                                                     

                                                                    <div class="current" id="left">

                                                                        <!-- TemplateBeginEditable name="SidebarEditRegion" -->

                                                                          <ul>
                                                                          <li>
                                                                            <h2> <a href="../index.html" class="current">Home</a> </h2>
                                                                          </li>
                                                                          <li>
                                                                            <h3>
                                                                            <a href="../Home/home_office.html">Locate Us</a>
                                                                            <a href="../Home/home_staff.html">Our Staff</a> </h3>
                                                                          </li>
                                                                          <li>
                                                                            <h2>
                                                                            <a href="../Enviro/enviro.html">Environmental</a>
                                                                            <a href="../Water/">Water</a>
                                                                            <a href="../Geotech/geotech.html">Geotechnical</a>
                                                                            <a href="../Horti/horti.html">Horticultural</a>
                                                                            <a href="../Analyt/analyt.html">Analytical</a>
                                                                            <a href="../Waste/waste.html">Waste</a>
                                                                            <a href="../Research/research.html">Research </a>
                                                                            <a href="../Products/products.html">Products</a>
                                                                            </h2>
                                                                          </li>
                                                                        </ul>   

                                                                        <!-- TemplateEndEditable -->

                                                                    </div>

                                                                    <div id="content">
                                                                      <p> </p>
                                                                      <!-- TemplateBeginEditable name="ContentEditRegion" -->
                                                                      <p>ContentEditRegion</p>
                                                                      <p> </p>
                                                                      <p> </p>
                                                                      <!-- TemplateEndEditable -->
                                                                      <p align="justify"> </p>

                                                                      <br>
                                                                    </div>
                                                                    <script type="text/javascript">
                                                                    <!--
                                                                    swfobject.registerObject("FlashID");
                                                                    //-->
                                                                    </script>
                                                                    </html>

                                                                     

                                                                    ? can anyone help?

                                                                     

                                                                    www.biosciencewa.com

                                                                    • 31. Re: Web Sizes
                                                                      MurraySummers CommunityMVP

                                                                      I hope there is a bit more to your template page than you have shown here.  For example, you are missing the doctype, the <html> tag and the <head> tag with its associated </head>! You are also missing the </body> tag.  Surely this template is throwing oodles of errors when you try to use it?

                                                                       

                                                                      To give you some suggestions about how to modify your code, or whether you even need to  do so, we would also need to see your CSS.  The fact of the matter is that most websites will display just fine on smartphones, in spite of the other information you might see here.  What screen sizes are you wanting to support?

                                                                      • 32. Re: Web Sizes
                                                                        miah_biosc Community Member

                                                                        Hmmm.... seems to work fine?!?! I just want our site to fit most screens. For example if you have a look at it (Im presuming you probably have a wide screen as they seem to be more common these days) the body is skewed to the left rather than filling the screen.

                                                                         

                                                                        www.biosciencewa.com

                                                                         

                                                                        our CSS is...

                                                                         

                                                                        @charset "utf-8";
                                                                        /* CSS Document */


                                                                        body {height:100%;
                                                                        max-height:100%;
                                                                        overflow:hidden;
                                                                        padding:0;
                                                                        margin:0;
                                                                        border:0;
                                                                        }

                                                                        #content {
                                                                        overflow:auto;
                                                                        position:absolute;
                                                                        z-index:3;
                                                                        top:150px;
                                                                        bottom:20px;
                                                                        left:270px;
                                                                        right:0;
                                                                        background-color: #FFFFCC;
                                                                        color: #000;
                                                                        font-size:14px;
                                                                        }

                                                                        * html #content {
                                                                        top:0;
                                                                        left:0;
                                                                        right:0;
                                                                        bottom:0;
                                                                        height:100%;
                                                                        max-height:100%;
                                                                        width:100%;
                                                                        overflow:auto;
                                                                        position:absolute;
                                                                        z-index:3;
                                                                        border-top:150px solid #fff;
                                                                        border-bottom:25px solid #fff;
                                                                        border-left:270px solid #fff;
                                                                        font-family: Verdana, Geneva, sans-serif;
                                                                        font-size: 14px;
                                                                        font-style: normal;
                                                                        line-height: 25px;
                                                                        }

                                                                        #head {
                                                                        position:absolute;
                                                                        margin:0;
                                                                        top:-2px;
                                                                        left:-2px;
                                                                        display:block;
                                                                        width:100%;
                                                                        height:150px;
                                                                        background-position:0 0;
                                                                        background-repeat:no-repeat;
                                                                        font-size:4em;
                                                                        z-index:5;
                                                                        overflow:hidden;
                                                                        color:#fff;
                                                                        background-color: #9acc99;
                                                                        }

                                                                        #foot {
                                                                        position:absolute;
                                                                        margin:0;
                                                                        bottom:-3px;
                                                                        left:0px;
                                                                        display:block;
                                                                        width:100%;
                                                                        height:25px;
                                                                        font-size:1em;
                                                                        z-index:5;
                                                                        /* [disabled]overflow:hidden; */
                                                                        color:#fff;
                                                                        background-color: #663300;
                                                                        text-align: center;
                                                                        font-family: Verdana, Geneva, sans-serif;
                                                                        visibility: visible;
                                                                        }


                                                                        #content p {
                                                                        color: #000;
                                                                        text-align:justify;
                                                                        line-height:1.5;
                                                                        font-family:Verdana, Geneva, sans-serif;
                                                                        font-size:1em;
                                                                        padding-top: 0px;
                                                                        padding-right:40px;
                                                                        padding-bottom:0px;
                                                                        padding-left:40px;
                                                                        width:950px;
                                                                        }

                                                                        #content h1 {
                                                                        color: #663300;
                                                                        padding: 0px;
                                                                        text-indent: 30px;
                                                                        }

                                                                        #content h2 {
                                                                        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                                                                        font-size: 18px;
                                                                        color: #000;
                                                                        text-indent: 30px;
                                                                        }

                                                                        #content h3 {
                                                                        font-family: Verdana, Geneva, sans-serif;
                                                                        font-size: 14px;
                                                                        color: #000;
                                                                        text-indent: 50px;
                                                                        }

                                                                        * html #left {
                                                                        position:absolute;
                                                                        left:0;
                                                                        top:150px;
                                                                        bottom:25px;
                                                                        width:270px;
                                                                        height: 100%;
                                                                        }

                                                                        #left {
                                                                        position:absolute;
                                                                        left:0px;
                                                                        top:149px;
                                                                        bottom:20px;
                                                                        width:270px;
                                                                        font-size:1em;
                                                                        z-index:4;
                                                                        overflow:auto;
                                                                        background-repeat:no-repeat;
                                                                        background-color: #9acc99;
                                                                        color: #663300;
                                                                        text-align: left;
                                                                        vertical-align: middle;
                                                                        background-image: url(../Assets/Side_Background7.jpg);
                                                                        font-family: Andalus, "Palatino Linotype", "Times New Roman";
                                                                        }

                                                                        #left h2 {
                                                                        text-indent: 15px;
                                                                        }

                                                                        #left h3 {
                                                                        text-indent: 30px;
                                                                        }

                                                                        #left ul{
                                                                        margin:0;
                                                                        padding:0;
                                                                        list-style:none;
                                                                        }

                                                                        #left a {
                                                                        colour#663300;
                                                                        }

                                                                        #left li a:link,#left li a:visited{
                                                                        padding:0 0;
                                                                        display:block;
                                                                        text-decoration:none;
                                                                        font:Andalus, Georgia, "Times New Roman";
                                                                        color:#FFFFCC;
                                                                        }

                                                                        #left li a:hover {
                                                                        background:#306726;
                                                                        color:#FFF;
                                                                        }

                                                                        #left li a.current,#left li a.current:hover,#left li a.current:active {
                                                                        color:#663300;
                                                                        background:#ffffcc;
                                                                        cursor:default;
                                                                        }

                                                                        * html #left li a.current,#left li a.current:hover,#left li a.current:active,#left li a.current:visited {
                                                                        color:#663300;
                                                                        background:#ffffcc;
                                                                        cursor:default;
                                                                        }

                                                                        • 33. Re: Web Sizes
                                                                          MurraySummers CommunityMVP

                                                                          Hmmm.... seems to work fine?!?!

                                                                           

                                                                          If the code you posted is the code that's actually in the Template file, it cannot work fine.  You just haven't seen it fail yet.  But it will do so.

                                                                           

                                                                          For example, when I save your page (I have embedded the CSS in the head), I immediately get "There is an error at line 11 of "S:\\blah\blah\Templates\biosci.dwt": Unbalanced body tag.  That error is thrown because of the missing "</body>" tag.  I get a similar error when I spawn a new child page with FILE | New > Page from Template. That latter error prevents DW from spawning a child from this template.  Are you sure you are not getting any errors? How are you spawning your child pages?

                                                                           

                                                                          In addition to the problems that you will have from the code on the page, your approach is flawed, as well.  You have used absolute positioning as a primary layout approach.  This is generally a big mistake, but common among new developers.  You can read why I say this here - http://www.apptools.com/examples/pagelayout101.php.

                                                                           

                                                                          The whole idea of a fluid layout is that the design can 'flex' as the screen size changes.  The problem with using absolutely positioned containers to build your page is that there is no flex there.  Things are absolutely positioned on the screen.  They cannot move from the location you specify, which is probably why you comment that on wide screens, things are 'skewed' to the left.

                                                                           

                                                                          Just so you'll know, there are some reasonable arguments for not building a site with this 'fill the screen' approach. Read through the other comments in this thread to familiarize yourself with them.