CSS : sélectionner les images flottantes

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par 7804j, 15 Février 2013.

  1. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    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 :)
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 181
    J'aime reçus:
    331
    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>
     
  3. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    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>
    
     
  4. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    @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 :(
     
  5. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    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'] {
       ...
    }
    
     
  6. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    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 ^^
     
Chargement...
Similar Threads - CSS sélectionner images Forum Date
<noscript><link ...> du css après un <link rel="preload"... Débuter en référencement 1 Mai 2021
Utiliser une grille CSS peut-il nuire au référencement ? Débuter en référencement 17 Janvier 2021
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
WordPress Suppression élément avec Css Demandes d'avis et de conseils sur vos sites 16 Août 2020
Conflit image responsive et animation css Développement d'un site Web ou d'une appli mobile 20 Février 2020
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
CSS Google Shopping AdWords 23 Janvier 2020
style.css unique préférable avec link ou javascript ? Développement d'un site Web ou d'une appli mobile 25 Décembre 2019
Comment gérer le ALT d'une image en CSS background-image YouTube, Google Images et Google Maps 17 Décembre 2019
Contenu mixte vers http / css - réelle gravité ? Débuter en référencement 24 Septembre 2019