Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    82
    Thanks
    10
    Thanked 0 Times in 0 Posts

    center for other monitors

    i have created my website but the problem is when i open the site in other computers the margins are different because of the size of the monitors
    all values are still dummy values..
    here is the link :www.geocities.com/aguafortuna
    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=iso-8859-1" />
    <title>Welcome To Agua Fortuna!</title>
    <style type="text/css">
    <!--
    #Layer1 {
    position:absolute;
    width:979px;
    height:19px;
    z-index:1;
    left: 1px;
    top: 148px;
    }
    #Layer2 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:2;
    }
    #Layer3 {
    position:absolute;
    width:151px;
    height:41px;
    z-index:2;
    left: 503px;
    top: 179px;
    }
    #Layer4 {
    position:absolute;
    width:154px;
    height:41px;
    z-index:3;
    left: 337px;
    top: 180px;
    }
    #Layer5 {
    position:absolute;
    width:151px;
    height:40px;
    z-index:4;
    left: 168px;
    top: 181px;
    }
    #Layer6 {
    position:absolute;
    width:153px;
    height:41px;
    z-index:5;
    left: 5px;
    top: 180px;
    }
    #Layer7 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:6;
    left: 616px;
    top: 15px;
    }
    #Layer8 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:7;
    top: 22px;
    }
    #Layer9 {
    position:absolute;
    width:426px;
    height:438px;
    z-index:8;
    left: 13px;
    top: 299px;
    }
    .style1 {
    font-family: Calibri;
    font-weight: bold;
    }
    #Layer10 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:9;
    left: 537px;
    top: 272px;
    }
    -->
    </style>
    </head>
    <body>
    <div class="wrapper">
    <div id="Layer1"><img src="borderline.PNG" width="971" height="17" /></div>
    <div id="Layer3"><a href="<A href="http://www.geocities.com/aguafortuna//contactus.html"><img">http://www.geocities.com/aguafortuna//contactus.html"><img src="contactus.gif" width="150" height="35" border="0" /></a></div>
    <div id="Layer4"><a href=""><img src="gallery.gif" width="150" height="35" border="0" /></a></div>
    <div id="Layer5"><a href="<A href="http://www.geocities.com/aguafortuna//products.html"><img">http://www.geocities.com/aguafortuna//products.html"><img src="products.gif" width="150" height="35" border="0" /></a></div>
    <div id="Layer6"><a href="<A href="http://www.geocities.com/aguafortuna"><img">http://www.geocities.com/aguafortuna"><img src="home.gif" width="150" height="35" border="0" /></a></div>
    </div>
    <div id="Layer7"><img src="008.gif" width="350" height="120" /></div>
    <div id="Layer8"><img src="agualogo.PNG" width="560" height="110" /></div>
    <div class="style1" id="Layer9">
    <p align="left"> Canada Water was originally intended to be a stop on the aborted Fleet Line Extension to Thamesmead. The extension did not happen, but Canada Water became the only projected Fleet Line Extension station to be realised on the Jubilee Line Extension.</p>
    <p> Although the station forms an interchange between the East London Line and the Jubilee Line, it is a wholly new building on a derelict site formerly occupied by Albion Dock, part of the old Surrey Commercial Docks. The land around the station is still undeveloped but a new housing and commercial development is envisaged for the area in 2006. The station was one of the first designed for the Jubilee Line Extension, was built by Wimpey Construction and was opened on 17 September 1999, served by East London Line trains. Jubilee Line trains arrived on 20 November 1999.</p>
    <p><br />
    Construction of Canada Water station started in 1995 during the closure of the East London Line. The building was opened for passenger service on 19 August 1999.<br />
    </p>
    </div>
    <div id="Layer10"><img src="sampleshop.PNG" width="373" height="487" /></div>
    </body>
    </html>
    Last edited by oracleguy; 12-24-2007 at 06:39 PM.

  • #2
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    That is because everything is being positioned absolutely, you need to use relative values and percentages on some parts of it if you want it to shrink/expand based on the browser window.
    OracleGuy

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello sher_amf -Merry Christmas!

    oracleguy is right, your use of absolute positioning is causing your trouble. It's too bad that DreamWeaver kind of steers new users toward using layers like that...
    Much better to use floats and margins to position things. It's just a small site so I'll show you a demo of your front page. In your browser, click on view source to see how it's done (or you can save the whole thing to your desktop).

    site demo link
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    sher_amf (12-25-2007)

  • #4
    New Coder
    Join Date
    Dec 2007
    Posts
    82
    Thanks
    10
    Thanked 0 Times in 0 Posts
    wow what is float? i saw the code its very short...thanks men!i read tutorials there is a div class i think called wrappers that centers the site.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    It is an id. #container is the one that does it, with margin: 0 auto;
    That is shorthand for
    Code:
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Dec 2007
    Posts
    82
    Thanks
    10
    Thanked 0 Times in 0 Posts
    but is that the same with html? thats css?

  • #7
    New Coder
    Join Date
    Dec 2007
    Posts
    82
    Thanks
    10
    Thanked 0 Times in 0 Posts
    here i have tried reading tutorials here is my updates code changed a bit but still lacks
    <!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>Welcome To Agua Fortuna!</title>
    <style type="text/css">
    <!--
    {
    text-align: center;
    }
    #wrapper {
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;

    position: relative;
    }
    #Layer1 {
    position:absolute;
    width:979px;
    height:19px;
    z-index:1;
    left: 1px;
    top: 148px;
    }
    #Layer2 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:2;
    }
    #Layer3 {
    position:absolute;
    width:151px;
    height:41px;
    z-index:2;
    left: 503px;
    top: 179px;
    }
    #Layer4 {
    position:absolute;
    width:154px;
    height:41px;
    z-index:3;
    left: 337px;
    top: 180px;
    }
    #Layer5 {
    position:absolute;
    width:151px;
    height:40px;
    z-index:4;
    left: 168px;
    top: 181px;
    }
    #Layer6 {
    position:absolute;
    width:153px;
    height:41px;
    z-index:5;
    left: 5px;
    top: 180px;
    }
    #Layer7 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:6;
    left: 616px;
    top: 15px;
    }
    #Layer8 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:7;
    top: 22px;
    }
    #Layer9 {
    position:absolute;
    width:426px;
    height:438px;
    z-index:8;
    left: 13px;
    top: 299px;
    }
    .style1 {
    font-family: Calibri;
    font-weight: bold;
    }
    #Layer10 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:9;
    left: 537px;
    top: 272px;
    }
    -->
    </style>
    </head>

    <body>

    <div id="wrapper">
    <div id="Layer1"><img src="borderline.PNG" width="971" height="17" /></div>
    <div id="Layer3"><a href="http://www.geocities.com/aguafortuna//contactus.html"><img src="contactus.gif" width="150" height="35" border="0" /></a></div>
    <div id="Layer4"><a href=""><img src="gallery.gif" width="150" height="35" border="0" /></a></div>
    <div id="Layer5"><a href="http://www.geocities.com/aguafortuna//products.html"><img src="products.gif" width="150" height="35" border="0" /></a></div>
    <div id="Layer6"><a href="http://www.geocities.com/aguafortuna"><img src="home.gif" width="150" height="35" border="0" /></a></div>
    </div>
    <div id="Layer7"><img src="008.gif" width="350" height="120" /></div>
    <div id="Layer8"><img src="agualogo.PNG" width="560" height="110" /></div>
    <div class="style1" id="Layer9">
    <p align="left"> Aguafortun water was originally intended to be a stop on the aborted Fleet Line Extension to Thamesmead. The extension did not happen, but Canada Water became the only projected Fleet Line Extension station to be realised on the Jubilee Line Extension.</p>
    <p> Although the station forms an interchange between the East London Line and the Jubilee Line, it is a wholly new building on a derelict site formerly occupied by Albion Dock, part of the old Surrey Commercial Docks. The land around the station is still undeveloped but a new housing and commercial development is envisaged for the area in 2006. The station was one of the first designed for the Jubilee Line Extension, was built by Wimpey Construction and was opened on 17 September 1999, served by East London Line trains. Jubilee Line trains arrived on 20 November 1999.</p>
    <p><br />
    Construction of Aguafortuna water station started in 1995 during the closure of the East London Line. The building was opened for passenger service on 19 August 1999.<br />
    </p>
    </div>
    <div id="Layer10"><img src="sampleshop.PNG" width="373" height="487" /></div>
    </body>
    </html>

  • #8
    New Coder
    Join Date
    Dec 2007
    Posts
    82
    Thanks
    10
    Thanked 0 Times in 0 Posts
    i have done it, it works for me check it out if it works with you too..check the whole site..the gallery link is still under construction..
    www.geocities.com/aguafortuna


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •