[css] optimisation de script ?

**ghohm** · 01/09/2006, 11h14

Bonjour à tous,

voilà un extrait de mon css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**MasterOfChakhaL** · 01/09/2006, 11h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
+---+---+
| 1 | 2 |
+---+---+
| 3 | 4 |
+---+---+

je te suggère cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**ghohm** · 01/09/2006, 14h33

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

Extrait de mon XSLT :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Extrait de mon CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
	}

@+

**ghohm** · 01/09/2006, 15h48

En fait j'avais ça (marge entre les zones 1-2 et 3-4) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
+---+---+
| 1 | 2 |
+---+---+
+       +
+---+---+
| 3 | 4 |
+---+---+

j'ai essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**MasterOfChakhaL** · 01/09/2006, 15h51

t'étais pas loin...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#un, #deux {
  padding-bottom: 15px;
}

#trois, #quatre {
  padding-top: 15px;
}

ca devrait fonctionner...

**ghohm** · 01/09/2006, 15h55

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

Tu peux m'aider encore ?!

**MasterOfChakhaL** · 01/09/2006, 16h12

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div class="spacer">&nbsp;</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.spacer {
  clear:both;
  height:30px;
}

**ghohm** · 01/09/2006, 16h30

Envoyé par MasterOfChakhaL

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

En effet ... ça fonctionne mieux !

MasterOfChakhaL ... mon héros !

[css] optimisation de script ?

CSS

Discussions similaires

Partager

Partager