CSS : sélectionner les images flottantes

7804j · 15 Février 2013

Bonjour,

J'aimerais appliquer une marge de 20px à toutes mes images, sauf celles flottant à droite, qui ne doivent pas avoir de marge à droite. J'ai donc fait ceci :

Code:

img[style~=float: right] { margin-right:0}
img[style~=float:right] { margin-right:0}

Malheureusement, ça ne fonctionne pas, et je ne comprends pas pourquoi :/

Une idée ?

Merci d'avance

spout · 15 Février 2013

Je ne vois pas pourquoi ça fonctionnerais, j'ai jamais vu cette syntaxe :roll:

Au lieu de mettre style="float: right" en inline sur tes images, fais plutôt:

Code:

.floatr {float: right;}
.floatl {float: left;}

img.floatr {margin-right: 0;}

PHP:

<span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">img class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"floatr"</span><span class="syntaxdefault"> src</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"..."</span><span class="syntaxdefault"> alt</span><span class="syntaxkeyword">=</span><span class="syntaxstring">""</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">/><br /></span><span class="syntaxdefault"> </span>

Supermaury · 15 Février 2013

Bonjour.

Il te manque juste les apostrophes

Par contre, ce sélecteur n'est pas compris par IE8.

@++

Code:

<html>
<head>
<style type="text/css">
img {
	border:1px solid green;
	margin:20px
}
img[style='float:right'] {
	border:1px solid red;
	margin-right:0
}
</style>
</head>
<body>
<img src="" width="200" height="200" style="float:right"/>
<img src="" width="200" height="200" />
<img src="" width="200" height="200" />
<img src="" width="200" height="200" />
</body>
</html>

7804j · 15 Février 2013

@Spout : Je ne peux malheureusement pas utiliser ta méthode, car je dois traiter du html que je n'ai pas le droit de modifier ==> je ne peux donc que changer le style des images, sans changer les classes des images.
Sinon, la syntaxe est décrite ici : http://www.w3schools.com/cssref/css_selectors.asp

@Supermaury : Merci pour ton aide, les apostrophes semblent effectivement nécessaires. Malheureusement, ça ne va pas fonctionner tout de même, car j'ai constaté que ceci fonctionne :

Code:

img[style~='float:right'] { margin-right:0}

Mais que ceci ne fonctionne pas :

Code:

img[style~='float: right'] { margin-right:0}

En l'occurrence, certaines images utilisent style="float: left", donc ça ne va pas fonctionner à cause de l'espace

Supermaury · 15 Février 2013

Et si tu gères les 2 cas, ça devrait aller non ?

Dans cet exemple ça fonctionne :

Code:

<html>
<head>
<style type="text/css">
img {
	border:1px solid green;
	margin:20px
}
img[style='float: right'], img[style='float:right'] {
	margin-right:0;border:1px solid red;
}
</style>
</head>
<body>
<img src="" width="200" height="200" style="float:right"/>
<img src="" width="200" height="200" style="float: right"/>
<img src="" width="200" height="200" />
<img src="" width="200" height="200" />
<img src="" width="200" height="200" />
</body>
</html>

Après, tu peux utiliser ça si tu ne spécifies pas dans les styles de tes images le padding-right et le margin-right (sinon il va les prendre aussi) :

Code:

img[style*='right'] {
   ...
}

7804j · 15 Février 2013

Ta deuxième solution a marché parfaitement, merci !

Pour la première, je vais arrêter d'insister car ça continue de buguer assez bizarrement chez moi ^^