Centered Website With Fixed Width ...begginers lesson...

rvovk · August 1, 2005

This will be tutorial on how to make a simple website design with fixed width and center position. This is actually rather simple tutorial, but hopefully it will help others that are new in world of creating websites. Website will also contain header, content area and footer.

First we must do Wrapper. Wrapper is actually an area of fixed width and will be position into center, so that our page doesn't fall apart.

body{ 	width:100%;  margin:0px;   padding: 0px;   text-align:center; 	background:#FFFFFF;}

This is actually an IE5 hack were we did center align of everything that is inside of body. Meaning Wrapper will stay in center due the fact, that margin left and margin right AUTO doesn't aplly for IE5. So this problem is solved.

#Wrapper{  width:750px;   text-align:left;   min-width: 500px;   margin:0px auto 0px auto;  background:#FFFFFF;    }

This is code for Wrraper. We used fixed width, margin are set to AUTO left and AUTO right, which will keep your site centered in browsers like Firefox, Opera, IE6.., new browsers actually. Next things that will be defined are Header, Content and Footer.

#Header{  width:750px;	height:100px;  	background:#FFFFFF;	margin:0px;	padding:0px;}

In this section we have defined Header properties. Width and height, margins and background. No big fuss.

#Content{  width:750px;	background:#FFFFFF;	margin:0px;	padding:10px;}

We have defined Content area so that it has 10 pixels of padding at top, meaning that Text will not be touching any borders of Content and will look more compact.

#Footer{  width:766px;	height:25px;   	background:#FFFFFF;	margin:0px;	padding:0px;}

Here we have defined Footer, which is 750px of width and 25px of height. No padding, nor margin.

p.text{  font:11px/14px verdana, arial, serif;	color: #000000;	margin:0px;	padding:0px 10px 10px 10px;	text-align:justify;}

This next thing is p.class for text. With classes you can define different styles of text (you are formatting it). Notice the padding-bottom, left and right of 10px. That means you don't have to use paragraph breaker, you just start with new area of same p.class and will show up like you use command break. Padding left and right gives space on left and right side of content. Font is defined as 11px of height with 14px of spacing (around 2px between lines in same paragraph), color is black (#000000).

So here we will make a CSS file and HTML file which is gonna be linked to a CSS file. CSS file serves as graphical presentation of our website and HTML builds and renders our actual website.

Here is the code of HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ website with fixed width.</title><meta http-equiv="content-type" content="text/html;charset=windows-1250"/><style type="text/css" media="all">@import "layout12.css";</style></head><body><div id="Wrapper"><div id="Header"><p class="text">Header</p></div><!--Header--><div id="Content"><p class="text">Things in the future have changed dramatically. I bought Canon A40 in year 2002 and took several interesting pictures with it. Later I bought Sony DSC S-75 cause I liked its macro potencial. But I sold it quickly cause it had lot of noise in images and awful white balance. Just before end of year 2003 I bought myself second hand Canon G3 which I am still using. Canon G3 is very good prosumer camera with pleasant results.</p><p class="text">Things in the future have changed dramatically. I bought Canon A40 in year 2002 and took several interesting pictures with it. Later I bought Sony DSC S-75 cause I liked its macro potencial. But I sold it quickly cause it had lot of noise in images and awful white balance. Just before end of year 2003 I bought myself second hand Canon G3 which I am still using. Canon G3 is very good prosumer camera with pleasant results.</p><p class="text">Things in the future have changed dramatically. I bought Canon A40 in year 2002 and took several interesting pictures with it. Later I bought Sony DSC S-75 cause I liked its macro potencial. But I sold it quickly cause it had lot of noise in images and awful white balance. Just before end of year 2003 I bought myself second hand Canon G3 which I am still using. Canon G3 is very good prosumer camera with pleasant results.</p></div><!--Content--><div id="Footer"><p class="text">Footer</p></div><!--Footer--></div><!--Wrapper--></body></html>

Here is CSS file (name it layout12.css, cause HTML is linked to this name of CSS file, but you can change it to your needs, but prior change the name of link to CSS file in HTML file):

body{ 	width:100%;  margin:0px;   padding: 0px;   text-align:center; 	background:#FFFFFF;} #Wrapper{  width:750px;   text-align:left;   min-width: 500px;   margin:0px auto 0px auto;  background:#FFFFFF;    }    #Header{  width:750px;	height:100px;  	background:#B4A6A6;	margin:0px;	padding:0px;}#Content{  width:750px;	background:#D0C9C9;	margin:0px;	padding:10px 0px 0px 0px;}#Footer{  width:750px;	height:25px;   	background:#BB9999;	margin:0px;	padding:0px;}p.text{  font:11px/14px verdana, arial, serif;	color: #000000;	margin:0px;	padding:0px 10px 10px 10px;	text-align:justify;}

Notice: You can change your background colors or you can even change your colors into background images. All you need to do is to change code:

background:#code of color e.g. BB9999;

for Footer, into code:

background:url(images1/layout/content1.jpg) no-repeat;

where »images1/layout/content1.jpg« is relative path to your image for footer. You can do all of this for content, header and footer. NO-REPEAT means background is shown only once (for footer or header), whereas content can use command REPEAT-Y where backround is repeated vertically, command REPEAT-X will repeat background horizontally.

Working exaple of this tutorial is here.

CSS file is available here.

Any comments are welcome, maybe I have made some mistakes by myself, so that even I can learn out of this tutorial.

Best regards, hope you have enjoyed this tutorial,

Robert

Tyssen · August 1, 2005

Just a couple of points to make about some of your code:

You don't need to specify px (or anything else) if you're using a 0 value, e.g., margin: 0.

#Wrapper{

margin:0px auto 0px auto;

}

#Content{

padding:10px 0px 0px 0px;

}

You also don't need to specify the bottom and left properties of something if they're the same as top and right because B & L automatically inherit those properties. So instead of margin:0px auto 0px auto you can just type margin: 0 auto. In the case of padding:10px 0px 0px 0px, you'd type padding:10px 0 0: the L property takes its value from 0 specified for R, but because you want B to be 0 instead of 10, you have to specify that too.

Keep in mind that the order of properties goes clockwise: top, right, bottom and left.

rvovk · August 1, 2005

Cool, thanx mate. Now even I have learned some pointers. Especially about inherit thing. Never really bother myself with this option.And yes, I forgot to write, when writing margin, padding or other properties, it goes like this: top, right, bottom, left.

Sign In

Centered Website With Fixed Width ...begginers lesson...

Recommended Posts

rvovk 0

Share this post

Link to post

Share on other sites

Tyssen 0

Share this post

Link to post

Share on other sites

rvovk 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information