web/css/Main.css

   1 /*-----------------------------------------------------------------------
   2 This CSS file is for implementing a 3-column layout based on the
   3 "opposite floats" concept. I've seen this concept explained a few
   4 times but never as clearly as in the article "3 Column Layouts - A
   5 Different Approach" -- (C) 2005, Sebastian Schmieg. The article can be
   6 found at: http://www.kingcosmonaut.de/journal/3col-layout/ and is
   7 worth your time to go have a read first before diving into the
   8 followng css.
   9
  10 This css file is part of a layout package. Used on its own it won't
  11 have the desired effect. The corresponding HTML file should LINK to a
  12 filter.css file which will then IMPORT this style sheet (effecively
  13 hiding it from IE3, IE4 and NN4). Imported ahead of this file should
  14 be one named lpf.css (lpf = Level Playing Field) which attempts to get
  15 all the different browsers using the same measurements, including font
  16 sizes.
  17
  18 Not related to the layout but also used in this example is 1 of Stu
  19 Nicholls' wonderful creations (somewhat customized). This styles the
  20 color boxes with rounded corners used in the content area. The style
  21 for this, also imported by filter.css, is cbrc.css and it contains its
  22 own documentation.
  23
  24 ======================================================================
  25   Copyright and LICENSE -- do not remove --
  26 ======================================================================
  27 This CSS file is copyrighted (c) 2005, Paul Pomeroy/AdaptiveView
  28
  29 see: http://design.adaptiveview.com
  30
  31 but free to use under a Creative Commons Attribution 2.5 license.
  32 Full details about this license are online at:
  33
  34 http://creativecommons.org/licenses/by/2.5/
  35 ----------------------------------------------------------------------- */
  36 html, body, #page {
  37   height:               100%;
  38   width:                100%;
  39 }
  40
  41 body {
  42   background-color:     #fff;
  43   margin-left:          auto;
  44   margin-right:         auto;
  45   text-align:           center;
  46 }
  47
  48 html>body, html>body #page {
  49   height:               auto;
  50 }
  51
  52 #head {
  53   background:           url(/Images/TopOfTheWorld.jpg);
  54   color:                white;
  55   border-top:           1px solid #306;
  56   border-bottom:        1px solid #306;
  57   position:             absolute;
  58   height:               165px;
  59   left:                 0;
  60 /*  max-width:          955px;*/
  61   min-width:            775px;
  62   top:                  0px;
  63   width:                100%;
  64   width:                expression(document.body.clientWidth < 800? "775px": "100%" ); /* min-width IE style*/
  65   z-index:              10;
  66 }
  67
  68 #head h1 {
  69   color:                #fff;
  70   font-size:            3em;
  71   padding-top:          20px;
  72   text-align:           center;
  73 }
  74
  75 #page {
  76   left:                 0;
  77   background:           #2a4c96 url(/Images/Background.jpg);
  78   color:                #000;
  79   position:             absolute;
  80   text-align:           center;
  81   top:                  166px;
  82   z-index:              8;
  83   min-height:           858px;
  84 }
  85
  86 #content {
  87   margin-left:          auto;
  88   margin-right:         auto;
  89   max-width:            955px;
  90   min-width:            775px;
  91   padding-bottom:       4.0em; /* you can get all of the padding set in one line, but Mac IE5.2 has issues with the shorthand method. */
  92   padding-left:         4px;
  93   padding-right:        4px;
  94   padding-top:          10px;
  95   width:                expression(document.body.clientWidth < 800? "775px" : document.body.clientWidth > 1024? "999px": "99%"); /* IE's version of min- and max-width */
  96   z-index:              1;
  97 }
  98
  99 * html #page, * html #content  {
 100   height:               100%;
 101 }
 102
 103 * html #page {
 104   width:                auto;
 105 }
 106
 107 #foot {
 108   background:           transparent;
 109   width:                100%;
 110   z-index:              99;
 111   text-align:           center;
 112 }
 113
 114 #foot p {
 115   color:                #aaa;
 116   font-size:            80%;
 117   text-align:           center;
 118 }
 119
 120 html>body #foot { /* anyone but IE */
 121   bottom:               0;
 122   left:                 0;
 123   position:             absolute;
 124 }
 125
 126 * html #foot { /* IE */
 127   color:                #eee;
 128   margin-left:          auto;
 129   margin-right:         auto;
 130   width:                auto;
 131 }
 132
 133 abbr {
 134   cursor:               help;
 135 }
 136
 137 #head, #foot {
 138   padding-bottom:       0;
 139   padding-top:          0;
 140 }
 141
 142 #content p,
 143 #content h2,
 144 #content h3,
 145 #content h4,
 146 #content h5 {
 147   margin:               11px 11px;
 148 }
 149
 150 #supporting, #related {
 151   font-size:            90%;
 152 }
 153
 154 * html #supporting, * html #related {
 155   overflow:hidden; /* keeps columns from getting pushed down when large font sizes cause words to exceed column width in IE6 */
 156 }
 157
 158 /*
 159  The quick explanation for this layout scheme:
 160
 161  You have 3 columns for your content. I call them "main," "supporting" and
 162  "related." There are two containers (divs) in which to put these 3 columns,
 163  so one container will get 2 columns and the other will get 1. The containers
 164  are named "contentWrapper1" and "contentWrapper2." Both of these containers
 165  are in a container of their own, called "content." In XHTML, the heirarchy
 166  looks like:
 167
 168    <div id="content">
 169
 170      <div id="contentWrapper1">
 171        <div id="main"> ... your main content ... </div>
 172      </div> <!-- end of contentWrapper1 -->
 173
 174      <div id="contentWrapper2">
 175        <div id="supporting">
 176           ... content supporting main ...
 177        </div>
 178        <div id="related">
 179          ... content related to main ...
 180        </div>
 181      </div> <!-- end of contentWrapper2 -->
 182
 183    </div> <!-- end of content -->
 184
 185  NOTE: In the XHTML it doesn't matter which wrapper div is first. Within
 186        the wrapper that's containing two content columns (contentWrapper2)
 187        it doesn't matter which content comes first. It's fairly easy,
 188        therefore, to put your content in any order you want.
 189
 190  The content div is alloted 100% width. The two content wrapper divs sit
 191  side by side, one floated left, the other floated right. Their combined
 192  width must be UNDER 100% (if they're >= 100% then the second wrapper is
 193  going to slip down under the first).
 194
 195  Within one of the wrappers, it doesn't matter which, you'll have two
 196  content divs (again, it doesn't matter which) and one will be floated left
 197  and the other right. Their combined widths must also be < 100%.
 198
 199  Without touching the XHTML, you can get FOUR arrangements of the three
 200  columns by swapping the left and right floats (==> and <== indicate swaps):
 201
 202  1.           Wrapper 1             Wrapper 2
 203                 Main            Supporting Related
 204
 205  2.           Wrapper 1             Wrapper 2
 206                 Main     ==>  Related Supporting   <==
 207
 208  3.  ==>      Wrapper 2             Wrapper 1      <==
 209          Related Supporting           Main
 210
 211  4.           Wrapper 2             Wrapper 1
 212      ==> Supporting Related  <==      Main
 213
 214   by changing the XHTML so the main content is paired up with one of the
 215   others (doesn't matter which) you can get TWO additional layouts in
 216   which the main content is flanked by the other two columns:
 217
 218  5.           Wrapper 1             Wrapper 2
 219            Supporting Main           Related
 220
 221  6.  ==>      Wrapper 2             Wrapper 1     <==
 222                Related       ==> Main Supporting  <==
 223
 224  ******************************
 225  *********  HOWEVER  **********
 226  ******************************
 227  I've set this css up to change column arrangements via the class assigned to
 228  the body tag. See the HTML file for more information, and below for the css
 229  styles used to accomplish this...
 230
 231  */
 232
 233 #contentWrapper1,
 234 #contentWrapper2,
 235 #main,
 236 #related,
 237 #supporting {
 238   background:transparent;
 239   min-height:100%;
 240   z-index:15;
 241 }
 242
 243 #contentWrapper1 {
 244   width:25%;
 245 }
 246
 247 #contentWrapper2 {
 248   width:74.0%;
 249 }
 250
 251 #main {
 252   width:66.0%;
 253 }
 254
 255 #main p.tagline {
 256   color:#939;
 257   font-size:1.4em;
 258   font-style:italic;
 259   text-align:center;
 260 }
 261
 262 #supporting {
 263   width:33%;
 264 }
 265
 266 #related {
 267   width:33%;
 268 }
 269
 270 body.m-sr #contentWrapper1,
 271 body.m-rs #contentWrapper1,
 272 body.sr-m #contentWrapper1,
 273 body.rs-m #contentWrapper1 {
 274   width:49.5%;
 275 }
 276
 277 body.m-sr #contentWrapper2,
 278 body.m-rs #contentWrapper2,
 279 body.sr-m #contentWrapper2,
 280 body.rs-m #contentWrapper2 {
 281   width:49.5%;
 282 }
 283
 284 body.m-sr #main,
 285 body.m-rs #main,
 286 body.sr-m #main,
 287 body.rs-m #main {
 288   width:99.5%;
 289 }
 290
 291 body.m-sr #supporting, body.m-sr #related,
 292 body.m-rs #supporting, body.m-rs #related,
 293 body.sr-m #supporting, body.sr-m #related,
 294 body.rs-m #supporting, body.rs-m #related {
 295   width:49.5%;
 296 }
 297
 298 body.r-sm #related,
 299 body.r-ms #related,
 300 body.sm-r #related,
 301 body.ms-r #related {
 302   width:99.0%;
 303 }
 304
 305 body.s-rm #supporting,
 306 body.s-mr #supporting,
 307 body.rm-s #supporting,
 308 body.mr-s #supporting {
 309   width:99.0%;
 310 }
 311
 312 body.m-sr #contentWrapper1,
 313 body.m-rs #contentWrapper1,
 314 body.s-mr #contentWrapper1,
 315 body.s-rm #contentWrapper1,
 316 body.r-ms #contentWrapper1,
 317 body.r-sm #contentWrapper1 {
 318   float:left;
 319 }
 320
 321 body.sr-m #contentWrapper1,
 322 body.rs-m #contentWrapper1,
 323 body.mr-s #contentWrapper1,
 324 body.rm-s #contentWrapper1,
 325 body.ms-r #contentWrapper1,
 326 body.sm-r #contentWrapper1 {
 327   float:right;
 328 }
 329
 330 body.m-sr #contentWrapper2,
 331 body.m-rs #contentWrapper2,
 332 body.s-mr #contentWrapper2,
 333 body.s-rm #contentWrapper2,
 334 body.r-ms #contentWrapper2,
 335 body.r-sm #contentWrapper2 {
 336   float:right;
 337 }
 338
 339 body.sr-m #contentWrapper2,
 340 body.rs-m #contentWrapper2,
 341 body.mr-s #contentWrapper2,
 342 body.rm-s #contentWrapper2,
 343 body.ms-r #contentWrapper2,
 344 body.sm-r #contentWrapper2 {
 345   float:left;
 346 }
 347
 348 body.s-mr #main,
 349 body.r-ms #main,
 350 body.mr-s #main,
 351 body.ms-r #main {
 352   float:left;
 353 }
 354
 355 body.s-rm #main,
 356 body.r-sm #main,
 357 body.rm-s #main,
 358 body.sm-r #main {
 359   float:right;
 360 }
 361
 362 body.m-sr #related,
 363 body.s-mr #related,
 364 body.sr-m #related,
 365 body.mr-s #related {
 366   float:right;
 367 }
 368
 369 body.m-rs #related,
 370 body.s-rm #related,
 371 body.rs-m #related,
 372 body.rm-s #related {
 373   float:left;
 374 }
 375
 376 body.m-sr #supporting,
 377 body.r-sm #supporting,
 378 body.sr-m #supporting,
 379 body.sm-r #supporting {
 380   float:left;
 381 }
 382
 383 body.m-rs #supporting,
 384 body.r-ms #supporting,
 385 body.rs-m #supporting,
 386 body.ms-r #supporting {
 387  float:right;
 388 }
 389
 390 .hide, .filtered {display:none;}
 391
 392 .clear {
 393   clear:both;
 394   margin-bottom: -1px; /* for Gecko-based browsers */
 395   overflow:hidden;
 396   padding-bottom: 1px; /* for Gecko-based browsers */
 397 }
 398
 399 .clearfix:after {
 400   clear: both;
 401   content: ".";
 402   display: block;
 403   height: 0;
 404   visibility: hidden;
 405 }
 406
 407 .clearfix {display: inline-table;}
 408
 409 /* Hides from IE-mac \*/
 410 * html .clearfix {height: 1%;}
 411 .clearfix {display: block;}
 412 /* End hide from IE-mac */
 413