Skip navigation
HoareLuke
Currently Being Moderated

Web Sizes

Sep 17, 2011 6:18 PM

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.

 
Replies
  • Currently Being Moderated
    Sep 17, 2011 6:23 PM   in reply to HoareLuke

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2011 6:36 PM   in reply to HoareLuke

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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2011 6:53 PM   in reply to HoareLuke

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2011 6:54 PM   in reply to HoareLuke

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2011 7:00 PM   in reply to HoareLuke

    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..

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2011 7:12 PM   in reply to HoareLuke

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 18, 2011 5:26 AM   in reply to HoareLuke

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 18, 2011 9:46 AM   in reply to HoareLuke

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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 18, 2011 10:15 AM   in reply to HoareLuke

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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 18, 2011 10:37 AM   in reply to HoareLuke

    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-que ries.html

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 18, 2011 2:05 PM   in reply to HoareLuke

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 18, 2011 6:22 PM   in reply to HoareLuke

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 19, 2011 12:51 PM   in reply to HoareLuke

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 19, 2011 1:55 PM   in reply to HoareLuke

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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 21, 2011 8:38 PM   in reply to HoareLuke

    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.g if" 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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 22, 2011 3:32 AM   in reply to miah_biosc

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 22, 2011 7:13 PM   in reply to MurraySummers

    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;
    }

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 23, 2011 3:45 AM   in reply to miah_biosc

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points