28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Marge à gauche ou à droite sur une image flottante

Je tente de positionner une image avec une marge à droite si elle flotte à gauche et une marge à gauche si elle flotte à droite

ecriture de base

<img style="float:left; margin-right:8px;"  src="image.png" alt="une image" width="80px" height="120px" />

le rendu est correct

maintenant

dans le fichier css

.agauche {float: left;}
.adroite {float: right;}
img .agauche {padding-right: 8px !important}
img .adroite {paddinng-left: 8px !important;}

dans le fichier produit


<img class="agauche" src="image.png" alt="une image" width="80px" height="120px">

le padding (ou la marge) n'existe pas

si je tente l'écriture suivante
dans le css

.agauche {float: left;}
.adroite {float: right;}
.agauche img {padding-right: 8px !important}
.adroite img {paddinng-left: 8px !important;}

<div class="agauche"><mg class="agauche" src="image.png" alt="une image" width="80px" height="120px" /></div>

la marge existe mais l'image tend à se centrer dans la div

Une idée, une piste

merci
Modifié par cogefip (05 Dec 2006 - 12:22)
.agauche img correspond (par exemple) à :
<p class="agauche"><img /></p>

img.agauche correspond à :
<img class="agauche" />


PS : n'oublie pas de prendre en compte la remarque de Benjamin sur le balisage de ton code. Smiley cligne
Modifié par mpop (05 Dec 2006 - 11:06)
Contrairement à ce que dit la traduction sur les feuilles de style css2


5.2 La syntaxe des sélecteurs

... Des caractères blancs peuvent être insérés entre un combinateur et ses sélecteurs simples.

http://www.yoyodesign.org/doc/w3c/css2/selector.html#q1

l'écriture css
img .agauche

n'est pas identique à
img.agauche


aussi mon pb trouve sa solution dans
css

img.agauche {padding-right: 8px}
img.adroite {padding-left: 8px}

avec dans le fichier xhtml produit
<img class="agauche" src="...... />
cogefip a écrit :
Contrairement à ce que dit la traduction sur les feuilles de style css2


5.2 La syntaxe des sélecteurs

... Des caractères blancs peuvent être insérés entre un combinateur et ses sélecteurs simples.

http://www.yoyodesign.org/doc/w3c/css2/selector.html#q1

l'écriture css
img .agauche

n'est pas identique à
img.agauche


aussi mon pb trouve sa solution dans
css

img.agauche {padding-right: 8px}
img.adroite {padding-left: 8px}

avec dans le fichier xhtml produit
<img class="agauche" src="...... />
Oui, c'est ce que je te laissais sous-entendre dans mon premier post Smiley cligne

D'ailleurs, ça ne va pas à l'encontre de ce qui est dit dans ton lien...

N'oublie pas de marquer ce sujet comme résolu et, une fois de plus, d'éditer ton code du premier message Smiley smile
Sujet clos
Aller à