25 Jun, 2009

1 kolom header sidebar content

Categoriën: box |centreren |crossbrowser |template |Xhtml Strict

Template voor 1 kolom header en sidebar en content.

thumb-css-fx-1c2

HTML

<div id="container">
	<div id="header">
	<h1>site title</h1>
	<h2>Fixed 1-column header and sidebar</h2>
</div>
	<div id="leftColumn">
	<h2>leftColumn</h2>
	<ul>
	<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>
<div id="centerColumn">
<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 auri.</p>
<p><a class="small" href="fixed-1c2.zip" title="Download">download this template</a></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>
	<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>

Reset 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;
}
:focus {
outline: 0;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
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

body {
margin:20px;
padding:0;
height:100%;
background-color:#fff;
color:#000;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
}
a {
color:#c00;
text-decoration:underline;
}
a:hover {
color:#ccc;
text-decoration:none;
}
ul {
margin:0 0 0 20px;
list-style-type:disc;
}
li {
margin:4px 0 5px 10px;
}
blockquote {
margin:1em;
padding:.5em;
background-color:#eee;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
blockquote p {
margin:.2em;
}
#container {
margin:0 auto;
padding:0;
width:650px;
text-align:left;
vertical-align: middle;
background-color:#fff;
border:1px solid #ccc;
}
#header {
margin:0;
padding:0;
height:160px;
background-color:#2c2c2c;
}
#header h1 {
margin:0;
padding:20px 0 0 20px;
font-size:1.8em;
letter-spacing:.1em;
color:#fff;
font-weight:lighter;
}
#header h2 {
margin:0;
padding:0 0 0 20px;
font-size:.9em;
font-weight:lighter;
letter-spacing:.1em;
color:#eee;
}
#leftColumn {
float:left;
margin:0;
padding:0;
width:160px;
font-size:.9em;
}
#leftColumn p {
padding:10px
}
#leftColumn h2 {
margin:0;
padding:10px 0 0 10px;
font-size:1em;
}
#leftColumn ul {
margin:0 0 0 0;
list-style:none;
}
#leftColumn li {
margin:4px 0 5px 10px;
}
#leftColumn li a {
text-decoration:underline;
}
#leftColumn li a:hover{
text-decoration:none;
}
#centerColumn {
margin:0 0 0 180px;
padding:0;
background-color:#fff;
}
#centerColumn p {
padding:10px
}
#centerColumn h2 {
margin:0;
padding:10px 0 5px 0;
font-size:1.3em;
letter-spacing:.1em;
}
#footer {
position:relative;
bottom:0;
margin:80px 0 0 0;
padding:0;
height:60px;
line-height:60px;
text-align:center;
font-size:.6em;
background-color:#fff;
border-top:1px solid #ccc;
}

Gerelateerde Snippets

5 Reacties op "1 kolom header sidebar content"

Maarten

June 25th, 2009 at 14:43

1

Ik geloof dat tussen lijn 50 en 51 nog een div moet afgesloten worden.

Mark

June 26th, 2009 at 21:46

2

ik denk het niet, alles lijkt afgesloten

Piet

August 26th, 2009 at 20:58

3

de container heeft geen sluit div

Mark

August 31st, 2009 at 23:31

4

op regel 50 staat de sluitende div, er zijn 4 divs in totaal en ze worden allemaal afgesloten

Sjors Thielen

November 16th, 2009 at 11:44

5

Je moet inderdaad de div van de header afsluiten.
Deze ontbreekt.

Reactie formulier


Demo: 1 kolom header sidebar content:

Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.