Override d'un margin left

**sam01** · 19/10/2009, 15h13

Bonjour à tous,

j'ai le bloc suivant :

Code :

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

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

avec son css

Code :

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

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 :

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

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

et le 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
 
 
.up_photo_mini
{
float:left;
margin-left:10px;
margin-top:10px;
width:60px;
}
 
 
 
.marginl150
{
margin-left:150px;
border:none;
}

Merci pour votre aide.

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

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.

**kohsaka** · 19/10/2009, 16h11

salut, tu peux essayer ce code

Code :

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

1
2
3
4
 
<div class="up_photo_mini marginl150">
   <img src="" alt="" />
</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
 
.up_photo_mini
{
   float:left;
   margin-left:10px;
   margin-top:10px;
   width:60px;
}
 
.up_photo_mini.marginl150
{
   margin-left:150px;
   border:none;
}

**Macmillenium** · 19/10/2009, 16h40

Envoyé par kohsaka

Code :

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

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 xhtml :

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
 
<!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>

**sam01** · 20/10/2009, 10h41

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

Merci.

Override d'un margin left

CSS

Vue hybride

Discussions similaires

Partager

Partager