Css Snippets » layout

Template download: Shape

Mark — Sun, 20 Dec 2009 07:19:18 +0000

Download een professionele W3C gevalideerde XHTML/CSS template genoemd Shape.

Download

Preview/Voorbeeld (.jpg) (282)
PSD + (X)HTML/CSS (.zip) (101)

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

5 handige clear float tips

Mark — Mon, 23 Nov 2009 06:10:59 +0000

Floats moeten altijd gecleard worden als je geen onvoorziene omstandigheden wilt hebben in je layout, hier zijn 5 handige manieren om dit te doen:

Tip 1

HTML


	
		big floating contents
	
	Main Content

CSS

#outer {
overflow: auto;
height: 1%; /* for IE6 */
}

Tip 2

HTML


	This text won't extend past the bottom of the "clearfix" div.

CSS

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE5/Mac \*/
* html .clearfix {
height: 1px;
}
.clearfix {
display: block;
}
/* End hide from IE5/Mac */

Tip 3

HTML

CSS

div.spacer {
clear: both;
}

Tip 4

HTML

CSS

br {
clear: both;
height:0;
font-size: 1px;
line-height: 0;
}

Tip 5

HTML


	
	This text won't extend past the bottom of the "newBFC" div.

CSS

.newBFC {
overflow: hidden;
_overflow: visible; /* not valid */
_overflow-x:hidden; /* not valid */
_height: 0; /* not valid */
}
/*\*//*/
.newBFC {display: inline-block;}
/**/

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

4 kolommen fixed layout

Mark — Thu, 05 Nov 2009 06:39:14 +0000

Template voor vaste 4 kolommen layout.

HTML

site title
fixed 4-column layout

Page Link 1
Page Link 2
Page Link 3
Page Link 4
Page Link 5

column 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Vertical Nav Page Link 1
Vertical Nav Page Link 2
Vertical Nav Page Link 3
Vertical Nav Page Link 4
Vertical Nav Page Link 5

Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum.

column 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.
heading h2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.
heading h3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.
heading h4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.

Bullet List Item
Bullet List Item
Bullet List Item

Bullet List Item
Bullet List Item

Numbered List Item
Numbered List Item
Numbered List Item

Numbered List Item
Numbered List Item

column 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Bullet List Item
Bullet List Item
Bullet List Item

Bullet List Item
Bullet List Item

column 4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Bullet List Item
Bullet List Item
Bullet List Item

Bullet List Item
Bullet List Item

CSS

