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.
CODE
body{
width:100%;
margin:0px;
padding: 0px;
text-align:center;
background:#FFFFFF;
}
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.
CODE
#Wrapper{
width:750px;
text-align:left;
min-width: 500px;
margin:0px auto 0px auto;
background:#FFFFFF;
}
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.
CODE
#Header{
width:750px;
height:100px;
background:#FFFFFF;
margin:0px;
padding:0px;
}
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.
CODE
#Content{
width:750px;
background:#FFFFFF;
margin:0px;
padding:10px;
}
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.
CODE
#Footer{
width:766px;
height:25px;
background:#FFFFFF;
margin:0px;
padding:0px;
}
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.
CODE
p.text{
font:11px/14px verdana, arial, serif;
color: #000000;
margin:0px;
padding:0px 10px 10px 10px;
text-align:justify;
}
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:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Centered 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>
<html>
<head>
<title>Centered 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):
CODE
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;
}
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:
CODE
background:#code of color e.g. BB9999;
for Footer, into code:
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
