3 Replies Latest reply on Dec 2, 2012 12:21 PM by Nancy OShea

    How can I make the webpage display the same on different sized screens?

    dannyyyy000000

      I have made a webpage, but it appears differently in different resolutions. I am in 1920x1080 and it appears fine on my screen, but anything smaller than that, the text is zoomed in more and it is not central.

      website can be found here: http://www.fitness4funswindon.net23.net/1_Index.html

       

      How do I get this webpage/site to appear in only one specific resolution?

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <title>Fitness4FunSwindon</title>

      <style type="text/css">

      #apDiv1 {

                position: absolute;

                width: 200px;

                height: 115px;

                z-index: 1;

                left: 154px;

                top: 69px;

      }

      body {

                background-color: #007E8A;

                background-image: url(Images/background%20image.jpg);

                background-repeat: no-repeat;

      }

      #apDiv2 {

                position: absolute;

                width: 361px;

                height: 68px;

                z-index: 2;

                left: 1009px;

                top: 311px;

                color: #FFF;

                font-size: 5em;

      }

      #apDiv2 a {

                color: #FFF;

      }

      #apDiv3 {

                position: absolute;

                width: 249px;

                height: 216px;

                z-index: 2;

                left: 1020px;

                top: 359px;

      }

      #apDiv4 {

                position: absolute;

                width: 1375px;

                height: 173px;

                z-index: 1;

                left: 19px;

                top: 433px;

      }

      </style>

      <style type="text/css">

      #apDiv5 {

                position: absolute;

                width: 200px;

                height: 115px;

                z-index: 2;

                left: 20px;

                top: 18px;

      }

      #apDiv6 {

                position: absolute;

                width: 960px;

                height: 1297px;

                z-index: 3;

                top: 12px;

                background-color: #D9E052;

                border-top-style: solid;

                border-right-style: solid;

                border-bottom-style: solid;

                border-left-style: solid;

                border-top-color: #60F;

                border-right-color: #60F;

                border-bottom-color: #60F;

                border-left-color: #60F;

                margin-left: 400px;

                left: -108px;

                clip: rect(auto,auto,auto,auto);

                visibility: inherit;

                padding-left: 0px;

      }

      #apDiv7 {

                position: absolute;

                width: 960px;

                height: 246px;

                z-index: 1;

                left: 0px;

                top: 0px;

      }

      #apDiv8 {

                position: absolute;

                width: 963px;

                height: 134px;

                z-index: 2;

                top: 249px;

      }

      #apDiv9 {

                position: absolute;

                width: 962px;

                height: 115px;

                z-index: 2;

                left: -2px;

                top: 246px;

      }

      #apDiv10 {

                position: absolute;

                width: 960px;

                height: 127px;

                z-index: 2;

                left: 0px;

                top: 246px;

      }

      .instructor {

                border-top-style: solid;

                border-right-style: solid;

                border-bottom-style: solid;

                border-left-style: solid;

                border-top-color: #000;

                border-right-color: #000;

                border-bottom-color: #000;

                border-left-color: #000;

      }

      </style>

      <style type="text/css">

      #apDiv11 {

                position: absolute;

                width: 955px;

                height: 133px;

                z-index: 3;

                top: 419px;

                left: 5px;

                font-size: 30px;

                font-family: "Comic Sans MS", cursive;

                text-align: center;

                font-weight: bold;

                color: #000;

      }

      #apDiv12 {

                position: absolute;

                width: 255px;

                height: 505px;

                z-index: 4;

                left: 31px;

                top: 709px;

      }

      #apDiv13 {

                position: absolute;

                width: 334px;

                height: 156px;

                z-index: 5;

                left: 65px;

                top: 552px;

      }

      #apDiv14 {

                position: absolute;

                width: 200px;

                height: 115px;

                z-index: 4;

      }

      #apDiv15 {

                position: absolute;

                width: 372px;

                height: 348px;

                z-index: 4;

                left: 3px;

                top: 549px;

                background-color: #990;

      }

      #apDiv16 {

                position: absolute;

                width: 957px;

                height: 110px;

                z-index: 4;

                top: 568px;

      }

      #apDiv17 {

                position: absolute;

                width: 200px;

                height: 115px;

                z-index: 4;

      }

      #apDiv18 {

                position: absolute;

                width: 508px;

                height: 587px;

                z-index: 4;

                top: 553px;

                left: 8px;

      }

      #apDiv19 {

                position: absolute;

                width: 200px;

                height: 115px;

                z-index: 4;

      }

      #apDiv20 {

                position: absolute;

                width: 412px;

                height: 481px;

                z-index: 5;

                left: 544px;

                top: 553px;

                font-family: Arial, Helvetica, sans-serif;

                font-size: medium;

      }

      #apDiv21 {

                position: absolute;

                width: 378px;

                height: 129px;

                z-index: 6;

                left: 551px;

                top: 1042px;

      }

      #apDiv22 {

                position: absolute;

                width: 200px;

                height: 115px;

                z-index: 4;

      }

      #apDiv23 {

                position: absolute;

                width: 161px;

                height: 115px;

                z-index: 7;

                left: 333px;

                top: 775px;

      }

      #apDiv24 {

                position: absolute;

                width: 921px;

                height: 107px;

                z-index: 4;

                left: 270px;

                top: 1213px;

                font-family: ravie;

                font-size: xx-small;

      }

      #apDiv25 {

                position: absolute;

                width: 200px;

                height: 115px;

                z-index: 5;

      }

      #apDiv26 {

                position: absolute;

                width: 1603px;

                height: 769px;

                z-index: 5;

      }

      #apDiv27 {

                position: absolute;

                width: 349px;

                height: 157px;

                z-index: 5;

                left: 1320px;

                top: 37px;

      }

      #apDiv28 {

                position: absolute;

                width: 948px;

                height: 95px;

                z-index: 8;

                left: 4px;

                top: 1190px;

                font-family: Arial, Helvetica, sans-serif;

      }

      #text1 {

                width: 600px;

                margin-top: 300px;

      }

      </style>

      <link href="mystyle.css" rel="stylesheet" type="text/css" />

      <link href="mystyle2.css" rel="stylesheet" type="text/css" />

      <style type="text/css">

      #apDiv29 {

                position: absolute;

                width: 949px;

                height: 95px;

                z-index: 8;

                left: 8px;

                top: 1189px;

      }

      #apDiv30 {

                position: absolute;

                width: 456px;

                height: 243px;

                z-index: 9;

                left: 505px;

                top: 948px;

                background-color: #0000FF;

                text-align: center;

      }

      </style>

      <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

      <style type="text/css">

      #apDiv31 {

                position: absolute;

                width: 389px;

                height: 389px;

                z-index: 10;

                left: 552px;

                top: 557px;

                font-family: "Comic Sans MS", cursive;

                font-size: 20px;

      }

      #apDiv32 {

                position: absolute;

                width: 106px;

                height: 33px;

                z-index: 4;

                left: 762px;

                top: 52px;

      }

      #apDiv33 {

                position: absolute;

                width: 432px;

                height: 1305px;

                z-index: 4;

      }

      </style>

      <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script><script type="text/javascript">

      function MM_swapImgRestore() { //v3.0

        var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

      }

      function MM_preloadImages() { //v3.0

        var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

          var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

          if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

      }

       

       

      function MM_findObj(n, d) { //v4.01

        var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

          d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

        if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

        for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

        if(!x && d.getElementById) x=d.getElementById(n); return x;

      }

       

       

      function MM_swapImage() { //v3.0

        var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

         if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

      }

      </script>

      </head>

       

       

      <body onload="MM_preloadImages('Buttons/Contact.2.fw.png')">

      <div id="outwrapper">

      <div id="apDiv6">

        <div id="apDiv7"><img src="Images/banner.fw.png" width="960" height="246" /></div>

        <div id="apDiv10">

      <ul id="MenuBar1" class="MenuBarHorizontal">

        <li><a href="1_Index.html">Home</a>    </li>

        <li><a href="#" class="MenuBarItemSubmenu">About</a>

          <ul>

            <li><a href="2_2_Info_Instructor.html">Me</a></li>

            <li><a href="2_1_Info_zumba.html">Zumba</a></li>

          </ul>

        </li>

        <li><a href="3_Timetable.html">Timetable</a>    </li>

        <li><a href="#" class="MenuBarItemSubmenu">Gallery</a>

          <ul>

            <li><a href="4_2_Images.html">Images</a></li>

            <li><a href="4_1_Videos.html">Videos</a></li>

          </ul>

        </li>

        <li><a href="5_Prices.php">Prices</a></li>

        <li><a href="6_Contact.html">Contact</a></li>

      </ul>

      <p> </p>

        </div>

        <div id="apDiv11">COME DOWN TO ZUMBA SESSIONS (scheduled in &quot;Timetable&quot;)! IT IS ALOT OF FUN BUT AT THE SAME TIME YOU WILL BE WORKING OUT!!</div>

        <div id="apDiv18"><img src="Images/Page1- Index/instructor_pic_speech.fw.png" width="518" height="640" /></div>

        <div id="apDiv23"><img src="Images/Page1- Index/zumba logo_web_vert.jpg" width="160" height="334" /></div>

        <div>Content for New Div Tag Goes Here</div>

        <div id="apDiv31">Hello, and welcome to Fitness4Fun. On this website you can browse information about me or about Zumba in general. This site includes detailed descriptions on different aspects of Zumba (which is location in the &quot;About&quot; section of the website), images and videos (which is location in the &quot;Gallery&quot; section of the website), prices and offers that are available (which is located in the &quot;Prices&quot; section of the website), and also it allows you to contact me with any queries you may have regarding Zumba. </div>

        <div id="apDiv29">

          <div id="text2">

            <p>If you want more information on Zumba please click here to contact me (the instructor) about classes, suitable clothing or what the workouts involve and also why Zumba is a beneficial workout!!!</p>

            <p>If there is any problems with the website please contact dangoodwin@y7mail.com and it will be fixed ASAP</p>

            <div id="apDiv32"><a href="6_Contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','Buttons/Contact.2.fw.png',1)"><img src="Buttons/Contact.1.fw.png" width="106" height="33" id="Image4" /></a></div>

          </div>

      </div>

        <div id="apDiv30">

          <p>

            <embed src="Images/animation advertisement.gif" width="442" height="206"></embed>

          </p>

          <p> </p>

          <p> </p>

      </div>

      </div>

      </div>

      <script type="text/javascript">

      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

      </script>

      </body>

      </html>

       

      Thank You