body {
margin:10px;
padding:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
line-height:18px;
color:#000000;
}
p {
margin:4px 0 6px 0;
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
h1, h2, h3, h4 {
font-weight:bold;
margin:10px 0 0 0;
}
h1 {
font-size:26px;
}
h2 {
font-size:23px;
}
h3 {
font-size:20px;
}
h4 {
font-size:17px;
}
a:link, a:visited {
color:#c00;
text-decoration:underline;
}
a:hover, a:active {
color:#999;
text-decoration:none;
}

ul {
margin:5px 0 5px 20px;
padding:0;
list-style-type:disc;
}

ol {
margin:5px 0 5px 30px;
padding:0;
list-style-type:decimal;
}

ul li, ol li {
margin:0 0 4px 0;
padding:0;
}
#mainContainer {
margin:0 auto;
padding:0;
width:900px;
border:1px dashed #454545;
}
#header {
margin:0;
padding:5px;
width:890px;
height:90px;
color:#fff;
background-color:#000;
}
#navHorizontal {
margin:0;
padding:0;
width:900px;
height:30px;
line-height:30px;
background-color:#454545;
}
#navHorizontal ul {
margin:0 0 0 5px;
padding:0;
list-style:none;
}
#navHorizontal ul li {
margin:0 0 0 -5px;
padding:5px 0 5px 0;
list-style:none;
display:inline;
}
#navHorizontal ul li a:link, #navHorizontal ul li a:visited {
padding:5px 8px 5px 8px;
color:#eeeeee;
text-decoration:none;
border-right:1px solid #999;
}
#navHorizontal ul li a:hover, #navHorizontal ul li a:active {
color:#454545;
text-decoration:none;
background-color:#ccc;
}
#columnOne {
float:left;
margin:0;
padding:0 5px 10px 5px;
width:190px;
background-color:#ccc;
}
#columnOne p, #columnThree p, #columnFour p, #columnOne ul li, #columnOne ol li, #columnThree ul li, #columnThree ol li, #columnFour ul li, #columnFour ol li {
font-size:13px;
}
#columnOne h2, #columnThree h2, #columnFour h2 {
font-size:16px;
}
#navVertical {
margin:0 -5px 0 -5px;
padding:0;
width:200px;
background-color:#454545;
}
#navVertical ul {
margin:0 0 0 5px;
padding:0;
list-style:none;
}
#navVertical ul li {
margin:0 0 0 -5px;
padding:0;
list-style:none;
border-bottom:1px solid #999;
}
#navVertical ul li a:link, #navVertical ul li a:visited {
padding:5px 8px 5px 8px;
color:#eee;
text-decoration:none;
display:block;
}
#navVertical ul li a:hover, #navVertical ul li a:active {
color:#454545;
text-decoration:none;
background-color:#eee;
}
/* << ---// Middle column Left //--->> */
#columnTwo {
float:left;
margin:0;
padding:0 10px 10px 5px;
width:365px;
background-color:#eeeeee;
}
/* << ---// Middle column Right //--->> */
#columnThree {
float:left;
margin:0;
padding:0 5px 10px 5px;
width:150px;
background-color:#e4e4e4;
}
/* << ----// Right column //--->> */
#columnFour {
float:left;
margin:0;
padding:0 5px 10px 5px;
width:150px;
background-color:#ccc;
}
/* << ---// Footer //--->> */
#footer {
margin:0;
padding:5px 5px 5px 10px;
width:885px;
height:20px;
font-size:10px;
color:#ccc;
background-color:#000;
clear:both;
}
#footer a:link, #footer a:visited {
color:#999;
text-decoration:none;
}
#footer a:hover, #footer a:active {
color:#fff;
text-decoration:underline;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

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;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

3 kolommen fixed layout

Mark — Tue, 08 Sep 2009 08:47:49 +0000

Template voor vaste 3 kolommen layout.

HTML

site title
fixed 3-column layout

Page Link 1
Page Link 2
Page Link 3
Page Link 4
Page Link 5

column 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Vertical Nav Page Link 1
Vertical Nav Page Link 2
Vertical Nav Page Link 3
Vertical Nav Page Link 4
Vertical Nav Page Link 5

Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum.

Bullet List Item
Bullet List Item
Bullet List Item

Bullet List Item
Bullet List Item

Numbered List Item
Numbered List Item
Numbered List Item

Numbered List Item
Numbered List Item

column 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Bullet List Item
Bullet List Item
Bullet List Item

Bullet List Item
Bullet List Item

CSS

body {
margin:10px;
padding:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
line-height:18px;
color:#000;
}
p {
margin:4px 0 6px 0;
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
h1, h2, h3, h4 {
font-weight:bold;
margin:10px 0 0 0;
}
h1 {
font-size:26px;
}
h2 {
font-size:23px;
}
h3 {
font-size:20px;
}
h4 {
font-size:17px;
}
a:link, a:visited {
color:#c00;
text-decoration:underline;
}
a:hover, a:active {
color:#999;
text-decoration:none;
}
ul {
margin:5px 0 5px 20px;
padding:0;
list-style-type:disc;
}
ol {
margin:5px 0 5px 30px;
padding:0;
list-style-type:decimal;
}
ul li, ol li {
margin:0 0 4px 0;
padding:0;
}
#mainContainer {
margin:0 auto;
padding:0;
width:900px;
border:1px dashed #454545;
}
#header {
margin:0;
padding:5px;
width:890px;
height:90px;
color:#fff;
background-color:#000;
}
#navHorizontal {
margin:0;
padding:0;
width:900;
height:30px;
line-height:30px;
background-color:#454545;
}
#navHorizontal ul {
margin:0 0 0 5px;
padding:0;
list-style:none;
}
#navHorizontal ul li {
margin:0 0 0 -5px;
padding:5px 0 5px 0;
list-style:none;
display:inline;
}
#navHorizontal ul li a:link, #navHorizontal ul li a:visited {
padding:5px 8px 5px 8px;
color:#eee;
text-decoration:none;
border-right:1px solid #999;
}
#navHorizontal ul li a:hover, #navHorizontal ul li a:active {
color:#454545;
text-decoration:none;
background-color:#ccc;
}
#columnOne {
float:left;
margin:0;
padding:0 5px 10px 5px;
width:190px;
background-color:#ccc;
}
#columnOne p, #columnThree p, #columnOne ul li, #columnOne ol li, #columnThree ul li, #columnThree ol li {
font-size:13px;
}
#columnOne h2, #columnThree h2 {
font-size:16px;
}
#navVertical {
margin:0 -5px 0 -5px;
padding:0;
width:200px;
background-color:#454545;
}
#navVertical ul {
margin:0 0 0 5px;
padding:0;
list-style:none;
}
#navVertical ul li {
margin:0 0 0 -5px;
padding:0;
list-style:none;
border-bottom:1px solid #999;
}
#navVertical ul li a:link, #navVertical ul li a:visited {
padding:5px 8px 5px 8px;
color:#eeeeee;
text-decoration:none;
display:block;
}
#navVertical ul li a:hover, #navVertical ul li a:active {
color:#454545;
text-decoration:none;
background-color:#eee;
}
#columnTwo {
float:left;
margin:0;
padding:0 5px 10px 5px;
width:490px;
background-color:#eee;
}
#columnThree {
float:left;
margin:0;
padding:0 5px 10px 5px;
width:190px;
background-color:#ccc;
}
#footer {
margin:0;
padding:5px 5px 5px 10px;
width:885px;
height:20px;
font-size:10px;
color:#ccc;
background-color:#000;
clear:both;
}
#footer a:link, #footer a:visited {
color:#999;
text-decoration:none;
}
#footer a:hover, #footer a:active {
color:#fff;
text-decoration:underline;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

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;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

3 en 4 kolommen layout

Mark — Sat, 11 Jul 2009 10:52:33 +0000

Template voor een mengeling van 3 en 4 kolommen layout.

HTML

Links ›› Site Map ›› Contact ››

Home
About
Gallery
Contact

site title
fixed 3-column over 4-column layout

centerColumn
sub heading
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.

cell_1
Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.

Link

Date

Puerorum amicas adplicat auris.

Link

Date

Puerorum amicas adplicat auris.

cell_2
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.

cell_3
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.

box_1
Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.

Link…

box_2
Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.

Link…

box_3
Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.

Link…

box_4
Quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.

Link…

CSS

body {
margin:.5em;
padding:0;
height:100%;
background-color:#fff;
color:#000;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
}

a {
color:#c00;
text-decoration:underline;
}

a:hover {
color:#616161;
text-decoration:none;
}

blockquote {
margin:1em;
padding:.5em .5em .5em 85px;
background-color:#D7ECF8;
}

blockquote p {
margin:.2em;
color:#000;
}

hr {
margin-bottom:20px;
border:none;
width:99%;
color:#eee;
background-color:#eee;
height:1px;
clear:both;
}

td.desc {
padding:4px;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.7em;
}

#postHeader {
margin:0 auto;
padding:0 .2em .3em .2em;
width:720px;
text-align:right;
vertical-align: middle;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.7em;
text-transform:uppercase;
}

#centerColumn {
margin:0 auto;
padding:1em;
width:720px;
text-align:left;
vertical-align: middle;
background-color:#fff;
}

#centerColumn h2 {
margin:0 0 -.5em 0;
padding:.75em 0 0 0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.1em;
}

#centerColumn h3 {
margin:0 0 -.5em 0;
padding:.75em 0 0 0;
font-size:.8em;
font-weight:lighter;
letter-spacing:.1em;
}

#navbar {
margin:-1em -1em 0 -1em; /* Mozzila attributes */
padding:1em 0 1em 0 !important; /* IE specific attributes */
padding:1em 0 0 0;
background-color:#ccc;
}

#navbar ul {
margin:0 0 -1em .3em !important;
margin:.3em 0 0 .3em;
padding:0 0 1em 0;
list-style:none;
background-color:#ccc;
}

