Posted By

morvan on 11/11/09


Tagged

template html xhtml simple


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

createinside


Very simple XHTML template


 / Published in: XHTML
 

  1. /* style.css */
  2.  
  3. /* ########## STANDARD HTML ELEMENTS ########## */
  4.  
  5. BODY{
  6. font-family: Gill sans, verdana, sans-serif;
  7. font-size: 16px;
  8. color: #333;
  9. padding: 5%;
  10. width: 90%;
  11. height: 90%;
  12. }
  13.  
  14. P{ margin: 0 0 10px 0; }
  15.  
  16. H1{
  17. font-size: 2em;
  18. margin: 0 0 20px 0;
  19. }
  20.  
  21. H2{
  22. font-size: 1.5em;
  23. margin: 0 0 10px 0;
  24. }
  25.  
  26. H3{
  27. font-weight: bold;
  28. margin: 0 0 10px 0;
  29. }
  30.  
  31. STRONG{ font-weight: bold; }
  32.  
  33. EM{ font-style:italic }
  34.  
  35. A:link, A:visited, A:active { font-size: inherit; color: #666699; }
  36. A:hover { color: #669999; }
  37.  
  38. INPUT.inp, TEXTAREA.inp{
  39. border: 1px solid #999;
  40. padding: 4px;
  41. width: 200px;
  42. margin: 0 0 10px 0;
  43. }
  44.  
  45. /* ########## MAIN DIV ELEMENTS ########## */
  46.  
  47. DIV#wrapper{
  48. overflow: hidden; /* clear floats */
  49. }
  50.  
  51. DIV#header{
  52. float: left; display:inline;
  53. width: 100%;
  54. }
  55.  
  56. DIV#content{
  57. float: left; display: inline;
  58. width: 100%;
  59. }
  60.  
  61. /* index.php */
  62.  
  63. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  64. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  65. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  66. <link rel="stylesheet" href="reset.css" type="text/css" />
  67. <link rel="stylesheet" href="style.css" type="text/css" />
  68. </head>
  69.  
  70. <div id="wrapper">
  71.  
  72. <div id="header">
  73.  
  74. <img src="logo.jpg" alt="logo" />
  75.  
  76. </div><!-- END header -->
  77.  
  78. <div id="content">
  79. <h1>Header</h1>
  80. <p>Lorem ipsum...</p>
  81. </div><!-- END content -->
  82.  
  83. </div><!-- END wrapper -->
  84.  
  85. </body>
  86. </html>

Report this snippet  

You need to login to post a comment.