/css/layout-fixed.css

https://gitlab.com/vozmob/cdh_monterrey_theme · CSS · 212 lines · 116 code · 30 blank · 66 comment · 0 complexity · 3e8de098c54f2eb49641b5417449d9f8 MD5 · raw file

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