#navbar li {
margin:0 0 0 -.27em;
padding:.2em 0 .2em 0 !important;
padding:1em 0 1em 0;
list-style:none;
display:inline;
background-color:#ccc;
}

#navbar li a {
margin:0 0 0 0;
padding:1em .5em 1em .5em !important;
padding:1em .5em 0 .5em;
}

#header {
margin:0 -1em 0 -1em;
padding:0 0 0 0;
height:143px;
background-color:#ccc;
border-top:1px solid #fff;
}

#header h1 {
margin:0 0 -14px 10px;
padding:10px 0 0 .9em;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.7em;
font-weight:lighter;
letter-spacing:.15em;
color:#000;
}

#header h2 {
margin:0 0 0 0;
padding:1em 0 0 30px;
font-size:.9em;
font-weight:300;
letter-spacing:.1em;
color:#000;
}

#cell_1 {
margin:0 5px 1em 0;
padding:8px;
float:left;
width:210px;
background-color:#ccc;
}

#cell_2 {
margin:0 14px 1em 14px;
padding:8px;
float:left;
width:210px;
background-color:#ccc;
}

#cell_3 {
margin:0 0 1em 5px;
padding:8px;
float:left;
width:210px;
background-color:#ccc;
}

#cell_1 p, #cell_2 p, #cell_3 p {
font-size:.75em;
color:#000;
}

#cell_1 h2 {
margin:0 0 -4px 0 !important;
margin:0 0 -20px 0;
padding:4px 0 10px 0;
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
font-weight:bold;
}

#cell_2 h2 {
margin:0 0 -4px 0 !important;
margin:0 0 -20px 0;
padding:4px 0 10px 0;
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
font-weight:bold;
}

#cell_3 h2 {
margin:0 0 -4px 0 !important;
margin:0 0 -20px 0;
padding:4px 0 10px 0;
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
font-weight:bold;
}

.barepic {
border:none;
}

.right {
float:right;
margin:5px;
padding:2px;
}

.left {
float:left;
margin:5px;
padding:2px;
}

.center {
width:auto;
margin-left:auto;
margin-right:auto;
}

.news em {
font-size:.8em;
color:#000;
}

#cell_1 ul.news, #cell_2 ul.news, #cell_3 ul.news {
margin:0 0 0 5px;
padding:0 0 0 0;
list-style:none;
}

#cell_1 li.news, #cell_2 li.news, #cell_3 li.news {
margin:0 0 .3em 0;
padding:5px 0 6px 10px;
font-size:.75em;
}

#cell_1 ul, #cell_2 ul, #cell_3 ul {
margin:0 0 0 5px;
padding:0 0 0 0;
list-style:none;
}

#cell_1 li, #cell_2 li, #cell_3 li {
margin:0 0 .3em 0;
padding:5px 0 6px 5px;
font-size:.75em;
}

#box_1 {
margin:0 5px 2em 0;
padding:8px;
float:left;
width:150px;
background-color:#ccc;
}

#box_2 {
margin:0 7px 2em 14px;
padding:8px;
float:left;
width:150px;
background-color:#ccc;
}

#box_3 {
margin:0 14px 2em 7px;
padding:8px;
float:left;
width:150px;
background-color:#ccc;
}

#box_4 {
margin:0 0 2em 5px;
padding:8px;
float:left;
width:150px;
background-color:#cccccc;
}

#box_1 p, #box_2 p, #box_3 p, #box_4 p {
font-size:.75em;
color:#000;
}

#box_1 h2, #box_2 h2, #box_3 h2, #box_4 h2 {
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
font-size:.8em;
} 

#box_1 ul, #box_2 ul, #box_3 ul, #box_4 ul {
margin:0 0 0 5px;
padding:0 0 0 0;
list-style:none;
}

#box_1 li, #box_2 li, #box_3 li, #box_4 li {
margin:0 0 .3em 0;
padding:5px 0 0 5px;
font-size:.8em;
}

#footer {
position:relative;
clear:both;
bottom:0;
margin:5em 0 0 0;
padding:0;
height:4em;
line-height:4em;
text-align:center;
font-size:.7em;
background-color:#fff;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

