View Single Post

karinne · #3 (**permalink**) Sep 21st, 2007, 14:39

Oh dear ... there's A LOT of work to be done. Did you see it in IE6?

Nice to see that you are using CSS for the layout at least.

You don't have a full doctype. You're better off using a strict doctype anyways.

There's A LOT of unnecessary divs in there! Like all those c??? What's with that?

And

Code: Select all

#pageWrapper {

width : 754px;

margin : auto;

text-align : center;

}

#pageAlign {

text-align : left;

}

Why do you align the text to the center and then re-align it to the left?!

This is the code for a basic 2-column layout site

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
   
<html lang="en-CA">

<head>
	<title>Some title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
	<style type="text/css">
	html, body, div { margin: 0; padding: 0; }
	
	body {
		margin: 0 auto;
		width: 770px;
	}
	
	#branding, #container, #siteinfo {
		width: 770px;
	}
	
	#container {
		overflow: auto;
	}
	
	#menu {
		width: 200px;
		float: left;
		background-color: #900
	}
	
	#content {
		width: 560px;
		margin-left: 10px;
		float: right;
		background-color: #090;
	}
	
	#siteinfo {
		background-color: #009;
		color: #fff;
	}
	</style>
	
</head>

<body>

<div id="branding"><h1>some header stuff here</h1></div>

<div id="container">

	<div id="menu">menu here<br><br><br>all the way!</div>
	
	<div id="content">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis feugiat. Curabitur condimentum ligula imperdiet lectus. Sed justo. Suspendisse faucibus. Morbi sit amet diam. Phasellus egestas elit ac ante. Suspendisse sed tortor. Mauris vel nunc et risus pharetra elementum. Phasellus accumsan risus non arcu. Phasellus mollis eros id lorem. Sed nec felis. In eget diam fringilla risus accumsan malesuada. Cras urna neque, convallis quis, consequat sed, tristique at, metus. Nulla tincidunt, lacus in feugiat posuere, diam pede mattis nisi, vulputate feugiat massa justo et arcu. Integer pretium tellus et dui.</p>
		
		<p>Vivamus sit amet lectus. Sed lorem tellus, sagittis vel, volutpat eu, sodales at, tellus. Nunc quis ipsum et erat malesuada suscipit. Integer urna mi, feugiat et, lacinia eu, suscipit nec, nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam iaculis magna eget nunc. Curabitur aliquam vestibulum enim. Duis mattis varius leo. Vivamus vel turpis. Quisque lectus massa, euismod mattis, aliquam at, feugiat at, massa. Vivamus eget enim eget felis congue fringilla. Phasellus nec nibh eget lectus pretium ullamcorper.</p>
		
		<p>Nullam eleifend. Fusce sed nunc. Ut consequat. Etiam interdum massa. Nulla aliquam, dui quis mollis eleifend, est massa pretium justo, a porttitor pede tortor at velit. Morbi tellus sapien, condimentum eget, sollicitudin nec, faucibus pretium, velit. Morbi eu odio scelerisque metus porta venenatis. Aliquam erat volutpat. Curabitur convallis, tellus eget scelerisque euismod, metus ligula molestie elit, a varius risus nibh sit amet mi. Mauris erat est, fringilla sit amet, pellentesque eget, dapibus vel, augue. Aliquam justo quam, varius non, ornare sed, lobortis sed, ante. Morbi rutrum.</p>
	</div>

</div>

<div id="siteinfo">and some copyright bla bla here</div>

</body>
</html>