Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Jul 2009
    Posts
    2
    Member #
    19362
    Hi, I have recently began trying to redesign a website and I'm not too great at web development but I want to learn. I seem to have reached a wall with the development of this site when it comes to positioning and aligning the website. I laid the website out using AP Divs and I have found that this can cause problems for people viewing the site in different screen resolutions. I wondered how I could align site properly or how I could make the AP Divs sort of centered no matter what resolution they are viewed in. If anyone could rewrite my code to work like this I would be extremely grateful.

    Since rewriting it might be a big job could someone please tell me how I could do it myself.

    Code:
    [IMG]file:///D:/Users/Kim/AppData/Local/Temp/moz-screenshot.png[/IMG][IMG]file:///D:/Users/Kim/AppData/Local/Temp/moz-screenshot-1.png[/IMG]<!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>The House Skatepark</title>
    <style type="text/css">
    <!--
    #apDiv1 {
        position:absolute;
        left:316px;
        top:41px;
        width:576px;
        height:281px;
        z-index:1;
    }
    #layout {
        position:absolute;
        top:19px;
        width:809px;
        height:800px;
        z-index:1;
        background-image: url(images/Layout.png);
        background-repeat: no-repeat;
        margin-left: -70px;
        left: 151px;
    }
    #apDiv2 {
        position:absolute;
        left:106px;
        top:226px;
        width:117px;
        height:37px;
        z-index:2;
    }
    #apDiv {
        position:absolute;
        left:118px;
        top:200px;
        width:117px;
        height:37px;
        z-index:2;
    }
    #apDiv3 {
        position:absolute;
        left:260px;
        top:200px;
        width:120px;
        height:43px;
        z-index:3;
    }
    #apDiv4 {
        position:absolute;
        left:401px;
        top:199px;
        width:94px;
        height:37px;
        z-index:4;
    }
    #apDiv5 {
        position:absolute;
        left:542px;
        top:199px;
        width:68px;
        height:39px;
        z-index:5;
    }
    #apDiv6 {
        position:absolute;
        left:685px;
        top:198px;
        width:124px;
        height:40px;
        z-index:6;
    }
    #apDiv7 {
        position:absolute;
        left:192px;
        top:268px;
        width:579px;
        height:17px;
        z-index:7;
    }
    .style1 {
        color: #CCCCCC;
        font-family: Ebrima;
    }
    #apDiv8 {
        position:absolute;
        left:179px;
        top:364px;
        width:103px;
        height:94px;
        z-index:8;
    }
    #apDiv9 {
        position:absolute;
        left:350px;
        top:332px;
        width:454px;
        height:101px;
        z-index:9;
    }
    .style2 {
        font-family: Ebrima;
        font-weight: bold;
    }
    .style3 {
        color: #CCCCB5
    }
    #apDiv10 {
        position:absolute;
        left:720px;
        top:466px;
        width:65px;
        height:30px;
        z-index:10;
    }
    -->
    </style>
    <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('images/About_r1_c1_f2.png','images/team_r1_c1_f3.png','images/comps_r1_c1_f3.png','images/home_r1_c1_f3.png','images/media_r1_c1_f3.png')">
    <div id="layout"></div>
    <div id="apDiv3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/About_r1_c1_f2.png',1)"><img src="images/About_r1_c1.png" name="Image3" width="134" height="42" border="0" id="Image3" /></a></div>
    <div id="apDiv4"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/team_r1_c1_f3.png',1)"><img src="images/team_r1_c1.png" name="Image4" width="134" height="42" border="0" id="Image4" /></a></div>
    <div id="apDiv5"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/media_r1_c1_f3.png',1)"><img src="images/media_r1_c1.png" name="Image5" width="134" height="42" border="0" id="Image5" /></a></div>
    <div id="apDiv6"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/comps_r1_c1_f3.png',1)"><img src="images/comps_r1_c1.png" name="Image6" width="142" height="42" border="0" id="Image6" /></a></div>
    <div id="apDiv7"><div align="center" class="style1"><FONT size="+1">
      <MARQUEE direction="left" loop="20" width="90%">
      <STRONG>News: The new house website is now up and running!</STRONG>
      </MARQUEE>
    </FONT></DIV>
    </div>
    <div id="apDiv8"><img src="images/flood.png" alt="flood" width="146" height="101" /></div>
    <div class="style3" id="apDiv9"><span class="style2">June '09: Flooding!!!</span>
      <p align="center" class="style2">In the immortal words of &quot;Nathan Oh no not again&quot;. At   four on Wednesday the rain came down and came down heavy. </p>
    </div>
    <div id="apDiv10"><img src="images/more.png" alt="more" width="69" height="31" /></div>
    <blockquote>
      <div id="apDiv"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/home_r1_c1_f3.png',1)"><img src="images/home_r1_c1.png" name="Image7" width="134" height="42" border="0" id="Image7" /></a></div>
    </blockquote>
    </body>
    </html>
    Thank you all in advance :classic:

  2.  

  3. #2
    Senior Member imagn's Avatar
    Join Date
    Jul 2007
    Location
    Los Angeles
    Posts
    156
    Member #
    15594
    There's a lot I'd do differently with your DIV layout, but if you simply want the entire layout centered in a browser, then wrap everything within <body> in a DIV with these CSS attributes:

    Code:
    #wrapper {
    position: relative;
    margin: 0 auto;
    width: 900px; // Whatever your width is
    }

  4. #3
    Junior Member
    Join Date
    Jul 2009
    Posts
    2
    Member #
    19362
    cool I'll try it now. Thank you.

  5. #4
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    If you don't care about IE6, you don't need the wrapper div either; just style the <body> tag instead.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:23 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com