source: spip-zone/_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/layout.css.html @ 106693

Last change on this file since 106693 was 106693, checked in by real3t@…, 19 months ago

Équilibrage des colonnes : on peut avoir des pages très hautes !

File size: 16.8 KB
Line 
1#CACHE{24*3600,cache-client}
2#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
3#HTTP_HEADER{Vary: Accept-Encoding}
4
5#SET{LargeurOmbre,(#CONFIG{soyezcreateurs_layout/largeurombre,0})}
6#SET{LargeurContaineurOmbres,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960}|plus{#GET{LargeurOmbre}}|plus{#GET{LargeurOmbre}})}
7#SET{LargeurContaineurOmbre,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960}|plus{#GET{LargeurOmbre}})}
8#SET{LargeurContaineur,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960})}
9#SET{LargeurMenuGaucheOmbre,(#CONFIG{soyezcreateurs_layout/largeurmenugauche,180}|plus{#GET{LargeurOmbre}})}
10#SET{LargeurMenuGauche,(#CONFIG{soyezcreateurs_layout/largeurmenugauche,180})}
11#SET{LargeurMenuDroitOmbre,(#CONFIG{soyezcreateurs_layout/largeurmenudroit,180}|plus{#GET{LargeurOmbre}})}
12#SET{LargeurMenuDroit,(#CONFIG{soyezcreateurs_layout/largeurmenudroit,180})}
13
14/* http://blog.html.it/layoutgala/index.html */
15[(#ENV{layoutgala}|=={1}|oui)/* 1 */
16#wrapper{float:left;width:100%}
17#content{margin: 0 25%}
18#navigation{float:left;width:25%;margin-left:-100%}
19#extra{float:left;width:25%;margin-left:-25%}
20#footer{clear:left;width:100%}
21][(#ENV{layoutgala}|=={2}|oui)/* 2 */
22#wrapper{float:left;width:100%}
23#content{margin: 0 25%}
24#navigation{float:left;width:25%;margin-left:-25%}
25#extra{float:left;width:25%;margin-left:-100%}
26#footer{clear:left;width:100%}
27@media (max-width: [(#GET{LargeurContaineur})]px) {
28#navigation{float:right;width:50%}
29#extra{float:left;width:50%}
30}][(#ENV{layoutgala}|=={3}|oui)/* 3 */
31#wrapper{float:left;width:100%}
32#content{margin-right: 50%}
33#navigation{float:left;width:25%;margin-left:-50%}
34#extra{float:left;width:25%;margin-left:-25%}
35#footer{clear:left;width:100%}
36][(#ENV{layoutgala}|=={4}|oui)/* 4 */
37#wrapper{float:left;width:100%}
38#content{margin-right: 50%}
39#navigation{float:left;width:25%;margin-left:-25%}
40#extra{float:left;width:25%;margin-left:-50%}
41#footer{clear:left;width:100%}
42@media (max-width: [(#GET{LargeurContaineur})]px) {
43#navigation{float:right;width:50%}
44#extra{float:left;width:50%}
45}][(#ENV{layoutgala}|=={5}|oui)/* 5 */
46#wrapper{float:left;width:100%}
47#content{margin-left: 50%}
48#navigation{float:left;width:25%;margin-left:-100%}
49#extra{float:left;width:25%;margin-left:-75%}
50#footer{clear:left;width:100%}
51][(#ENV{layoutgala}|=={6}|oui)/* 6 */
52#wrapper{float:left;width:100%}
53#content{margin-left: 50%}
54#navigation{float:left;width:25%;margin-left:-75%}
55#extra{float:left;width:25%;margin-left:-100%}
56#footer{clear:left;width:100%}
57@media (max-width: [(#GET{LargeurContaineur})]px) {
58#navigation{float:right;width:50%}
59#extra{float:left;width:50%}
60}][(#ENV{layoutgala}|=={7}|oui)/* 7 */
61#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
62#wrapper{float:left;width:100%}
63#content{margin: 0 #GET{LargeurMenuDroitOmbre}px 0 #GET{LargeurMenuGaucheOmbre}px}
64#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-#GET{LargeurContaineurOmbre}px}
65#extra{float:left;width:#GET{LargeurMenuDroit}px;margin-left:-#GET{LargeurMenuDroitOmbre}px}
66#footer{clear:left;width:100%}
67][(#ENV{layoutgala}|=={8}|oui)/* 8 */
68#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
69#wrapper{float:left;width:100%}
70#content{margin: 0 #GET{LargeurMenuGauche}px 0 #GET{LargeurMenuDroit}px}
71#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-#GET{LargeurMenuGauche}px}
72#extra{float:left;width:#GET{LargeurMenuDroit}px;margin-left:-#GET{LargeurContaineur}px}
73#footer{clear:left;width:100%}
74@media (max-width: [(#GET{LargeurContaineur})]px) {
75#navigation{float:right;width:50%}
76#extra{float:left;width:50%}
77}][(#ENV{layoutgala}|=={9}|oui)/* 9 */
78#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
79#wrapper{float:left;width:100%}
80#content{margin-right:[(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
81#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-[(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
82#extra{float:left;width:#GET{LargeurMenuDroit}px;margin-left:-#GET{LargeurMenuDroit}px}
83#footer{clear:left;width:100%}
84][(#ENV{layoutgala}|=={10}|oui)/* 10 */
85#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
86#wrapper{float:left;width:100%}
87#content{margin-right:[(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
88#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-#GET{LargeurMenuGauche}px}
89#extra{float:left;width:#GET{LargeurMenuDroit}px;margin-left:-[(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
90#footer{clear:left;width:100%}
91@media (max-width: [(#GET{LargeurContaineur})]px) {
92#navigation{float:right;width:50%}
93#extra{float:left;width:50%}
94}][(#ENV{layoutgala}|=={11}|oui)/* 11 */
95#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
96#wrapper{float:left;width:100%}
97#content{margin-left: [(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
98#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-#GET{LargeurContaineur}px}
99#extra{float:left;width:#GET{LargeurMenuDroit}px;margin-left:-[(#GET{LargeurContaineur}|moins{#GET{LargeurMenuGauche}})]px}
100#footer{clear:left;width:100%}
101][(#ENV{layoutgala}|=={12}|oui)/* 12 */
102#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
103#wrapper{float:left;width:100%}
104#content{margin-left: [(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
105#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-[(#GET{LargeurContaineur}|moins{#GET{LargeurMenuDroit}})]px}
106#extra{float:left;width:#GET{LargeurMenuDroit}px;margin-left:-#GET{LargeurContaineur}px}
107#footer{clear:left;width:100%}
108@media (max-width: [(#GET{LargeurContaineur})]px) {
109#navigation{float:right;width:50%}
110#extra{float:left;width:50%}
111}][(#ENV{layoutgala}|=={13}|oui)/* 13 */
112#wrapper{float:left;width:100%;}
113#content{margin: 0 #GET{LargeurMenuDroit}px 0 #GET{LargeurMenuGauche}px}
114#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-100%}
115#extra{float:left;width:#GET{LargeurMenuDroit}px;margin-left:-#GET{LargeurMenuDroit}px}
116#footer{clear:left;width:100%}
117][(#ENV{layoutgala}|=={14}|oui)/* 14 */
118#wrapper{float:left;width:100%}
119#content{margin: 0 #GET{LargeurMenuGauche}px 0 #GET{LargeurMenuDroit}px}
120#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-#GET{LargeurMenuGauche}px}
121#extra{float:left;width:#GET{LargeurMenuDroit}px;margin-left:-100%}
122#footer{clear:left;width:100%}
123@media (max-width: [(#GET{LargeurContaineur})]px) {
124#navigation{float:right;width:50%}
125#extra{float:left;width:50%}
126}][(#ENV{layoutgala}|=={15}|oui)/* 15 */
127#wrapper{float:left;width:100%}
128#content{margin-right: [(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
129#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-[(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
130#extra{float:left;width:#GET{LargeurMenuDroit}px;margin-left:-#GET{LargeurMenuDroit}px}
131#footer{clear:left;width:100%}
132][(#ENV{layoutgala}|=={16}|oui)/* 16 */
133#wrapper{float:left;width:100%}
134#content{margin-right: [(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
135#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-#GET{LargeurMenuGauche}px}
136#extra{float:left;width:#GET{LargeurMenuDroit}px;margin-left:-[(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
137#footer{clear:left;width:100%}
138@media (max-width: [(#GET{LargeurContaineur})]px) {
139#navigation{float:right;width:50%}
140#extra{float:left;width:50%}
141}][(#ENV{layoutgala}|=={17}|oui)/* 17 */
142#wrapper{float:right;width: 100%;margin-left: -[(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
143#content{margin-left:[(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
144#navigation{float:right;width:#GET{LargeurMenuGauche}px}
145#extra{float:right;width:#GET{LargeurMenuDroit}px}
146#footer{clear:right;width:100%}
147@media (max-width: [(#GET{LargeurContaineur})]px) {
148#navigation{float:right;width:50%}
149#extra{float:left;width:50%}
150}][(#ENV{layoutgala}|=={18}|oui)/* 18 */
151#wrapper{float:right;width: 100%;margin-left: -[(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
152#content{margin-left:[(#GET{LargeurMenuGauche}|plus{#GET{LargeurMenuDroit}})]px}
153#navigation{float:left;width: #GET{LargeurMenuGauche}px}
154#extra{float:right;width:#GET{LargeurMenuDroit}px}
155#footer{clear:both;width:100%}
156][(#ENV{layoutgala}|=={19}|oui)/* 19 */
157#wrapper{float:left;width:100%}
158#content{margin: 0 33% 0 #GET{LargeurMenuGauche}px}
159#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-100%}
160#extra{float:left;width:33%;margin-left:-33%}
161#footer{clear:left;width:100%}
162][(#ENV{layoutgala}|=={20}|oui)/* 20 */
163#wrapper{float:left;width:100%}
164#content{margin: 0 #GET{LargeurMenuDroit}px 0 33%}
165#navigation{float:left;width:33%;margin-left:-100%}
166#extra{float:left;width:#GET{LargeurMenuDroit}px;margin-left:-#GET{LargeurMenuDroit}px}
167#footer{clear:left;width:100%}
168][(#ENV{layoutgala}|=={21}|oui)/* 21 */
169#wrapper{float:left;width:100%;margin-left:-25%}
170#content{margin: 0 #GET{LargeurMenuGauche}px 0 25%}
171#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-#GET{LargeurMenuGauche}px}
172#extra{float:left;width:25%}
173#footer{clear:left;width:100%}
174][(#ENV{layoutgala}|=={22}|oui)/* 22 */
175#wrapper{float:left;width:100%;margin-left:-#GET{LargeurMenuDroit}px}
176#content{margin: 0 25% 0 #GET{LargeurMenuDroit}px}
177#navigation{float:left;width:25%;margin-left:-25%}
178#extra{float:left;width:#GET{LargeurMenuDroit}px}
179#footer{clear:left;width:100%}
180][(#ENV{layoutgala}|=={23}|oui)/* 23 */
181#wrapper{float:left;width:100%;margin-left:-#GET{LargeurMenuGauche}px}
182#content{margin-left:#GET{LargeurMenuGauche}px}
183#navigation{float:right;width:#GET{LargeurMenuGauche}px}
184#extra{float:right;clear:right;width:#GET{LargeurMenuGauche}px}
185#footer{clear:both;width:100%}
186@media (max-width: [(#GET{LargeurContaineur})]px) {
187#wrapper{margin-left:0}
188#navigation{float:left;width:50%}
189#extra{float:left;width:50%;}
190}][(#ENV{layoutgala}|=={24}|oui)/* 24 */
191#wrapper{float:right;width:100%;margin-left:-#GET{LargeurMenuGauche}px}
192#content{margin-left:#GET{LargeurMenuGauche}px}
193#navigation{float:left;width:#GET{LargeurMenuGauche}px}
194#extra{float:left;clear:left;width:#GET{LargeurMenuGauche}px}
195#footer{clear:both;width:100%}
196@media (max-width: [(#GET{LargeurContaineur})]px) {
197#wrapper{margin-left:0}
198#navigation{float:left;width:50%}
199#extra{float:left;width:50%;clear:none;}
200}][(#ENV{layoutgala}|=={25}|oui)/* 25 */
201#wrapper{float:left;width:100%;margin-left:-33%}
202#content{margin-left:33%}
203#navigation{float:right;width:32.9%}
204#extra{float:right;clear:right;width:32.9%}
205#footer{clear:both;width:100%}
206@media (max-width: [(#GET{LargeurContaineur})]px) {
207#wrapper{margin-left:0}
208#navigation{float:left;width:50%}
209#extra{float:left;width:50%;clear:none;}
210}][(#ENV{layoutgala}|=={26}|oui)/* 26 */
211#wrapper{float:right;width:80%;}
212#navigation{float:left;width:20%}
213#extra{float:left;clear:left;width:20%}
214#footer{clear:both;width:100%}
215@media (max-width: [(#GET{LargeurContaineur})]px) {
216#wrapper{margin-left:0}
217#navigation{float:left;width:50%}
218#extra{float:left;width:50%;clear:none;}
219}][(#ENV{layoutgala}|=={62}|oui)/* 26 modifie - identifiant 62 */
220#wrapper{float:right;width:80%;margin-left:-.5%}
221#navigation{float:left;width:20.5%}
222#extra{float:left;clear:left;width:20%}
223#footer{clear:both;width:100%}
224][(#ENV{layoutgala}|=={27}|oui)/* 27 */
225#navigation{float:left;width:50%}
226#extra{float:left;width:49.9%}
227#footer{clear:left;width:100%}
228][(#ENV{layoutgala}|=={28}|oui)/* 28 */
229#navigation{float:right;width:50%}
230#extra{float:right;width:49.9%}
231#footer{clear:right;width:100%}
232@media (max-width: [(#GET{LargeurContaineur})]px) {
233#navigation{float:right;width:50%}
234#extra{float:left;width:50%}
235}][(#ENV{layoutgala}|=={29}|oui)/* 29 */
236#wrapper{float:right;width:70%}
237#navigation{float:left;width:29.9%}
238#extra{clear:both;width:100%}
239@media (max-width: [(#GET{LargeurContaineur})]px) {
240#wrapper{float:none; width:100%;}
241#navigation{float:left;width:50%}
242#extra{float:left;width:50%;clear:none;}
243#footer{clear:left;width:100%}
244}][(#ENV{layoutgala}|=={30}|oui)/* 30 */
245#wrapper{float:left;width:70%}
246#navigation{float:right;width:29.9%}
247#extra{clear:both;width:100%}
248@media (max-width: [(#GET{LargeurContaineur})]px) {
249#wrapper{float:none; width:100%;}
250#navigation{float:left;width:50%}
251#extra{float:left;width:50%;clear:none;}
252#footer{clear:left;width:100%}
253}][(#ENV{layoutgala}|=={31}|oui)/* 31 */
254#wrapper{float:left;width:100%;}
255#content{margin-left:#GET{LargeurMenuGauche}px}
256#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-100%}
257#extra{clear:left;width:100%}
258@media (max-width: [(#GET{LargeurContaineur})]px) {
259#wrapper{float:none; width:100%;}
260#navigation{float:left;width:50%}
261#extra{float:left;width:50%;clear:none;}
262#footer{clear:left;width:100%}
263}][(#ENV{layoutgala}|=={32}|oui)/* 32 */
264#wrapper{float:left;width:100%}
265#content{margin-right:#GET{LargeurMenuGauche}px}
266#navigation{float:left;width:#GET{LargeurMenuGauche}px;margin-left:-#GET{LargeurMenuGauche}px}
267#extra{clear:left;width:100%}
268@media (max-width: [(#GET{LargeurContaineur})]px) {
269#wrapper{float:none; width:100%;}
270#navigation{float:left;width:50%}
271#extra{float:left;width:50%;clear:none;}
272#footer{clear:left;width:100%}
273}][(#ENV{layoutgala}|=={33}|oui)/* 33 */
274#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
275#content{float:left;width:[(#GET{LargeurContaineur}|plus{-#GET{LargeurMenuGauche}})]px}
276#navigation{float:right;width:#GET{LargeurMenuGauche}px}
277#extra{float:right;clear:right;width:#GET{LargeurMenuGauche}px}
278#footer{clear:both;width:100%}
279@media (max-width: [(#GET{LargeurContaineur})]px) {
280#wrapper{margin-left:0}
281#navigation{float:left;width:50%}
282#extra{float:left;width:50%;}
283}][(#ENV{layoutgala}|=={34}|oui)/* 34 */
284#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
285#content{float:right;width:[(#GET{LargeurContaineur}|plus{-#GET{LargeurMenuGauche}})]px}
286#navigation{float:left;width:#GET{LargeurMenuGauche}px}
287#extra{float:left;clear:left;width:#GET{LargeurMenuGauche}px}
288#footer{clear:both;width:100%}
289@media (max-width: [(#GET{LargeurContaineur})]px) {
290#wrapper{margin-left:0}
291#content{float:none;}
292#navigation{float:left;width:50%}
293#extra{float:left;width:50%;clear:none;}
294}][(#ENV{layoutgala}|=={35}|oui)/* 35 */
295#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
296#content{float:left;width:[(#GET{LargeurContaineur}|plus{-#GET{LargeurMenuGauche}})]px}
297#navigation{float:right;width:#GET{LargeurMenuGauche}px}
298#extra{float:left;width:[(#GET{LargeurContaineur}|plus{-#GET{LargeurMenuGauche}})]px}
299#footer{clear:both;width:100%}
300@media (max-width: [(#GET{LargeurContaineur})]px) {
301#navigation{float:left;width:50%}
302#extra{float:left;width:50%}
303}][(#ENV{layoutgala}|=={36}|oui)/* 36 */
304#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
305#content{float:right;width:[(#GET{LargeurContaineur}|plus{-#GET{LargeurMenuGauche}})]px}
306#navigation{float:left;width:#GET{LargeurMenuGauche}px}
307#extra{float:right;width:[(#GET{LargeurContaineur}|plus{-#GET{LargeurMenuGauche}})]px}
308#footer{clear:both;width:100%}
309@media (max-width: [(#GET{LargeurContaineur})]px) {
310#navigation{float:left;width:50%}
311#extra{float:left;width:50%}
312}][(#ENV{layoutgala}|=={37}|oui)/* 37 */
313#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
314#content{float:left;width:[(#GET{LargeurContaineur}|moins{#GET{LargeurMenuGauche}})]px}
315#navigation{float:right;width:#GET{LargeurMenuGauche}px}
316#extra{clear:both;width:100%}
317@media (max-width: [(#GET{LargeurContaineur})]px) {
318#wrapper{float:none; width:100%;}
319#navigation{float:left;width:50%}
320#extra{float:left;width:50%;clear:none;}
321#footer{clear:left;width:100%}
322}][(#ENV{layoutgala}|=={38}|oui)/* 38 */
323#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
324#content{float:right;width:[(#GET{LargeurContaineur}|moins{#GET{LargeurMenuGauche}})]px}
325#navigation{float:left;width:#GET{LargeurMenuGauche}px}
326#extra{clear:both;width:100%}
327@media (max-width: [(#GET{LargeurContaineur})]px) {
328#wrapper{float:none; width:100%;}
329#navigation{float:left;width:50%}
330#extra{float:left;width:50%;clear:none;}
331#footer{clear:left;width:100%}
332}][(#ENV{layoutgala}|=={39}|oui)/* 39 */
333#wrapper{float:left;width:100%}
334#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
335#navigation{float:left;width:50%}
336#extra{float:right;width:50%}
337#footer{clear:both;width:100%}
338][(#ENV{layoutgala}|=={40}|oui)/* 40 */
339#container{width:#GET{LargeurContaineurOmbres}px;margin:0 auto}
340#navigation{float:right;width:50%}
341#extra{float:left;width:50%}
342#footer{clear:both;width:100%}
343@media (max-width: [(#GET{LargeurContaineur})]px) {
344#navigation{float:right;width:50%}
345#extra{float:left;width:50%}
346}]
347
348/* Astuce trouvée sur https://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height */
349#contenu { overflow: hidden; width: 100%; }
350#content, #navigation, #extra {
351        padding-bottom: 5000em;
352        margin-bottom: -5000em;
353        position: relative;
354}
355#contenu:after {
356  content: "";
357  display: table;
358  clear: both;
359}
Note: See TracBrowser for help on using the repository browser.