Advanced Search

Return to Snippet

Revision: 15332
at July 1, 2009 04:17 by epco
Initial Code 
/*CSS*/
/  RESET
******************************/
html, body, div, span, applet, object, iframe, table, caption, tbody,
tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend{
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;}

body{line-height: 1;}
ol, ul{list-style: none;}
table{border-collapse: separate; border-spacing: 0;}
caption, th, td{font-weight: normal; text-align: left;}
a img, :link img, :visited img {border: none;}
div#printheader{display: none;}

div.clear{
	clear: both;
	width: 100%;
	height: 1px;
	overflow: hidden;}


/* sticky footer */
* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
height:100%; /* gives layout 100% height */
overflow:inherit; /* triggers 100% height in Opera 9.5 */
}
#wrapper {
min-height:100%; /* gives layout 100% height */
}
* html #wrapper { 
height:100%; /* IE6 treats height as min-height */
}

div#paddingWrapper{

float:left;
display:inline;
background-color:green;
padding:10px 5px 0px 5px;
*padding:10px 5px 40px 5px;}/* bottom padding clears the #footer in IE */

#footer {
position:relative;
clear:both;
height:40px;
margin:-40px auto 0; /* -80px sucks it back into the #wrapper */
}

#wrapper {
width:1000px; /* centered div must be given a width */
margin:0 auto; /* centers #wrapper */
}
#footer {
width:1000px; /* centered div must be given a width */
margin:-40px auto 0; /* auto left/right centers it */
}


/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* LAYOUT
******************************/

	
div#header{
	z-index:2;
	background-color:red;
	width:990px;
	height:315px;}
	
div#logo{
	position:relative;
	float:left;
	z-index:3;
	background-color:yellow;
	top:0px;
	left:0;
	width:245px;
	height:135px;}
	
div#zoeken{
	
	float:right;
	top:-67px;
	width:240px;
	height:30px;
	background-color:white;}
	
div#topmenu{
	positioin:relative;
	z-index:99;
	margin-top:20px;
	background-color:blue;
	width:990px;
	height:30px;}

div#leftcol{
	display: inline;
	z-index:4;
	width: 258px;
	float: left;
	background-color:black;}	

div#middlecol{
	display: inline;
	float:left;
	width: 504px;
	background-color:#CCFF00;}
	
div#rightcol{
	display: inline;
	width: 228px;
	float: left;
	background-color:#FFCC33;}	
	


/* TEKST
******************************/
body{
	font: normal 10px/17px Verdana, Arial, sans-serif;
	color: #000;}

div#footer{
	font: normal 10px/17px Verdana, Arial, sans-serif;
	color: #666;}


/* paragraaf */
p{padding: 0 0 10px}
div#homebox_1 p, div#homebox_2 p{padding: 0 10px 10px;}
strong{color: #000; font-weight: bold;}





/* titels */
h1, h2, h3{
	letter-spacing: -1px;
	margin: 0 0 10px;
	padding: 0;
	clear: both;}

h1{	font: normal 32px/32px Verdana, Arial, sans-serif;
	color: #fff;
	text-align: right;}

h2{	font: bold 20px/24px Verdana, Arial, sans-serif;
	color: #ffffff;}

h3{	font: normal 18px/22px Verdana, Arial, sans-serif;
	color: #ffffff;}

/* opsommingen */

/* links */



/* AFBEELDINGEN */

	

}


/* MENU'S
******************************/

/* ELEMENTEN
******************************/


/* tabel */
table{}
caption{}
thead{}
tfoot{}
tbody{}
th{}
tr{}
td{}

/* toggle */



/*sitemap*/


/*HTML************************************/

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

<html>
<head>


<title> test</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>
<body>


<div id="wrapper" style="background-color:pink;">

 <div id="paddingWrapper">
 
  <div id="header">
   <div id="logo"></div><!--logo-->
  </div><!--header-->



  <div id="topmenu">df</div><!--topmenu-->
 
   <div id="leftcol">
   sdf<br />	sdf<br />
   </div><!-- leftcol-->
      <div id="middlecol">
      sdf<br />	sdf<br />	
      </div><!--middlecol-->
   
   <div id="rightcol">
   
   </div><!--rightcol--> 
   

 
 

</div><!--paddingWrapper-->

</div><!-- wrapper -->

<div id="footer" style="background-color:yellow;"></div><!-- #footer sits outside the #wrapper -->







</body>
</html>
Initial URL 









Initial Description














Initial Title





div raamwerk sticky footer center 3 kolommen









Initial Tags





css, html, center, 3









Initial Language





HTML