Mercurial > hg > mpiwgzen_wide

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