STARTERKIT/css/layout-fixed.css

   1 /* $Id$ */
   2
   3 /**
   4  * @file
   5  * Layout Styling (DIV Positioning)
   6  *
   7  * Define CSS classes to create a table-free, 3-column, 2-column, or single
   8  * column layout depending on whether blocks are enabled in the left or right
   9  * columns.
  10  *
  11  * This layout is based on the Zen Columns layout method.
  12  *   http://drupal.org/node/201428
  13  *
  14  * Only CSS that affects the layout (positioning) of major elements should be
  15  * listed here.  Such as:
  16  *   display, position, float, clear, width, height, min-width, min-height
  17  *   margin, border, padding, overflow
  18  */
  19
  20
  21 /*
  22  * Body
  23  */
  24 body {
  25 }
  26
  27 #page-wrapper,
  28 #closure-blocks {
  29   /*
  30    * If you want to make the page a fixed width and centered in the viewport,
  31    * this is the standards-compliant way to do that. See also the ie6.css file
  32    * for the necessary IE5/IE6quirks hack to center a div.
  33    */
  34   margin-left: auto;
  35   margin-right: auto;
  36   width: 960px;
  37 }
  38
  39 #page {
  40 }
  41
  42 /*
  43  * Header
  44  */
  45 #header {
  46 }
  47
  48 #header .section {
  49 }
  50
  51 #search-box {
  52 }
  53
  54 .region-header {
  55   clear: both; /* Clear the logo */
  56 }
  57
  58 /*
  59  * Main (container for everything else)
  60  */
  61 #main-wrapper {
  62   position: relative;
  63 }
  64
  65 #main {
  66 }
  67
  68 /*
  69  * Content
  70  */
  71 #content,
  72 .no-sidebars #content {
  73   float: left; /* LTR */
  74   width: 960px;
  75   margin-left: 0; /* LTR */
  76   margin-right: -960px; /* LTR */ /* Negative value of #content's width + left margin. */
  77   padding: 0; /* DO NOT CHANGE. Add padding or margin to #content-inner. */
  78 }
  79
  80 .sidebar-first #content {
  81   width: 760px;
  82   margin-left: 200px; /* LTR */ /* The width of #sidebar-first. */
  83   margin-right: -960px; /* LTR */ /* Negative value of #content's width + left margin. */
  84 }
  85
  86 .sidebar-second #content {
  87   width: 760px;
  88   margin-left: 0; /* LTR */
  89   margin-right: -760px; /* LTR */ /* Negative value of #content's width + left margin. */
  90 }
  91
  92 .two-sidebars #content {
  93   width: 560px;
  94   margin-left: 200px; /* LTR */ /* The width of #sidebar-first */
  95   margin-right: -760px; /* LTR */ /* Negative value of #content's width + left margin. */
  96 }
  97
  98 #content-inner {
  99   margin: 0;
 100   padding: 0;
 101 }
 102
 103 /*
 104  * Navbar
 105  */
 106 #navbar {
 107   float: left; /* LTR */
 108   width: 100%;
 109   margin-left: 0; /* LTR */
 110   margin-right: -100%; /* LTR */ /* Negative value of #navbar's width + left margin. */
 111   padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-navbar. */
 112   height: 2.3em; /* The navbar can have any arbritrary height. We picked one
 113                     that is the line-height plus 1em: 1.3 + 1 = 2.3
 114                     Set this to the same value as the margin-top below. */
 115 }
 116
 117 .with-navbar #content,
 118 .with-navbar #sidebar-first,
 119 .with-navbar #sidebar-second {
 120   margin-top: 2.3em; /* Set this to the same value as the navbar height above. */
 121 }
 122
 123 .region-navbar {
 124 }
 125
 126 #navbar ul /* Primary and secondary links */ {
 127   margin: 0;
 128   padding: 0;
 129   text-align: left; /* LTR */
 130 }
 131
 132 #navbar li /* A simple method to get navbar links to appear in one line. */ {
 133   float: left; /* LTR */
 134   padding: 0 10px 0 0; /* LTR */
 135 }
 136
 137 /*
 138  * First sidebar
 139  */
 140 #sidebar-first {
 141   float: left; /* LTR */
 142   width: 200px;
 143   margin-left: 0; /* LTR */
 144   margin-right: -200px; /* LTR */ /* Negative value of #sidebar-first's width + left margin. */
 145   padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-first-inner. */
 146 }
 147
 148 #sidebar-first-inner {
 149   margin: 0 20px 0 0; /* LTR */
 150   padding: 0;
 151 }
 152
 153 /*
 154  * Second sidebar
 155  */
 156 #sidebar-second {
 157   float: left; /* LTR */
 158   width: 200px;
 159   margin-left: 760px; /* LTR */ /* Width of content + sidebar-first. */
 160   margin-right: -960px; /* LTR */ /* Negative value of #sidebar-second's width + left margin. */
 161   padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-second-inner. */
 162 }
 163
 164 #sidebar-second-inner {
 165   margin: 0 0 0 20px; /* LTR */
 166   padding: 0;
 167 }
 168
 169 /*
 170  * Footer
 171  */
 172 #footer {
 173 }
 174
 175 .region-footer {
 176 }
 177
 178 /*
 179  * Closure
 180  */
 181 #closure-blocks /* See also the #page-wrapper declaration above that this div shares. */ {
 182 }
 183
 184 /*
 185  * Prevent overflowing content
 186  */
 187 #header,
 188 #content,
 189 #navbar,
 190 #sidebar-first,
 191 #sidebar-second,
 192 #footer,
 193 #closure-blocks {
 194   overflow: visible;
 195   word-wrap: break-word; /* A very nice CSS3 property */
 196 }
 197
 198 #navbar {
 199   overflow: hidden; /* May need to be removed if using a dynamic drop-down menu */
 200 }
 201
 202 /*
 203  * If a div.clear-block doesn't have any content after it and its bottom edge
 204  * touches the bottom of the viewport, Firefox and Safari will mistakenly
 205  * place several pixels worth of space between the bottom of the div and the
 206  * bottom of the viewport. Uncomment this CSS property to fix this.
 207  * Note: with some over-large content, this property might cause scrollbars
 208  * to appear on the #page-wrapper div.
 209  */
 210 /*
 211 #page-wrapper {
 212   overflow-y: hidden;
 213 }
 214 */