8 Replies Latest reply on Apr 28, 2010 12:00 PM by starsavage

    Want absolutely positioned elements to resize with browser window

    starsavage

      my goal is to have pages with elements that have exact positions (each page will be slightly different). I developed a page that has a number of absolutely positioned elements on it. they are contained within a div that's relatively positioned. when i resize the browser window the absolute elements stay in their fixed locations and the rest of the design gets resized. this is NOT what i want. i DO want the absolute elements to get resized too. i understand that absolutely positioned elements are removed from the normal flow of the rest of the elements. however, i want to know if it's possible to have them be absolutely positioned, but get resized when the browser window size is changed. i tried using relative positioning, but it didn't work too well.

       

      CSS CODE

      @import url("./whitespace-reset.css");
      @charset "UTF-8";
      body  {
          margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
          padding: 0;
          text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
          color: #000000;
          font-family: Georgia, "Times New Roman", Times, serif;
      }
      #container  {
          width: 761px; /* the auto margins (in conjunction with a width) center the page */
          border: 0;
          text-align: left; /* this overrides the text-align: center on the body element. */
          height: 871px;
          margin: 0 auto;
          padding: 0;
          background: #FFFFFF url(images/body-solar-inverted-mono-light.jpg) repeat;
      }
      #header  {
          height: 148px;
          width: 761px;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
      }
      #leftside {
          width: 158px;
          float: left;
          margin-top: -38px;
          padding: 0px 0px 0px 0px;
      }
      #leftside .menu img {
          display: block;
          margin: 0;
      }
      #leftside  ul.menu {
          padding: 0px 0px 0px 0px;
          font-style: none;
          margin: 0;
      }
      #leftside ul.menu li {
          display: inline;
          float: left;
          margin: 0;
          padding: 0;
          list-style: none;
      }
      #leftspacer {
          width: 31px;
          float: left;
          height: 723px;
          margin-top: -38px;
          padding-right: 10px;
          background-image: url(images/home_spacer_left.jpg);
          background-repeat: no-repeat;
      }
      #top  {
          margin-top: 0px;
          height: 38px;
          padding: 0px 0px 0px 0px;
          background: url(images/back_fix.jpg) repeat;
      }
      #top ul.menu {
          margin-top: 0px;
          margin-left: 189px;
          float: left;
          padding: 0px 0px 0px 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          list-style: none;
      }
      #top ul.menu li {
          display: inline;
          list-style: none;
          float: left;
          margin: 0;
          padding: 0;
      }
      #bottom {
          height: 22px;
          left: 468px;
      }
      #bottom ul.menu {
          margin-top: 300px;
          margin-right: -23px;
          float: left;
          margin-left: -61px;
          list-style: none;
      }
      #bottom ul.menu li {
          display: inline;
          list-style: none;
          float: left;
      }
      #mainContent  {
          margin: 0px 0px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
          padding: 0 0 0 0;
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 10pt;
      }
      #facilitiesContent {
          background: url(images/facilities_bg.jpg) repeat;
          padding: 0;
          height: 208px;
          margin: 0;
          width: 572px;
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 10pt;
          position: relative;
          left: 0px;
          top: 0px;
      }

      #footer  {
          padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
          background:#c0b7b2;
          height: 22px
      }
      #gyro-1 {
          position: absolute;
          z-index: 3;
          left: 325px;
          top: 210px;
      }
      #threepix {
          margin-left: 189px;
          margin-right: 0px;
          height: 114px;
      }
      #pixcopyleft {
          margin-left: 189px;
          font-size: 1em;
          font-family: Georgia, "Times New Roman", Times, serif;
          margin-top: 10px;
      }
      #pixcopyright {
          font-size: 10pt;
          margin-left: 189px;
          font-family: Georgia, "Times New Roman", Times, serif;
          margin-top: 10px;
      }
      #copycenter {
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 10pt;
          margin-left: 189px;
          margin-top: 10px;
      }
      #footer   ul.menu {
          margin-left: 189px;
          margin-right: 0px;
          margin-top: -22px;
          padding: 0px 0px 0px 0px;
          float: left;
      }
      #footer   ul.menu   li {
          display: inline;
          list-style: none;
          padding: 0px 0px 0px 0px;
          float: left;
      }
      #footer  p  {
          margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
          padding: 10 0;
      }
      img.imageleft {
          float: left;
          margin-left: 0px;
          padding: 5px 5px 5px 5px;
      }
      img.imageright {
          float: right;
          padding: 5px 0px 5px 5px;
          text-align: right;
      }
      .imagecenter {
          text-align: center;
      }
      .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 0px;
          padding: 5px 5px 5px 5px;
      }
      .fltlft { /* this class can be used to float an element left in your page */
          float: left;
          margin-right: 8px;
      }
      .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
          clear:both;
          height:0px;
          font-size: 1px;
          line-height: 0px;
      }
      h1 {
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 10pt;
          font-weight: bold;
          margin-bottom: 3px;
      }

       

      HTML CODE

      <!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>Core Pilates Studio</title>

       

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

       

      <style type="text/css">
      <!--
      #gyropix-1 {
          position: fixed;
          z-index: 3;
          left: 325px;
          top: 210px;
      }
      #gyropix-2 {
          position: absolute;
          z-index: 2;
          left: 510px;
          top: 335px;
      }
      #gyropix-3 {
          position: absolute;
          z-index:1;
          left: 335px;
          top: 565px;
      }
      #gyrocopy-1 {
          position: absolute;
          z-index:1;
          left: 550px;
          top: 210px;
          text-align: left;
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 9pt;
          width: 280px;
      }
      #gyrocopy-2 {
          position: absolute;
          z-index:1;
          left: 283px;
          top: 358px;
          text-align: right;
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 9pt;
          width: 220px;
      }
      #gyrocopy-3 {
          position: absolute;
          z-index:1;
          left: 623px;
          top: 593px;
          text-align: left;
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 9pt;
          width: 225px;
      }
      #gyrocopy-4 {
          position: absolute;
          z-index:1;
          left: 300px;
          top: 840px;
          text-align: left;
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 9pt;
          width: 500px;
      }
      -->
      </style>

       

      <body bgcolor="#c0b7b2">

       

      <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>
      <meta name="description" content="Core Pilates Studio is a classical, fully equipped pilates and Gyrotonic studio convenienly located near Vassar College in Poughkepsie, NY. We offer classical pilates, Gyrotonic and Gyrokinesis in private, semi-private and group sessions." />
      <meta name="keywords" content="core pilates studio, pilates, core, gyrotonic, gryokinesis, joeseph pilates, pilates in poughkeepsie, pilates in ny, pilates in new york" />
      </head>

       

      <body onload="MM_preloadImages('images/nav_main_home_roll.jpg','images/nav_main_thestudio_roll. jpg','images/nav_main_schedule_roll.jpg','images/nav_main_rates_roll.jpg','images/nav_main _ourteam_roll.jpg','images/nav_main_contactus_roll.jpg','images/nav_main_rates_roll.jpg')" >
      <div id="container">
      <div id="header">   
          <img src="images/home_header.jpg" align="left"/><a href="index.html"><img src="images/home_logo_core.jpg"/></a>     
        <!-- end #header --></div>

       

      <div id ="top">
         <ul class="menu">
            <li> <a href="pilates.html"> <img src="images/subnav_programs_pilates_down.jpg"/></a></li>
            <li> <a href="gyrotonic.html"> <img src="images/subnav_programs_gyrotonic_up.jpg"/></a></li>
            <li> <a href="why-core.html"> <img src="images/subnav_programs_whycore_up.jpg"/></a></li>
            <li> <a href="schedule.html"> <img src="images/subnav_programs_schedule_up.jpg"/></a></li>
            <li> <img src="images/subnav_programs_back.jpg"/></li>
         </ul>
      <!-- end #top --></div>
      <div id="leftside">
         <ul class="menu">
            <li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/nav_main_home_roll.jpg',1)"><img src="images/nav_main_home_up.jpg" name="home" width="158" height="39" border="0" id="home" /></a></li>
            <li><a href="programs.html"><img src="images/nav_main_programs_down.jpg"/></a></li>
            <li><a href="the-studio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('the_studio','','images/nav_main_thestudio_roll.jpg',1)"><img src="images/nav_main_thestudio_up.jpg" name="the_studio" width="158" height="39" border="0" id="the_studio" /></a></li>
            <li><a href="schedule.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('schedule','','images/nav_main_schedule_roll.jpg',1)"><img src="images/nav_main_schedule_up.jpg" name="schedule" width="158" height="39" border="0" id="schedule" /></a></li>
            <li><a href="rates.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rates','','images/nav_main_rates_roll.jpg',1)"><img src="images/nav_main_rates_up.jpg" name="rates" width="158" height="39" border="0" id="rates" /></a></li>
            <li><a href="our-team.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our_team','','images/nav_main_ourteam_roll.jpg',1)"><img src="images/nav_main_ourteam_up.jpg" name="our_team" width="158" height="39" border="0" id="our_team" /></a></li>
            <li><a href="contact-us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact_us','','images/nav_main_contactus_roll.jpg',1)"><img src="images/nav_main_contactus_up.jpg" name="contact_us" width="158" height="39" border="0" id="contact_us" /></a></li>
            <li><img src="images/nav_main_space_below.jpg" /></li>
            <li><a href="mailto:test@test.com"><img src="images/home_email.jpg" /></a></li>
            <li><img src="images/home_address.jpg" /></li>
            <li><a href="special-programs.html"><img src="images/home_logo_special.jpg" /></a></li>
         </ul>
      <!-- end #leftside --></div>
      <div id="leftspacer">
      <!-- end #leftspacer --></div>
      <div id="facilitesContent">
      <div id="gyropix-1">
      <img src="images/GYROTONIC_1.jpg" width="217" height="141" border="0" alt="figure eight" /></div>
      <div id="gyropix-2">
      <img src="images/GYROTONIC_2.jpg" width="324" height="248" border="0" alt="stirring" /></div>
      <div id="gyropix-3">
      <img src="images/GYROTONIC_3.jpg" width="279" height="265" border="0" alt="internal quadtricep " /></div>
      <div id="gyrocopy-1">
        <div align="left"><h1>What is GYROTONIC®?</h1>
          The GYROTONIC Expansion System® was conceived by Juliu Horvath using key principles of gymnastics, swimming, ballet, and yoga which mobilize and articulate the joints through a series of circular type movements. The exercises are performed on specialized equipment, designed to allow maximum freedom of movement.</div>
      </div>
      <div id="gyrocopy-2">
        <div align="right"><h1>Benefits of GYROTONIC®</h1>
          The GYROTONIC Expansion System® simultaneously  stretches and strengthens muscles and tendons while mobilizing and articulating the joints. The system can dramatically increase range of motion, flexibility and coordination.<br /><br />
          <h1>Who can do GYROTONIC®?</h1>
          GYROTONIC® is beneficial for people from all walks of life, age groups and heath. It can be used for rehabilitative purposes, preventive or general exercise.</div>
      </div>
      <div id="gyrocopy-3">
        <div align="left"><h1>What is GYROKINESIS®?</h1>
         GYROKINESIS® exercises work the entire body through seven natural elements of spinal movement: forward, backward, left side, right side, left twist, right twist and circular. This approach systematically and gently works the joints and muscles through rhythmic and undulating movements. These movements stimulate the body's internal organs while different corresponding breathing patterns are integrated along with the movements. It is performed on a sitting on a stool, the floor and standing. No specialized equipment is needed.</div>
      </div>
      <div id="gyrocopy-4">
        <div align="right">
          For more information about GYROTONIC® and GYROKINESIS® goto <strong><a href="http://gyrotonic.com" target="_blank">gyrotonic.com</a></strong></div>
      </div>
      <!-- end #facilitesontent -->
      </div>

          <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
          <br class="clearfloat" />
      <div id="footer">
         <ul class="menu"> 
             <li><img src="images/nav_bottom_left_space.jpg"/></li>
             <li><a href="index.html"> <img src="images/nav_bottom_home.jpg"/></a></li>
             <li><a href="programs.html"> <img src="images/nav_bottom_program.jpg"/></a></li>
             <li><a href="the-studio.html"> <img src="images/nav_bottom_thestudio.jpg"/></a></li>
             <li><a href="schedule.html"> <img src="images/nav_bottom_schedule.jpg"/></a></li>
             <li><a href="rates.html"> <img src="images/nav_bottom_rates.jpg"/></a></li>
             <li><a href="our-team.htm"> <img src="images/nav_bottom_ourteam.jpg"/></a></li>
             <li><a href="contact-us.html"> <img src="images/nav_bottom_contactus.jpg"/></a></li>
         </ul>
        <!-- end #footer --></div>
      <!-- end #container --></div>
      </body>
      </html>