...

View Full Version : center for other monitors



sher_amf
12-24-2007, 05:32 PM
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


<!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>

oracleguy
12-24-2007, 06:41 PM
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.

Excavator
12-24-2007, 07:41 PM
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 (http://nopeople.com/agua/)

sher_amf
12-25-2007, 03:54 AM
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.

Excavator
12-25-2007, 06:04 AM
It is an id. #container is the one that does it, with margin: 0 auto;
That is shorthand for

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

sher_amf
12-25-2007, 08:02 AM
but is that the same with html? thats css?

sher_amf
12-26-2007, 03:30 AM
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>

sher_amf
12-26-2007, 12:51 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum