1 Reply Latest reply on May 30, 2010 12:30 PM by Nancy OShea

    CS5: Positioning

    Zefyrinus

      jourbemanning.jpg

      I've been trying to build this page; first I used absolute positioning on everything because the other things are too difficult. But then I realized I need to use relative position anyway, because the text box is supposed to be resized to fit the browser window. The problems I have with relative position is that it seems to be relative to the previous object's bottom left corner, so the second object gets placed too low; and that I don't understand how I can specify position relative to which object. So I have three specific problems I'd need help with (please show me how to do these things in the design view rather than code if possible, because coding just adds more confusion):

       

      1. I've managed to set the background of the text box to fit the window, but the text isn't adjusted. How do I make the text have the same width as the box? EDIT: Solved this. It was just because the text was in a table.

       

      2. How do I set the white background to get a proper height depending on the length of the text?

       

      3. The text box is surrounded by a border. I divided the border into eight parts: top left corner (ram1), top side (ram2), top right corner (ram3), right side (ram4), bottom right corner (ram5), bottom side (ram6), bottom left corner (ram7), and left side (ram8). The side parts are only 1 pixel thick because they get resized according to the size of the text box. I managed to make the top side look allright (in the picture the top left corner, top side, and top right corner are present), but I have no idea how to do with the left and right sides. Can anyone help me with this?

       

      I hope you can understand what I mean. If you need clarifications on anything, just ask me.

       

      Here's all the code I have:

       

      <!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=iso-8859-1" />
      <title>Jourbemanning - startsida</title>
      <script type="text/javascript">
      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_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_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>

       

      <style>
      .flik {
      float:left;
      width:182px;
      position: absolute;
      left: 232px;
      /*top: 9px;*/
      z-index: 1;
      right: 10px;
      top: 10px;
      }
      .text
      {
      position: absolute;
      /*float: left;*/
      left: 252px;
      /*top: 60px;*/
      z-index: 2;
      background-color: #FFFFFF;
      right: 19px;
      top: 67px;
      text-align: left;
      }
      .knappar
      {
      width: 212px;
      position: absolute;
      left: 10px;
      top: 100px;
      z-index: 1;
      }
      .ram1
      {
      width: 20px;
      position: absolute;
      left: 232px;
      top: 42px;
      }
      .ram2
      {
      left: 252px;
      top: 42px;
      right: 19px;
      position: absolute;
      background-image: url(ram_del2.png);
      }
      .ram3
      {
      position: absolute;
      right: 10px;
      top: 42px;
      }
      .ram4
      {
      position: absolute;
      top: 67px;
      right: 10px;
      }
      .ram8
      {
      position: absolute;
      left: 232px;
      top: 67px;
      }
      </style>

      <body bgcolor="#000000" onload="MM_preloadImages('ro_startknapp3.png')">
      <div class="knappar"><table width="212" border="0">
        <tr>
          <td><a href="index4" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Start','','ro_startknapp3.png',1)"><img src="startknapp3.png" name="Start" width="212" height="54" border="0" id="Start" /></a></td>
        </tr>
        <tr>
          <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Aktuellt','','ro_startknapp3.png',1)"><img src="startknapp3.png" name="Aktuellt" width="212" height="54" border="0" id="Aktuellt" /></a></td>
        </tr>
        <tr>
          <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Hyr_Personal','','ro_startknapp3.png',1)"><img src="startknapp3.png" name="Hyr_Personal" width="212" height="54" border="0" id="Hyr_Personal" /></a></td>
        </tr>
        <tr>
          <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Sok_Jobb','','ro_startknapp3.png',1)"><img src="startknapp3.png" name="Sok_Jobb" width="212" height="54" border="0" id="Sok_Jobb" /></a></td>
        </tr>
        <tr>
          <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakta_Oss','','ro_startknapp3.png',1)"><img src="startknapp3.png" name="Kontakta_Oss" width="212" height="54" border="0" id="Kontakta_Oss" /></a></td>
        </tr>
        <tr>
          <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','ro_startknapp3.png',1)"><img src="startknapp3.png" name="Image12" width="212" height="54" border="0" id="Image12" /></a></td>
        </tr>
        <tr>
          <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','ro_startknapp3.png',1)"><img src="startknapp3.png" name="Image13" width="212" height="54" border="0" id="Image13" /></a></td>
        </tr>
      </table></div>

      <div class="flik"><img src="flik_kontakta_oss.png" width="182" height="32" align="top" /></div>
      <div class="ram1"><img src="ram_del1.png" width="20" height="25"/></div>
      <div class="ram2"><img src="ram_del2.png" width="1" height="25"/></div>
      <div class="ram3"><img src="ram_del3.png" width="9" height="25"/></div>
      <div class="ram4"><img src="ram_del4.png" width="9" height="1"/></div>
      <div class="ram8"><img src="ram_del8.png" width="20" height="1"/></div>
      <div class="text"><table width="648" border="0">
        <tr>
          <td><table border="0">
            <tr>
              <td><h1>V&auml;lkommen till Jourbemanning! </h1>
                <p>Jourbemanning &auml;r f&ouml;retaget som lever upp till namnet. Vi kan med kort varsel   st&auml;lla upp med kompetent personal! Personal som har den r&auml;tta viljan och styrkan   att vara b&auml;st n&auml;r det g&auml;ller...</p>
                <p><strong>Vi bemannar fr&auml;mst inom:</strong></p>
                <ul>
                  <li>Bygg - Rivning</li>
                  <li>Lager &ndash; Terminal</li>
                  <li>Transport</li>
                  <li>Sanering - St&auml;dning </li>
                </ul>
                <p>Vi erbjuder ert f&ouml;retag personaluthyrning och entreprenad. V&aring;r aff&auml;rsid&eacute; &auml;r   att vara b&auml;st p&aring; personaluthyrning och att f&ouml;rse just ert f&ouml;retag med den r&auml;tta   kompetensen.<br />
                  Vi bemannar i Stockholm och n&auml;romr&aring;den.<br />
                </p>
                <p><strong>Historia</strong><br />
                  Jourbemanning AB grundades 2001 av Sveriges idag   absolut b&auml;sta brottare, Ara Abrahamian OS silver medalj&ouml;r 2004, dubbel   v&auml;rldsm&auml;stare med guldmedalj fr&aring;n 2001 och 2002. F&ouml;retaget har ett gott   samarbete med idrottsv&auml;rlden och flertalet av v&aring;ra anst&auml;llda &auml;r eller har varit   brottare p&aring; elitniv&aring;. Jourbemanning i Stockholm AB skapades av id&eacute;er utifr&aring;n   egna erfarenheter av bemanningsbranschen.</p>
                <p>Vill du l&auml;sa mer om Ara kan du bes&ouml;ka hans egen hemsida <a href="http://www.ara.se" target="_blank">www.ara.se</a>.</p></td>
            </tr>
          </table>      <h1> </h1></td>
        </tr>
      </table></div>
      </body>
      </html>

        • 1. Re: CS5: Positioning
          Nancy OShea Adobe Community Professional & MVP

          1) HTML and CSS are required learning if you are serious about making web pages. Otherwise DW will continue to frustrate and confuse you.

           

          2) Do not use Absolute Positioning.  You don't need it for such a simple layout.

           

          Copy and Paste this code into a new, blank html page (in code view of course).

          Switch to design view and use the CSS properties panel to change backgrounds and colors to suit your needs.

           

           

          <!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=iso-8859-1" />
          <title>CSS 2-Column, Liquid Layout</title>
          
          <style type="text/css">
          /**zero out browser defaults on everything**/
          * {margin:0; padding:0; line-height: 100%; font-size:100%}
          
          /**adds vertical scrollbar to Mozilla**/
          html {height: 102%; margin-bottom: 2px;}
          
          body {
          font-family: Verdana, Arial, Helvetica,sans-serif;
          background: #990000;
          text-align:center;
          }
          
          #container {
          width : 95%; /**page width in pixels, ems or %**/
          margin : 0 auto; /**centers on screen**/
          text-align : left;
          background: #000;     
          }
          
          /**OPTIONAL HEADER**/
          #header {
          width: 100%; /**same height as image, if no image, remove height**/
          background: #000; 
          padding:0;
          color: #FFF;
          }
          
          #header h1 {
          margin: 0;
          padding: 10px;
          font-size: 14px;
          text-align: right;
          }
          
          /**LEFT SIDEBAR**/
          #sidebar1 {
          width: 180px;
          float: left;     
          height: 1%;
          background: #000;
          color: #FFF;
          padding: 15px 10px;
          /**to reduce float drop issues in IE6**/
          overflow: hidden;
          }
          
          #mainContent {
          padding: 10px;
          margin-left: 200px;
          background: #FFF;
          }
          
          /**fixes 3px jog in IE6**/
          * html #sidebar1 {margin-right:-3px}
          * html #mainContent {margin-left:197px}
          
          #footer {
          padding: 0 10px;
          background:#000;
          }
          
          /* BEGIN Vertical List Menu */
          #navlist ul{
          padding-left: 0;
          margin-left: 0;
          width: auto;
          font-size: 13px;
          }
          
          #navlist li{
          list-style: none;
          margin: 0;
          text-align: center;
          border: 1px solid #FFF;
          }
          
          #navlist li a {
          text-decoration: none;
          display: block;
          font-weight: bold;
          line-height: 2;
          background: #999;
          }
          /**Link State Colors**/
          #navlist li a:link {color:#FFF}
          #navlist li a:visited { color:#333}
          #navlist li a:hover, #navlist li a:active, #navlist li a:focus{ color:#FFF; background: #3399CC;}
          /* END vertical navlist */
          
          /**TEXT STYLES**/
          #footer p {
          margin: 0;
          padding: 10px 0;
          font-size: 16px;
          color: #0099CC;
          text-align: center;
          } 
          
          h1, h2, p {
          line-height: 1.4;
          margin: 5px;
          padding: 10px;
          font-size: 0.9em;
          }
          #sidebar1 p,#sidebar1 h3 {
          margin: 10px;
          padding: 5px;
          }
          
          /**MISC CLASSES**/
          .left {text-align: left}
          .center {text-align: center}
          .right {text-align:right}
          
          /**floats**/
          .flLt {
          float:left;
          width: 25%;
          padding: 12px;
          border: 1px solid red;
          }
          .flRt {
          float:right;
          width: 25%;
          padding: 12px;
          border: 1px solid green;
          }
          .clearfloat {clear:both; line-height: 1px; visibility:hidden}
          </style>
          
          <!--[if IE]>
          <style type="text/css">
          /* place css fixes for all versions of IE in this conditional comment */
          body {font-size: 76%;}
          #sidebar1 { 
          padding-top: 30px; 
          word-wrap: break-word;
          overflow: hidden; }
          #mainContent { zoom: 1; padding-top: 15px; }
          /* the above proprietary zoom property
          gives IE the hasLayout it needs to avoid several bugs */
          </style>
          <![endif]-->
          
          </head>
          <body>
          <div id="container">
          <div id="header">
          <h1>OPTIONAL HEADER
          <br />
          YOUR COMPANY NAME</h1>
          <!-- end #header --></div>
          <div id="sidebar1">
          <p><strong>#sidebar1</strong></p>
          <!--begin vertical menu -->
          <p> list menu</p>
          <ul id="navlist">
          <li><a href="#">Menu Item 1</a></li>
          <li><a href="#">Menu Item 2</a></li>
          <li><a href="#">Menu Item 3</a></li>
          <li><a href="#">Menu Item 4 </a></li>
          </ul> <!--end navlist -->
          <p>Lorem ipsum dolor sit  amet, consectetuer adipiscing elit. </p>
          <p>&lt;end of #sidebar1&gt; </p>
          <!--end sidebar1 --> </div> 
          <!--begin mainContent -->
          <div id="mainContent">
          <h1> CSS 2-column Liquid Layout</h1>
          <p>This page tested in  IE6, IE7, IE8, Firefox, Safari and Chrome. Valid XHTML and CSS. </p>
          <p><strong>#mainContent </strong></p>
          <p>Lorem ipsum dolor sit
          amet, consectetuer adipiscing elit. Praesent aliquam,  justo
          convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam 
          ante ac quam. </p>
          
          <h2>H2 level heading </h2>
          <p> Maecenas urna purus, fermentum id, molestie in, commodo
          porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
          quis  ligula. Phasellus tristique purus a augue condimentum
          adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis,
          tristique in, vulputate at, odio.</p>
          
          <!--begin float left container -->
          <div class="flLt">
          <p>.flLT</p>
          <p>FLOAT:LEFT</p>
          <p>WIDTH: 25% </p>
          <!--end floated container -->
          </div>
          
          <p> Maecenas urna purus, fermentum id, molestie in, commodo
          porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
          quis  ligula. Phasellus tristique purus a augue condimentum
          adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis,
          tristique in, vulputate at, odio.</p>
          
          <!-- important! Clear floats-->
          <hr class="clearfloat" />
          
          <!--begin float right container -->
          <div class="flRt">
          <p class="right">.flRT</p>
          <p>FLOAT:RIGHT</p>
          <p>WIDTH: 25% </p>
          <!--end floated container -->
          </div>
          <p> Maecenas urna purus, fermentum id, molestie in, commodo
          porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
          quis  ligula. Phasellus tristique purus a augue condimentum
          adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis,
          tristique in, vulputate at, odio.</p>
          
          <!-- important! Clear floats-->
          <hr class="clearfloat" />
          
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam 
          ante ac quam. </p>
          <p>&lt;end of #mainContent&gt; </p>
          <!-- end #mainContent --></div>
          
          <!-- important! Clear floats after mainContent div with hr, p or br class-->
          <hr class="clearfloat" />
          
          <div id="footer">
          <p>Your footer here</p>
          <!-- end #footer --> </div>
          <!-- end #container --> </div>
          </body>
          </html>
          

           

           

           

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