Making a Div Layout - Part one
Making a web page can go right over your head if you are all new to it and even if you are not? Even little old me still runs around clueless sometimes when making a layout. Now I will say this is how I make a page, I’ve never been to college and never did html at school. Why do I say this here? I’m sure someone will say I’m wrong and so on. Well this is how I do it and it works and it’s valid in both HTML and CSS and this being the case I must be doing something right! If you think I can improve this tutorial let me know.
This will be a centered div layout.
Ok let’s start;
1. Make a folder and name it to whatever you want to call it? I will call mine div
2. Inside this folder make another folder and call it images.
3. Now I would say use Notepad for this or download HTML-KIT It’s free and you don’t get any hidden symbols like you do with Macromedia Dreamweaver or Microsoft Office SharePoint Designer 2007. If you want to use them; then do so, but still download HTML-KIT and open the web page and look for this  It will be right at the top and beginning of the file, you see it more in php files.
4. Open up Notepad or whatever txt editor you use and make two files. index.html and style.css if your Notepad file shows like this New Text Document then open the folder options; then view and un-tick “Hide extension for known file types” now your file will look like this New Text Document.txt just right click and rename file to index.html for one and style.css for the other. Place them both in the div folder or what you name it.
5. Make a header image width 800px - height 200px when done save it header.jpg and place it into the images folder you made, do the same for the footer image width 800px – height 50px save it has footer.jpg.
header.jpg click image to see full size.
footer.jpg click image to see full size.
6. Copy the all the code below and paste it into the index.html
<!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=utf-8" />
<title>Making a Div layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="page">
<div id="header">
Header content
</div><!--header close-->
<div id="topnavigation">
Top navigation links
</div><!--topnavigation close-->
<div id="wrap">
<div id="content">
Main content
</div><!--content close-->
<div id="navigation">
Navigation links
</div><!--navigation close-->
</div><!--wrap close-->
<div id="footer">
Footer content
</div><!--footer close-->
</div><!--page close-->
</body>
</html>
7. Copy all the code below and paste it into the style.css
body{
margin:0;
padding:0;
text-align:center;
}
#page{
margin:0 auto;
width:800px;
text-align:left;
}
#header{
height:200px;
}
#topnavigation{
padding:5px 5px 5px 0;
text-align:left;
}
#wrap{
padding:30px 0 30px 0;
text-align:justify;
}
#content{
float:left;
width:500px;
}
#navigation{
float:right;
width:250px;
}
#footer{
clear:both;
height:50px;
}
This is the end of part one, in part two we will cover the index.html, but here you can download the files and have a good look at them. I also want to cut it short here as the post is long and also to give you time to get the stuff I said above. I also would suggest that you download FireFox browser as well as using Internet explorer which you should already have if you are not using a Mac.
Download Div Layout - Part One (56)
Making a Div Layout - Part two
Making a Div Layout - Part three
Making a Div Layout - Part four
Making a Div Layout - Part five
Tags: div, How to make a div layout, html, tutorials
