Posted By

dividespace on 10/21/06


Tagged

layouts Ruthsarian


Versions (?)

tank.css


 / Published in: CSS
 

URL: http://webhost.bridgew.edu/etribou/layouts/Tank!/index.html

  1. @charset "iso-8859-1";
  2.  
  3. /*******************************************************************************
  4. * tank.css : 2005.09.01
  5. * -----------------------------------------------------------------------------
  6. *
  7. *******************************************************************************/
  8.  
  9. @import "http://webhost.bridgew.edu/etribou/layouts/rMenu/rMenu.css";
  10. @import "http://webhost.bridgew.edu/etribou/layouts/utility_css/dropmenu.css";
  11.  
  12. /* begin with generic selectors so that they can be overridden if needed
  13.  * by classes deeper in the stylesheet
  14.  */
  15. .clear
  16. {
  17. clear: both;
  18. padding-bottom: 1px; /* for Gecko-based browsers */
  19. margin-bottom: -1px; /* for Gecko-based browsers */
  20. }
  21. * html .clear
  22. {
  23. padding: 0;
  24. margin: 0;
  25. }
  26. .hide
  27. {
  28. display: none !important;
  29. }
  30. .inside
  31. {
  32. /* glitch in IE caused by vertical padding in this class, so 0 padding is
  33. * set here and those blocks that need the vertical padding must be
  34. * applied to the parent element. the purpose of this class is to provide
  35. * horizontal padding without using hacks to get around IE's broken box
  36. * model. so it's okay to apply vertical padding to the parent element,
  37. * just not horizontal padding.
  38. */
  39. padding: 0 14px;
  40. }
  41.  
  42. /* The core Tank! layout structure begins here. No surprises here. Basic
  43.  * negative margins (skidoo) layout structure with the added benefit of
  44.  * forcing #pageWrapper to go the full height of the viewport even if the
  45.  * content isn't tall enough to otherwise foce that height.
  46.  *
  47.  * Theme-related stuff (colors, fonts, etc...) are in the tank_theme.css
  48.  * stylesheet, although 'default' values could be included within this
  49.  * stylesheet.
  50.  */
  51. html, body
  52. {
  53. height: 100%; /* need to set the height on these two elements to 100%,
  54. otherwise child elements such as #pageWrapper, when
  55. its height is set to 100%, will only go as height as
  56. the needed to contain the content within the
  57. element */
  58. }
  59. body
  60. {
  61. margin: 0;
  62. padding: 0; /* no padding here, we put it as margin values on
  63. #pageWrapper. padding/margin values here will break
  64. the min-width emulation for IE */
  65. }
  66. #pageWrapper
  67. {
  68. border: solid 1px #000;
  69. border-width: 0 1px;
  70. margin: 0 20px 0 140px; /* this value defines the margins surrounding the
  71. layout and how much of the body element's
  72. background color will show through. since we're
  73. using a 100% height hack, vertical margins don't
  74. belong here */
  75. min-width: 700px;
  76. width: auto;
  77. min-height: 100%;
  78. _height: 100%; /* if we didn't use the hack, and just set height to 100%
  79. then some browsers will stop the #pageWrapper block
  80. at 100% the height of the window. any content that
  81. doesn't fit within that space will overflow but the
  82. background colors of the columns will not carry. Ugly. */
  83. }
  84. * html #pageWrapper
  85. {
  86. word-wrap: break-word; /* invalid CSS but keeps IE from breaking
  87. horribly under narrow viewports */
  88. }
  89. #masthead
  90. {
  91. padding: 10px;
  92. border-bottom: solid 1px #000;
  93. }
  94. #masthead h1, #masthead h2
  95. {
  96. margin: 0;
  97. padding: 0;
  98. }
  99. #outerColumnContainer
  100. {
  101. border-right: solid 16em #fff;
  102. z-index: 1;
  103. }
  104. #innerColumnContainer
  105. {
  106. border-right: solid 1px #000;
  107. margin: 0 -1px 0 0; /* -1px to make room for the 1px border. this is not
  108. part of the negative margins hack used to create
  109. multiple columns. */
  110. width: 100%;
  111. z-index: 2;
  112. }
  113. #contentColumn, #rightColumn
  114. {
  115. float: left;
  116. overflow: visible;
  117. /* \*/ position: relative; /* drop-down menus go transparent if this is
  118. left in for IE/Mac to see. Very odd. */
  119. }
  120. #rightColumn
  121. {
  122. margin: 0 -16em 0 1px;
  123. width: 16em;
  124. }
  125. #contentColumn
  126. {
  127. margin-right: -1px;
  128. width: 100%;
  129. }
  130. * html #contentColumn
  131. { /* * html #rightColumn */
  132. overflow: hidden; /* this is because IE 6 and earlier do not handle overflow
  133. properly. visible overflow forces the overflowing block
  134. to grow to contain the oversized child element. this can
  135. break the layout. so we hide content. */
  136. }
  137. #rightColumn h3
  138. {
  139. position: relative;
  140. z-index: 999;
  141. }
  142. * html #rightColumn h3
  143. {
  144. display: inline-block;
  145. }
  146. #footer
  147. {
  148. border-top: solid 1px #000;
  149. text-align: center;
  150. }
  151. #footer p
  152. {
  153. /* #footer is also assigned the .inside class so padding is being
  154. * applied already. we don't need the paragraph gutterspace on top
  155. * of it. since the footer is only one paragraph, we can just kill
  156. * all gutterspace on all p elements in #footer. but if you plan on
  157. * having more than one p element, go ahead and kill this rule and
  158. * remove the .inside class assignment from #footer in the HTML
  159. */
  160. padding: 0;
  161. margin: 0;
  162. }
  163.  
  164. /* twoColumns class for implementing a simple 2-column structure wherever you need it
  165.  * inside the content column.
  166.  */
  167. div.twoColumns
  168. {
  169. margin: 14px 0;
  170. width: 100%;
  171. }
  172. div.twoColumns div.leftColumn,
  173. div.twoColumns div.rightColumn
  174. {
  175. float: left;
  176. width: 50%;
  177. overflow: visible; /* fix for IE italics bug */
  178. }
  179. div.twoColumns div.leftColumn
  180. {
  181. margin-right: -1px;
  182. border-right: solid 1px #000;
  183. }
  184. div.twoColumns div.rightColumn
  185. {
  186. margin-right: -2px;
  187. border-left: solid 1px #000;
  188. }
  189. div.twoColumns div.leftColumn div.inside
  190. {
  191. padding-left: 0;
  192. }
  193. div.twoColumns div.rightColumn div.inside
  194. {
  195. padding-right: 0;
  196. }
  197.  
  198. /* Miscellaneous things layout-related, but not core to the layout itself.
  199.  */
  200. p.fontsize-set, div.colorPicker
  201. {
  202. _padding-top: 1px; /* keep IE from putting in too much padding */
  203. text-align: center;
  204. }
  205. p.fontsize-set img
  206. {
  207. border-width: 0;
  208. margin: 0 3px;
  209. }
  210. div.colorPicker a
  211. {
  212. display: block;
  213. width: 12px;
  214. height: 12px;
  215. margin: 0 5px;
  216. float: left;
  217. padding: 0;
  218. line-height: 0;
  219. font-size: 0;
  220. background-color: #dc8; /* default color picker */
  221. }
  222.  
  223. /* style-switcher will use anchors converted to block elements with no
  224.  * content. set the background-color property to whatever value that particular
  225.  * swatch should be
  226.  */
  227. a#colorPicker-blue
  228. {
  229. background-color: #abe;
  230. }
  231. a#colorPicker-green
  232. {
  233. background-color: #aca;
  234. }
  235. a#colorPicker-camille
  236. {
  237. background-color: #e77;
  238. }
  239. a#colorPicker-gray
  240. {
  241. background-color: #ccc;
  242. }
  243. a#colorPicker-black
  244. {
  245. background-color: #000;
  246. }
  247.  
  248. /******************************************************************************/

Report this snippet  

You need to login to post a comment.