/css/layout-fixed.css

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