Mercurial > hg > mpiwgzen_wide

comparison css/layouts/fixed.css @ 0:a3750d724105 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initital
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Tue, 02 Jun 2015 09:16:36 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:a3750d724105
1 /**
2 * @file
3 * Positioning for a fixed-width, desktop-centric layout.
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 uses the Zen Grids plugin for Compass: http://zengrids.com
10 */
11
12 /**
13 * Center the page.
14 *
15 * If you want to make the page a fixed width and centered in the viewport,
16 * this is the standards-compliant way to do that.
17 */
18 #page,
19 .region-bottom {
20 margin-left: auto;
21 margin-right: auto;
22 width: 980px;
23 }
24
25 /* Apply the shared properties of grid items in a single, efficient ruleset. */
26 #header,
27 #content,
28 #navigation,
29 .region-sidebar-first,
30 .region-sidebar-second,
31 #footer {
32 padding-left: 10px;
33 padding-right: 10px;
34 border-left: 0 !important;
35 border-right: 0 !important;
36 word-wrap: break-word;
37 *behavior: url("/path/to/boxsizing.htc");
38 _display: inline;
39 _overflow: hidden;
40 _overflow-y: visible;
41 }
42
43 /* Containers for grid items and flow items. */
44 #header,
45 #main,
46 #footer {
47 *position: relative;
48 *zoom: 1;
49 }
50 #header:before,
51 #header:after,
52 #main:before,
53 #main:after,
54 #footer:before,
55 #footer:after {
56 content: "";
57 display: table;
58 }
59 #header:after,
60 #main:after,
61 #footer:after {
62 clear: both;
63 }
64
65 /* Navigation bar */
66 #main {
67 /* Move all the children of #main down to make room. */
68 padding-top: 3em;
69 position: relative;
70 }
71 #navigation {
72 /* Move the navbar up inside #main's padding. */
73 position: absolute;
74 top: 0;
75 height: 3em;
76 width: 960px;
77 }
78
79 /**
80 * The layout when there is only one sidebar, the left one.
81 */
82
83 /* Span 4 columns, starting in 2nd column from left. */
84 .sidebar-first #content {
85 float: left;
86 width: 764px;
87 margin-left: 196px;
88 margin-right: -980px;
89 }
90
91 /* Span 1 column, starting in 1st column from left. */
92 .sidebar-first .region-sidebar-first {
93 float: left;
94 width: 176px;
95 margin-left: 0px;
96 margin-right: -196px;
97 }
98
99 /**
100 * The layout when there is only one sidebar, the right one.
101 */
102
103 /* Span 4 columns, starting in 1st column from left. */
104 .sidebar-second #content {
105 float: left;
106 width: 764px;
107 margin-left: 0px;
108 margin-right: -784px;
109 }
110
111 /* Span 1 column, starting in 5th column from left. */
112 .sidebar-second .region-sidebar-second {
113 float: left;
114 width: 176px;
115 margin-left: 784px;
116 margin-right: -980px;
117 }
118
119 /**
120 * The layout when there are two sidebars.
121 */
122
123 /* Span 3 columns, starting in 2nd column from left. */
124 .two-sidebars #content {
125 float: left;
126 width: 568px;
127 margin-left: 196px;
128 margin-right: -784px;
129 }
130
131 /* Span 1 column, starting in 1st column from left. */
132 .two-sidebars .region-sidebar-first {
133 float: left;
134 width: 176px;
135 margin-left: 0px;
136 margin-right: -196px;
137 }
138
139 /* Span 1 column, starting in 5th column from left. */
140 .two-sidebars .region-sidebar-second {
141 float: left;
142 width: 176px;
143 margin-left: 784px;
144 margin-right: -980px;
145 }