CSS Layout

There we are going to build a three-column layout in CSS and XHTML coding. If you have no knowledge about html, please read basic html tutorials you’ll find at Google ;).

Css layout

The final layout of this mini-guide is like the photo: header, at left, one menu, at right of the center, the content, that finalizes with the footer (the footer-position depends of the content; more content: footer more down).

First, we will code the body of the page in xhtml:



<div id="header">
<h1>Title</h1>
<h2>Subtitle</h2>
<div>

<div id="sidebar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>

<div id="main">
<h3>Content</h3>
<p>The real content of the page</p>
</div>

<div id="footer">
<p>Copyright & autor</p>
</div>

Well. Now, we are going to code the CSS file to make eye-candy our page, and distribute the divs.

Detail: I never use px or pt; oly % and em. Px and pt are absolute units, and if a 800×600 screen-user visits your page and you sized your header with 900px of width, he can’t visualize all the header in his screen.

In this mini-guide, i have wrote the minimal CSS code to explain the layout; you can extend it and make colorful your website later.


	body {
		background-color: #fff;
		text-align: center;
		margin: 0px;
		font: 10pt Arial, Helvetica, sans-serif;
	}

	#header {
		background-color: #4A708B;
		color: #fff;
		padding: 2px 15px 2px 15px;
		font-family: "Trebuchet MS", Times, serif;
	}
	
	#sidebar {
		width: 200px;
		padding: 10px;
		float: right;
		color:#555;
		background-color: #eee;
		text-align:left;
	}
	
	#main {
		padding:0;
		margin:0;
	}
	
	#footer {
		clear: both;
		background-color: #fff;
		color: #555;
		padding: 1px;
		text-align: center;
	}

You can see the example here.

Basic XHTML Structures

If you code xhtml pages with programs like Dreamweaver, the basic structure of a webpage is been coded automatically when the program starts a webpage. But, if you code manually I publish here some basic structures to help you and make fast this work.

Please, insert the correct content between the "" !

XHTML 1.1 - UTF-8 Encoding



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<title></title>

<link rel="stylesheet" type="text/css" href="" media="screen" />

</head>

<body>
<div id="section1"></div>


<div id="section2"></div>
</body>
</html>

XHTML 1.0 - UTF-8 Encoding


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<title></title>

<link rel="stylesheet" type="text/css" href="" media="screen" />

</head>

<body>
<div id="section1"></div>


<div id="section2"></div>
</body>
</html>

XHTML 1.0 - ISO-8859-1 Encoding (Spanish or special characters only)


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<title></title>

<link rel="stylesheet" type="text/css" href="" media="screen" />

</head>

<body>
<div id="section1"></div>


<div id="section2"></div>
</body>
</html>

Doctypes


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Validation Tools

The W3C Server: Jigsaw

Jigsaw is an Open Source W3C Project, started in 1996. It is written in Java and can run on Windows, MacOS, Solaris and Linux.
You can visit the W3C sites that are running under the Jigsaw server here.

If you are interested you can download the last version, 2.2.6;

W3c Logo

Links