17 Jun, 2009
Fixed header and 1-column template
Categoriën: box |centreren |crossbrowser |template |Xhtml Strict
1 kolom gecentreerde layout met header.
HTML
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Enter your description here" />
<meta name="keywords" content="keywords" />
<link rel="stylesheet" type="text/css" href="reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>fixed header an 1-column layout (basic)</title>
</head>
<body>
<div id="centerColumn">
<div id="header">
<h1>site title</h1>
<h2>fixed 1-column layout (basic)</h2>
</div>
<div id="fauxRightColumn">
<h2>fauxRightColumn</h2>
<ul id="nav">
<li><a href="#" title="link title">Link Item</a></li>
<li><a href="#" title="link title">Link Item</a></li>
<li><a href="#" title="link title">Link Item</a></li>
</ul>
<p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari
levat arte fessos corporis artus.</p>
</div>
<h2>centerColumn</h2>
<p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus, si Palatinas videt aequos aras remque Romanam Latiumque felix alterum in lustrum meliusque semper prorogat aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
<h2>Header 2</h2>
<p><a href="#" title="link title">Link Item</a></p>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item
<ul>
<li>List Item</li>
<li>List Item</li>
</ul></li>
</ul>
<blockquote><p><strong>blockquote</strong><br />
Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus.</p></blockquote>
<div id="footer">
<a href="http://validator.w3.org/" title="W3C HTML Validation">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/validator-uri.html" title="W3C CSS Validation">CSS</a> |
<a href="http://www.w3.org/TR/WCAG10/" title="Web Content Accessibility Guidelines">WCAG</a> |
<a href="http://www.csssnippets.be">CSS Snippets</a></p>
</div>
</div>
</body>
</html>
Reset CSS
CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
background-image: transparent;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Layout CSS
CSS
body {
margin:.5em;
padding:0;
height:100%;
background-color:#fff;
color:#000;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
a {
color:#c00;
text-decoration:underline;
}
a:hover {
color:#ccc;
text-decoration:none;
}
p {
margin:6px 0;
}
blockquote {
margin:16px;
padding:8px;
background-color:#eee;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
blockquote p {
margin:.2em;
}
ul {
list-style-type:disc;
}
li {
margin:0 0 0 25px;
list-style-type:disc;
}
#centerColumn {
margin:0 auto;
padding:1em;
width:600px;
text-align:left;
vertical-align: middle;
background-color:#fff;
border:1px solid #ccc;
}
#centerColumn h2 {
margin:0 0 0 0;
padding:6px 0;
font-size:1.2em;
letter-spacing:.1em;
}
#header {
margin:0 0 0 0;
padding:0 0 0 0;
height:160px;
background-color:#fff;
border:1px solid #ccc;
}
#header h1 {
margin:0 0 -8px 0;
padding:16px 0 0 24px;
font-size:1.7em;
letter-spacing:.1em;
}
#header h2 {
margin:0 0 0 0;
padding:16px 0 0 24px;
font-size:.9em;
font-weight:lighter;
letter-spacing:.1em;
}
#fauxRightColumn {
position:relative;
float:right;
margin:.5em 0 0 .5em;
padding:0 .7em .25em .7em;
width:11em;
font-size:.9em;
background-color:#fff;
border:1px solid #ccc;
}
#fauxRightColumn h2 {
font-size:.9em;
}
#nav ul {
margin:0;
list-style:none;
}
#nav li {
margin:0 0 8px 0;
list-style:none;
}
#nav li a {
text-decoration:underline;
}
#nav li a:hover{
text-decoration:none;
}
#footer {
position:relative;
bottom:0;
margin:80px 0 0 0;
padding:0;
height:64px;
line-height:64px;
text-align:center;
font-size:.7em;
background-color:#fff;
border-top:1px solid #ccc;
}