utilisation de 2 classes CSS qui ne marche pas

**laurentSc** · 21/10/2013, 16h45

Bonjour,

j'ai 2 div imbriquées avec à chacune une classe CSS appliquée ; je me suis donc dit qu'une seule div à laquelle on applique les 2 classes CSS revient au même ; mais non et je ne comprends pas pourquoi. Voici les 2 codes :
- 2 div :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test rounded corners</title>
 
<style>
 
 
body {
	background-color: #fff;
	font: normal 11pt Trebuchet MS,Arial,sans-serif;
}
 
.box1 {
	background-color: #f0f0f0;
	width: 150px;
	height: 20px;
	padding-left:20px;
	border: 1px solid #d7d7d7;
 
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 3px;
	behavior: url(border-radius.htc);
 
	margin: 150px 0 0 33px;
	padding: 25px;
	position: relative;
	z-index: inherit;
	zoom: 1;
}
 
.rel {
	margin: 150px 0 0 33px;
	padding: 25px;
	position: relative;
	z-index: inherit;
	zoom: 1; 
}
</style>
 
</head>
<div class="rel">
    <div class="box1">
        test rounded corners
    </div>
</div>
 
 
</body>
</html>

- une seule div :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test rounded corners</title>
 
<style>
 
 
body {
	background-color: #fff;
	font: normal 11pt Trebuchet MS,Arial,sans-serif;
}
 
.box1 {
	background-color: #f0f0f0;
	width: 150px;
	height: 20px;
	padding-left:20px;
	border: 1px solid #d7d7d7;
 
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 3px;
	behavior: url(border-radius.htc);
 
	margin: 150px 0 0 33px;
	padding: 25px;
	position: relative;
	z-index: inherit;
	zoom: 1;
}
 
.rel {
	margin: 150px 0 0 33px;
	padding: 25px;
	position: relative;
	z-index: inherit;
	zoom: 1; 
}
</style>
 
</head>
<body>
<div class="rel box1">
        test rounded corners
</div>
</body>
</html>

Quelqu'un comprend-il ?

**rodolphebrd** · 21/10/2013, 18h49

Bonjour,

dans le cas du premier code (DIV imbriqués) le DIV (.rel) prend la largeur de la fenêtre car il n'a pas de largeur définie.

Invité · 21/10/2013, 19h26

Bonjour,
c'est surtout que dans le cas de 2 <div> imbriquées, les padding et margin s'additionnent en cascade (d'où le terme CSS : Cascading Style Sheet).

Contrairement au 2ème cas, où tous les attributs de .rel se substituent à ceux de .box1.

Rien de sorcier ni de mystérieux, donc.

N.B. pour corser le tout, si on veut obtenir le même résultat :
penser que le padding de l'un se transforme en margin de l'autre !

De fait, dans le 2ème cas, il faudrait :

Code :

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

1
2
3
4
.rel {
	margin: 325px 25px 25px 91px;
	padding: 25px;
}

laurentSc, je te laisse te creuser la tête pour comprendre comment je suis arrivé à ce résultat

Indice : la réponse est dans ce message...

**laurentSc** · 21/10/2013, 21h51

Comme je suis une quiche en CSS, je crois avoir trouvé les calculs :
2x150+35=325
2x0+25=25
2x0+25=25
2x33+25=91
mais ne sais pas les expliquer (les notions de margin et padding, je ne les ai pas...

)

Mais par contre, si dans le 2e cas, je mets

Code :

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

1
2
3
4
5
6
7
8
9
10
.rel {
/*	margin: 150px 0 0 33px;
	padding: 25px;*/
	position: relative;
	z-index: inherit;
	zoom: 1;
margin: 325px 25px 25px 91px;
	padding: 25px;
 
}

ça ne revient pas au même que quand les div sont imbriquées et c'est très visible, car il n'y a pas de couleur de fond, alors que dans le 1er cas (les div imbriqués), si.

**NoSmoking** · 21/10/2013, 21h55

Bonjour,

Comme je suis une quiche en CSS, je crois avoir trouvé les calculs :
2x150+35=325

le calcul ne semble pas ton fort non plus....

Invité · 21/10/2013, 22h22

...ça ne revient pas au même que quand les div sont imbriquées et c'est très visible, car il n'y a pas de couleur de fond....

Quel rapport entre margin/padding et couleur de fond ?

**laurentSc** · 21/10/2013, 22h47

Envoyé par NoSmoking

Bonjour,le calcul ne semble pas ton fort non plus....

Pas une erreur de calcul, une faute de frappe (j'aurais du saisir 25)

Envoyé par jreaux62

Quel rapport entre margin/padding et couleur de fond ?

J'en vois pas non plus, sauf que j'avais compris qu'avec tes modifs, le 2e cas devait avoir exactement le même comportement que le 1er...Apparemment, non.

**JefReb** · 22/10/2013, 09h42

Bonjour, juste un petit rajout.
Comme l'explique Jreaux62 on peut voir facilement cette substution dans le 2ème cas avec le plugin Firebug pour firefox ou f12 sous ie:
Je joins l'image pour voir les codes barrés.
Nom : firebug.png
Affichages : 66
Taille : 15,5 Ko

Nom : firebug.png
Affichages : 66
Taille : 15,5 Ko

c'est encore plus flagrant lorsque l'on met une couleur de fond à .rel
voir http://codepen.io/JefReb/pen/vznrf
et l'image de firebug:

utilisation de 2 classes CSS qui ne marche pas

CSS

Discussions similaires

Partager

Partager