1 kolom header sidebar content

Mark — Thu, 25 Jun 2009 08:29:24 +0000

Template voor 1 kolom header en sidebar en content.

HTML


	
	site title
	Fixed 1-column header and sidebar

	
	leftColumn
	
	Link Item
	Link Item
	Link Item
	
	Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari
    levat arte fessos corporis artus.
	

centerColumn
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.
download this template
Header 2
Link Item

List Item
List Item
List Item
	
	List Item
	List Item
	

blockquote

Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus.

	
	XHTML |
	CSS |
	WCAG |
	CSS Snippets

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;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Fixed header and 1-column template

Mark — Wed, 17 Jun 2009 09:18:37 +0000

1 kolom gecentreerde layout met header.

HTML









fixed header an 1-column layout (basic)



	
	site title
	fixed 1-column layout (basic)
	
	
	fauxRightColumn
	
	Link Item
	Link Item
	Link Item
	
	Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari
    levat arte fessos corporis artus.
	
centerColumn
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.
Header 2
Link Item

List Item
List Item
List Item
	
	List Item
	List Item
	

blockquote

Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus.
	
	XHTML |
	CSS |
	WCAG |
	CSS Snippets

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;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Fixed box template

Mark — Mon, 15 Jun 2009 07:00:36 +0000

1 kolom gecentreerde layout.

HTML








fixed box layout



	
	site title
	fixed box layout
	

	
	
	Home
	About
	Gallery
	Contact
	
	

centerColumn
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.
Header 2
Link Item
	
	List Item
	List Item
	List Item
		
		List Item
		List Item
		
	
	blockquote
Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus.
	
	XHTML | CSS | WCAG | CSS Snippets

CSS

body {
margin:3em;
padding:0;
height:100%;
background-color:#fff;
color:#000;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
}
a {
color:#c00;
text-decoration:underline;
}
a:hover {
color:#eee;
text-decoration:none;
}
blockquote {
margin:1em;
padding:.5em;
background-color:#eee;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
blockquote p {
margin:.2em;
}
#centerColumn {
margin:0 auto;
padding:1em;
width:38em;
text-align:left;
vertical-align: middle;
background-color:#ccc;
border:1px solid #999;
}
#centerColumn h2 {
margin:0 0 -.5em 0;
padding:.75em 0 0 0;
font-size:1em;
letter-spacing:.1em;
}
#header {
margin:-1em -1em 0 -1em;
padding:0 0 0 0;
height:5em;
background-color:#fff;
}
#header h1 {
margin:0 0 -.6em 0;
padding:.5em 0 0 1em;
font-size:1.5em;
letter-spacing:.1em;
}
#header h2 {
margin:0;
padding:1em 0 0 1.75em;
font-size:.9em;
font-weight:300;
letter-spacing:.1em;
}
#nav {
margin:0 0 1em 0;
padding:.4em 0 0 0;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
margin:0;
padding:.25em;
display:inline;
}
#footer {
position:relative;
bottom:0;
margin:5em 0 0 0;
padding:0;
height:4em;
line-height:4em;
text-align:center;
font-size:.7em;
background-color:#ccc;
border-top:1px solid #999;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Puur en zuiver formulier template

Mark — Mon, 18 May 2009 11:00:11 +0000

Nog een eenvoudig formulier template, zo zuiver dat er alleen het nodige aan elementen inzit, want meer heb je niet nodig om een formulier er goed te laten uitzien.

HTML



Formulier
Eenvoudig en zuiver formulier
Naam
Geef uw naam


Email
Geef een valide adres


Paswoord
Min. 6 chars

CSS

body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- Mijn Formulier ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
border: none;
color:#FFF;
font-size:11px;
font-weight:bold;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Centreren van pagina

Mark — Sat, 16 May 2009 20:19:28 +0000

Om uw website in het midden te krijgen (centreren), is deze volgende CSS Snippet voldoende. Belangrijk is wel dat het element waarop je volgende code toepast daadwerkelijk dimensie heeft (zeker breedte).

HTML


tekst komt hier

CSS

#foo {
margin: 0 auto;
width: 800px;
border: 1px solid; /* ter illustratie */
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon