Override d'un margin left

Version imprimable

Bonjour à tous,

j'ai le bloc suivant :
Code:

1 2 3 4 5 6 7 <div class="up_photo"> <img src="images/photo/1gd.jpeg"> </div>
avec son css
Code:

1 2 3 4 5 6 7 8 9 .up_photo { float:left; margin-left:10px; margin-top:10px; width:150px; }
Et au fait j'aimerais exceptionnellement, lui affecter un margin left de 150 pixel

alors j'ai fait ceci mais ça ne fonctionne pas :
Code:

1 2 3 4 5 6 7 <div class="up_photo marginl150"> <img src="images/photo/1gd.jpeg"> </div>
et le css :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .up_photo_mini { float:left; margin-left:10px; margin-top:10px; width:60px; } .marginl150 { margin-left:150px; border:none; }
Merci pour votre aide.

19/10/2009, 15h37
Bisûnûrs

Elle est où ta classe up_photo par rapport à ta classe marginl150 dans ton fichier ? Parce que dans le deuxième code que tu nous donnes, on voit la classe up_photo_mini et non up_photo. Donc si l'autre est déclarée en-dessous, c'est normal que ça ne fonctionne pas.

salut, tu peux essayer ce code

Code:

1
2
3
4
 
<div class="up_photo_mini marginl150">
   <img src="" alt="" />
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.up_photo_mini
{
   float:left;
   margin-left:10px;
   margin-top:10px;
   width:60px;
}
 
.up_photo_mini.marginl150
{
   margin-left:150px;
   border:none;
}

Citation:

Envoyé par kohsaka

Code:

1
2
3
4
5
6
.up_photo_mini.marginl150
{
   margin-left:150px;
   border:none;
}

Attention, IE6 perd les pédales dans certains cas ;), par exemple :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
	<title>Document sans nom</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
	<style type="text/css">
                .up_photo_mini {
                   /* float:left; */
                   margin-left:10px;
                   margin-top:10px;
                   width:60px;
                   height:60px;
                   background:red;
                }
                 
                .un.marginl150 {
                   margin-left:150px;
                }
 
                .deux.marginl150 {
                   margin-left:150px;
                   border:3px solid green
                }
        </style>
</head>
 
<body>
 
	<div class="up_photo_mini un marginl150">
		Sans bordures
	</div>
 
	<div class="up_photo_mini deux marginl150">
		Avec bordures
	</div>
 
</body>
</html>

20/10/2009, 10h41
sam01

Ok pour une meilleure compatibilité, j'utilise la méthode Macmillenium.

Merci.