Posted By

epco on 07/01/09


Tagged

div css html center footer 3 sticky raamwerk kolommen


Versions (?)

div raamwerk sticky footer center 3 kolommen


 / Published in: HTML
 

  1. /*CSS*/
  2. / RESET
  3. ******************************/
  4. html, body, div, span, applet, object, iframe, table, caption, tbody,
  5. tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp,
  6. small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p,
  7. blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd,
  8. ol, ul, li, fieldset, form, label, legend{
  9. vertical-align: baseline;
  10. font-family: inherit;
  11. font-weight: inherit;
  12. font-style: inherit;
  13. font-size: 100%;
  14. outline: 0;
  15. padding: 0;
  16. margin: 0;
  17. border: 0;}
  18.  
  19. body{line-height: 1;}
  20. ol, ul{list-style: none;}
  21. table{border-collapse: separate; border-spacing: 0;}
  22. caption, th, td{font-weight: normal; text-align: left;}
  23. a img, :link img, :visited img {border: none;}
  24. div#printheader{display: none;}
  25.  
  26. div.clear{
  27. clear: both;
  28. width: 100%;
  29. height: 1px;
  30. overflow: hidden;}
  31.  
  32.  
  33. /* sticky footer */
  34. * {margin:0;padding:0;}
  35.  
  36. /* must declare 0 margins on everything, also for main layout components use padding, not
  37. vertical margins (top and bottom) to add spacing, else those margins get added to total height
  38. and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
  39.  
  40. html, body {
  41. height:100%; /* gives layout 100% height */
  42. overflow:inherit; /* triggers 100% height in Opera 9.5 */
  43. }
  44. #wrapper {
  45. min-height:100%; /* gives layout 100% height */
  46. }
  47. * html #wrapper {
  48. height:100%; /* IE6 treats height as min-height */
  49. }
  50.  
  51. div#paddingWrapper{
  52.  
  53. float:left;
  54. display:inline;
  55. background-color:green;
  56. padding:10px 5px 0px 5px;
  57. *padding:10px 5px 40px 5px;}/* bottom padding clears the #footer in IE */
  58.  
  59. #footer {
  60. position:relative;
  61. clear:both;
  62. height:40px;
  63. margin:-40px auto 0; /* -80px sucks it back into the #wrapper */
  64. }
  65.  
  66. #wrapper {
  67. width:1000px; /* centered div must be given a width */
  68. margin:0 auto; /* centers #wrapper */
  69. }
  70. #footer {
  71. width:1000px; /* centered div must be given a width */
  72. margin:-40px auto 0; /* auto left/right centers it */
  73. }
  74.  
  75.  
  76. /* CLEAR FIX*/
  77. .clearfix:after {content: ".";
  78. display: block;
  79. height: 0;
  80. clear: both;
  81. visibility: hidden;}
  82. .clearfix {display: inline-block;}
  83. /* Hides from IE-mac \*/
  84. * html .clearfix { height: 1%;}
  85. .clearfix {display: block;}
  86. /* End hide from IE-mac */
  87.  
  88.  
  89. /* LAYOUT
  90. ******************************/
  91.  
  92.  
  93. div#header{
  94. z-index:2;
  95. background-color:red;
  96. width:990px;
  97. height:315px;}
  98.  
  99. div#logo{
  100. position:relative;
  101. float:left;
  102. z-index:3;
  103. background-color:yellow;
  104. top:0px;
  105. left:0;
  106. width:245px;
  107. height:135px;}
  108.  
  109. div#zoeken{
  110.  
  111. float:right;
  112. top:-67px;
  113. width:240px;
  114. height:30px;
  115. background-color:white;}
  116.  
  117. div#topmenu{
  118. positioin:relative;
  119. z-index:99;
  120. margin-top:20px;
  121. background-color:blue;
  122. width:990px;
  123. height:30px;}
  124.  
  125. div#leftcol{
  126. display: inline;
  127. z-index:4;
  128. width: 258px;
  129. float: left;
  130. background-color:black;}
  131.  
  132. div#middlecol{
  133. display: inline;
  134. float:left;
  135. width: 504px;
  136. background-color:#CCFF00;}
  137.  
  138. div#rightcol{
  139. display: inline;
  140. width: 228px;
  141. float: left;
  142. background-color:#FFCC33;}
  143.  
  144.  
  145.  
  146. /* TEKST
  147. ******************************/
  148. body{
  149. font: normal 10px/17px Verdana, Arial, sans-serif;
  150. color: #000;}
  151.  
  152. div#footer{
  153. font: normal 10px/17px Verdana, Arial, sans-serif;
  154. color: #666;}
  155.  
  156.  
  157. /* paragraaf */
  158. p{padding: 0 0 10px}
  159. div#homebox_1 p, div#homebox_2 p{padding: 0 10px 10px;}
  160. strong{color: #000; font-weight: bold;}
  161.  
  162.  
  163.  
  164.  
  165.  
  166. /* titels */
  167. h1, h2, h3{
  168. letter-spacing: -1px;
  169. margin: 0 0 10px;
  170. padding: 0;
  171. clear: both;}
  172.  
  173. h1{ font: normal 32px/32px Verdana, Arial, sans-serif;
  174. color: #fff;
  175. text-align: right;}
  176.  
  177. h2{ font: bold 20px/24px Verdana, Arial, sans-serif;
  178. color: #ffffff;}
  179.  
  180. h3{ font: normal 18px/22px Verdana, Arial, sans-serif;
  181. color: #ffffff;}
  182.  
  183. /* opsommingen */
  184.  
  185. /* links */
  186.  
  187.  
  188.  
  189. /* AFBEELDINGEN */
  190.  
  191.  
  192.  
  193. }
  194.  
  195.  
  196. /* MENU'S
  197. ******************************/
  198.  
  199. /* ELEMENTEN
  200. ******************************/
  201.  
  202.  
  203. /* tabel */
  204. table{}
  205. caption{}
  206. thead{}
  207. tfoot{}
  208. tbody{}
  209. th{}
  210. tr{}
  211. td{}
  212.  
  213. /* toggle */
  214.  
  215.  
  216.  
  217. /*sitemap*/
  218.  
  219.  
  220. /*HTML************************************/
  221.  
  222. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  223.  
  224.  
  225.  
  226. <title> test</title>
  227.  
  228. <link rel="stylesheet" type="text/css" href="stylesheet.css">
  229.  
  230. </head>
  231.  
  232.  
  233. <div id="wrapper" style="background-color:pink;">
  234.  
  235. <div id="paddingWrapper">
  236.  
  237. <div id="header">
  238. <div id="logo"></div><!--logo-->
  239. </div><!--header-->
  240.  
  241.  
  242.  
  243. <div id="topmenu">df</div><!--topmenu-->
  244.  
  245. <div id="leftcol">
  246. sdf<br /> sdf<br />
  247. </div><!-- leftcol-->
  248. <div id="middlecol">
  249. sdf<br /> sdf<br />
  250. </div><!--middlecol-->
  251.  
  252. <div id="rightcol">
  253.  
  254. </div><!--rightcol-->
  255.  
  256.  
  257.  
  258.  
  259.  
  260. </div><!--paddingWrapper-->
  261.  
  262. </div><!-- wrapper -->
  263.  
  264. <div id="footer" style="background-color:yellow;"></div><!-- #footer sits outside the #wrapper -->
  265.  
  266.  
  267.  
  268.  
  269.  
  270.  
  271.  
  272. </body>
  273. </html>

Report this snippet  

You need to login to post a comment.