center site for different monitors

**Dragon_EPT** · Dec 24th, 2007, 10:43 AM

here is the site www.geocities.com/aguafortuna
i cant center it i have read the tutorials still wont work...
it is still in draft all values are just dummy values
where do i put the codes?
here is the code

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

**Web Design Forums** · Dec 24th, 2007 10:43 AM

**mlseim** · Dec 24th, 2007, 11:48 AM

Pick a width you wish to use (like 975) and try this (add blue stuff) ...

<title>Welcome To Agua Fortuna!</title>
<style type="text/css">
<!--
html, body {
margin:0px auto;
width:975px;
text-align:center;
}
.wrapper{
margin:0px auto;
width:975px;
}
#Layer1 {
position:absolute;
width:979px;
height:19px;
z-index:1;
left: 1px;
top: 148px;
}

**Dragon_EPT** · Dec 24th, 2007, 09:04 PM

si where do i insert that? isnt that ccs?

**mlseim** · Dec 25th, 2007, 07:12 PM

I put a portion of your code there so you can see where I inserted the blue part.
As others have mentioned, you have a ton of absolute positioning ... I didn't
notice that at first ... what I'm doing won't work anyhow with absolute
positioning.

**Dragon_EPT** · Dec 25th, 2007, 08:51 PM

so what do i need to do with the absolute positioning? delete it?
here is my 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">

</style>
</head>
<body>
<div id="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"> 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>

Thread: center site for different monitors

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions