PDA

View Full Version : maximize space


sher_amf
11-28-2007, 07:42 AM
how do i center always my website? i mean if i make a website at home and use it in the school the layout and sizing is somewhat different because of the size of the monitor how do i make it always compressed or maximized in the page?:mrgreen:

edbr
11-28-2007, 07:58 AM
you win for being the 100,000 th person to ask that. check out the tutorial section and there is your answer. hi by the way

sher_amf
12-24-2007, 07:27 AM
here is the site www.geocities.com/aguafortuna (http://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

here is the 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>

sher_amf
12-24-2007, 03:14 PM
anyone? just tel me whats wrong with my code

neonfluxx
12-24-2007, 05:47 PM
we are not here to got the work for you. Use the tutorial and figure it out. LEARN LEARN LEARN. Thats the name of the game.

sher_amf
12-25-2007, 01:28 AM
i have read it but it wont work..the least you could do is help me...i didnt asked for you guys to code for me i just want to know how to apply it

Cary
12-25-2007, 02:33 AM
You need a wrapper, which you have right here (I changed the wrapper to an ID):

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

Part of the problem is the wrapper div only encloses 5 of your layers. The wrapper's closing div tag should appear after Layer10, just before the closing body tag.

The other part of the problem is the lack of styling for the body and the wrapper div:

body {
text-align: center;
}
#wrapper {
text-align: left;
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
}

Your wrapper needs relative positioning so your layers will position themselves relative to the wrapper which is centered, rather than the body which isn't centered.

domedia
12-25-2007, 03:47 PM
and more here as well:
http://www.dreamweaverclub.com/css-center-content.php

sher_amf
12-26-2007, 01:12 AM
here is my update code added what you have said:

<!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 {
text-align: left;
width: 980px;
margin-right: auto;
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="<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>

Cary
12-26-2007, 03:01 AM
Somehow your code is really getting mangled when you past it. Just look at the code for your menu which also requires alt text for the image links as does your logo image. You didn't give the first style a selector, and you didn't move the closing div for the wrapper. You should use a jpg for that storefront image. As it is, the file size is way too big for that kind of image.

<!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">
body {
text-align: center;
}
#wrapper {
text-align: left;
width: 980px;
margin: 0 auto;
position: relative;
}
#Layer1 {
position:absolute;
width:979px;
height:19px;
left: 1px;
top: 148px;
}
#Layer3 {
position:absolute;
width:151px;
height:41px;
left: 503px;
top: 179px;
}
#Layer4 {
position:absolute;
width:154px;
height:41px;
left: 337px;
top: 180px;
}
#Layer5 {
position:absolute;
width:151px;
height:40px;
left: 168px;
top: 181px;
}
#Layer6 {
position:absolute;
width:153px;
height:41px;
left: 5px;
top: 180px;
}
#Layer7 {
position:absolute;
width:200px;
height:115px;
left: 616px;
top: 15px;
}
#Layer8 {
position:absolute;
width:200px;
height:115px;
top: 22px;
}
#Layer9 {
position:absolute;
width:426px;
left: 13px;
top: 299px;
}
.style1 {
font-family: Calibri, sans-serif; /* You should list alternate fonts for those who don't have Calibri */
font-weight: bold;
}
#Layer10 {
position:absolute;
width:200px;
height:115px;
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 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>
</div>
</body>
</html>

sher_amf
12-26-2007, 10:39 AM
thanks a lot! here check my site its all centered now
www.geocities.com (http://www.geocities.com)/aguafortuna