[css] optimisation de script ?

Version imprimable

Bonjour à tous,

voilà un extrait de mon css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.centre {
	position: absolute;
	width: 990px;
	height: 720px;
	padding: 5px;
	background-color: #FFFFE6;
	border: 2px solid #000000;
}
	.zone1 {
		float: left;
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
		overflow: hidden;
	}
	.zone2 {
		float: right;
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
		overflow: hidden;
	}
	.zone3 {
		position: absolute;
		left: 5px;
		bottom: 5px;
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
		overflow: hidden;
		}
	.zone4 {
		position: absolute;
		right: 5px;
		bottom: 5px;
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
		overflow: hidden;
	}

Extrait de mon XSLT :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="centre">
	<div class="zone1">
		<xsl:apply-templates select="//zone[position()=1]"/>
	</div>
	<div class="zone2">
		<xsl:apply-templates select="//zone[position()=2]"/>
	</div>
	<div class="zone3">
		<xsl:apply-templates select="//zone[position()=3]"/>
	</div>
	<div class="zone4">
		<xsl:apply-templates select="//zone[position()=4]"/>
	</div>
</div>

"centre" est mon conteneur et contient 4 zones.

Mon problème est que les paramètres suivants sont répétés QUATRE fois :

Code:

1
2
3
4
5
6
7
width: 485px;
height: 350px;
padding: 2px;
background-color: orange;
border: 1px solid #000000;
text-align: center;
overflow: hidden;

Comment faire pour qu'ils soient dans un élément que les QUATRE zones auraient en commun ?

J'ai essayé ce qui suit mais c'est pas bon (je sais pas pourquoi d'ailleurs !) :?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.centre {
	position: absolute;
	width: 990px;
	height: 720px;
	padding: 5px;
	background-color: #FFFFE6;
	border: 2px solid #000000;
}
	.zone {
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
		overflow: hidden;
	}
	#1 {
		float: left;
	}
	#2 {
		float: right;
	}
	#3 {
		position: absolute;
		left: 5px;
		bottom: 5px;
		}
	#4 {
		position: absolute;
		right: 5px;
		bottom: 5px;
	}

Extrait de mon XSLT modifié :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="centre">
	<div class="zone" id="1">
		<xsl:apply-templates select="//zone[position()=1]"/>
	</div>
	<div class="zone" id="2">
		<xsl:apply-templates select="//zone[position()=2]"/>
	</div>
	<div class="zone" id="3">
		<xsl:apply-templates select="//zone[position()=3]"/>
	</div>
	<div class="zone" id="4">
		<xsl:apply-templates select="//zone[position()=4]"/>
	</div>
</div>

01/09/2006, 11h42
MasterOfChakhaL
tu n'as pas le droit de donner une valeur qui commence par un chiffre en ce qui concerne les id....

je ne suis pas sur que ce soit ca, mais si tu veux placer tes zones comme ceci:
Code:

1 2 3 4 5 6 +---+---+ | 1 | 2 | +---+---+ | 3 | 4 | +---+---+
je te suggère cela:
Code:

1 2 3 4 5 6 7 8 9 10 #un, #trois { float: left; clear:left; } #deux, #quatre { float:right; clear:right; }

Merci beaucoup MasterOfChakhaL, au final j'ai fait comme ça :

:arrow: Extrait de mon XSLT :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="centre">
	<div class="zone" id="un">
		<xsl:apply-templates select="//zone[position()=1]"/>
	</div>
	<div class="zone" id="deux">
		<xsl:apply-templates select="//zone[position()=2]"/>
	</div>
	<div class="zone" id="trois">
		<xsl:apply-templates select="//zone[position()=3]"/>
	</div>
	<div class="zone" id="quatre">
		<xsl:apply-templates select="//zone[position()=4]"/>
	</div>
</div>

:arrow: Extrait de mon CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.centre {
	position: absolute;
	width: 990px;
	height: 720px;
	padding: 5px;
	background-color: #FFFFE6;
	border: 2px solid #000000;
}
	.zone {
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
		overflow: hidden;
	}
	#un, #trois {
		float: left;
		clear: left;
	}
	#deux, #quatre {
		float: right;
		clear: right;
	}

@+ :mrgreen:

01/09/2006, 15h48
ghohm
En fait j'avais ça (marge entre les zones 1-2 et 3-4) :
Code:

1 2 3 4 5 6 7 8 +---+---+ | 1 | 2 | +---+---+ + + +---+---+ | 3 | 4 | +---+---+
j'ai essayé :
Code:

1 2 3 4 #un, #deux { bottom: 15px; }
Code:

1 2 3 4 #trois, #quatre { top: 15px; }
Impossible de faire réapparaître cette marge ... je suis sûr que c'est tout bête ... mais j'y arrive pas ! :cry:
01/09/2006, 15h51
MasterOfChakhaL
t'étais pas loin...
Code:

1 2 3 4 5 6 7 #un, #deux { padding-bottom: 15px; } #trois, #quatre { padding-top: 15px; }
ca devrait fonctionner...
01/09/2006, 15h55
ghohm

T'es sûrement pas loin... mais c'est pas ça ! :mrgreen:

Tu peux m'aider encore ?! :oops:
01/09/2006, 16h12
MasterOfChakhaL
en effet, remplace padding par margin (je m'a trompé...)

tu peux aussi mettre ca entre les zones un deux et trois quatres
Code:

1 2 <div class="spacer"> </div>
Code:

1 2 3 4 .spacer { clear:both; height:30px; }
01/09/2006, 16h30
ghohm

Citation:

Envoyé par MasterOfChakhaL

en effet, remplace padding par margin (je m'a trompé...)

En effet ... ça fonctionne mieux ! :king:

MasterOfChakhaL ... mon héros ! :lahola: :mouarf: