Limiting width of a page [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : Limiting width of a page

sootica

11-06-2006, 12:45 AM

I'm very new to this. I made the mistake of volunteering to redo a site for a fundraising group at a school, and I think I have bigger plans for the design than I can actually make myself. I am using Dreamweaver. Here's the URL for a sample that I have up:
http://homepage.mac.com/sootica/Sites/canyoncrestfoundation/index.html

The thing that is bugging me about it right now is the right side in particular. Is it possible to limit the side there so it doesn't just go off into eternity forever? I'd like the images and layer to be centered. I did read the tutorial about centering, centering, centering, and have a dim idea that it applies to me, but can't quite figure out how. I did use absolute positioning so that the top image plaid would line up with the background plaid, but must have the top margin wrong or something since the image is hitting the top of the window. (Which is actually allright I think. Thanks

vadimo

11-06-2006, 04:47 PM

I did some editing and there u go:

<!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>Canyon Crest Academy Foundation Welcome</title>
<style type="text/css">
body {
background-image: url(images/BACKGROUNDIMAGE.jpg);
width:900px;
margin-top:30px;
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
}
#images {
width:900px;
}
#images_alt {
width:900px;
}
#text {
width:900px;
}
.textstyles {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align:center;
color: #FFFFFF;
}
</style>
</head>

<body>
<div id="images">
<img src="images/IMAGE-1.jpg" width="900" height="105" /><img src="images/IMAGE-2.jpg" alt="view of canyon crest academy" width="900" height="89" /></div>

<div id="images_alt">
<img src="images/IMAGE-3.jpg" width="900" height="98" /></div>

<div id="text">
<p class="textstyles">
Please direct any questions or concerns about this website to our <a href="mailto:aluap@adelphia.net">webmaster</a><br />
Last updated:Nov. 4, 2006<br/>
Be advised that all text and images contained herein are<br/>
Copyright © 2004 Canyon Crest Academy Foundation<br/>
and cannot be used or altered without the written consent of the authors. </p>
</div>

</body>
</html>

Replace images and use it.

margin-xxxx:auto; is very important for centering. With specified Wdth, auto-margins will adjust screen position to do best center-fit job.

ok?

sootica

11-11-2006, 11:37 PM

Thank you very much for the help. It is very kind of you to help me. I'm sorry to have been so slow replying but I have the flu or something and haven't felt well enough to think about the site till today. I'll try this out later and see if I can get it to work.