View Thread: Standard Website Layouts

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Template</title>
<meta name="Keywords" content="key, words">
<meta name="Description" content="Description">
<meta name="Author" content="MaineWebworks http://mainewebworks.com">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
/* Global Style */
body{
margin:0;
padding:0;
font:100% Arial,sans-serif;
background:#f2f2f2;
color:#333;
}
p {
margin:0;
padding:5px;
font-size:95%;
line-height:1.3em;
text-align:left;
}
blockquote p {
margin:0;
padding:0;
font-size:85%;
font-style:italic;
color:#808080;
}
ul {
margin-top:0;
color:#000;
}
li {
line-height:1.4em;
}

/* Structure and minor style */
#wrap{
position:relative;
margin:0 auto;
padding:0;
width:765px;
border:0;
background:#fff;
color:#333;
}
#top {
margin:0;
padding:0;
width:100%;
height:120px;
background:#fff;
border:1px dotted #808080;
color:#000;
}
#logo {
margin:0;
padding:0;
background:transparent url(your_logo.jpg) no-repeat top left;
width:270px;
height:100px;
color:inherit;
}
#top h1 {
margin:-50px 0 0 290px;
padding:0;
font-size:120%;
}
#main {
margin:0;
padding:0 15px;
width:500px;
float:right;
border:1px solid #333;
background:#fff;
color:#333;
}
#main h1{
margin:5px 0 0 0;
padding:0;
text-align:center;
font-size:105%;
}
#main h2{
margin:10px 0 0 5px;
padding:0;
font-size:95%;
}
#left {
margin:0;
padding:0 15px;
width:200px;
float:left;
background-color:#DADADA;
color:inherit;
}
#left ul {
margin-left:10px;
padding:0;
}
#left li {
list-style-type:none;
}
#bot {
margin:0;
padding:20px 0 0 0;
clear:both;
height:50px;
font-size: 70%;
background:#808080;
}
#bot p{
text-align:center;
}
.divider {
padding:10px;
text-align:center;
}
</style>



</head>

<body>
<div id="wrap">

<div id="top">
<div id="logo"> [add your logo here]</div>
<h1>Company Name or Tag Line</h1>
</div>



<div id="main">
<h1>HEADER 1 TEXT - TOPIC 1 INTRO</h1>
<p>The beautiful thing about this 2 column layout is the left navigation. It is the last container block before the footer, yet it floats to the top left of the page. THe css is plain jane. Normally, it would contain background images, and pretty mark-up for the text. Also, it should be linked from an external file. For example: link < rel="stylesheet" type="text/css" href="style.css" ></p>
<h2>Header 2 Text - Sub Topic</h2>
<p>This is an important technique because it creates a more search engine friendly page. SE's will index the test content in the main div before crawling the left side links.</p>
<p><strong>The Benefits</strong> —</p>
<ul>
<li>No css hacks</li>
<li>no IE conditional statements</li>
<li>validates 4.01 strict</li>
</ul>
<p><strong><em>Look Ma! No tag soup!</em></strong></p>

<div class="divider">? ? ?</div>

<h1>HEADER 1 TEXT - TOPIC 2 INTRO</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sagittis, leo a adipiscing tincidunt, massa erat ultrices lorem, non nonummy lorem risus ac orci.</p>
<blockquote><p>Here is a blockquote. Here is a blockquote. Filler text for the purpose of filing a blockquote container.</p></blockquote>
<p>Filler text Filler text Filler text</p>
</div>



<div id="left">
<p><b>plain ul vanilla menu</b></p>
<ul>
<li><a href="#nogo" title="">Link</a></li>
<li><a href="#nogo" title="">Link</a>
<ul>
<li>–> <a href="#nogo" title="">nested links</a></li>
<li>–> <a href="#nogo" title="">nested links</a></li>
</ul>
</li>
<li><a href="#nogo" title="">Link</a></li>
<li><a href="#nogo" title="">Link</a></li>
</ul>
</div>



<div id="bot">
<p>Copyright © 2006 Your Name. All rights reserved.</p>
<p><a href="http://mainewebworks.com" title="maine web development">Design & Development by MaineWebworks</a></p>
</div>


</div>

</body>
</html>