28172 sujets

CSS et mise en forme, CSS3

Bonjour,

je suis devant un casse tête depuis plus de 2 heures et malgré mes recherches, je bloque.

je vois bien que c'est mon entêtement qui me bloque, la solution je le sais, est simple, c'est pour cela que je demande un regard extérieur.


Lors de l'ajout d'une image dans wordpress, on peut indiquer l'alignement que l'on désire lui donner, a savoir, alignleft, alignright ou aligncenter.

cela correspond a une classe CSS attribuée a l'image (pas au conteneur de l'image)

en clair, le code Html généré ressemble a ca

<p><a href="lien"  rel="attachment wp-att-82"><img class="aligncenter size-full wp-image-82" title=" " src="lien de limage"  alt="" width="500" height="320" /></a></p>


voici le css que j'utilise habituellement


.aligncenter {margin:10px auto 10px;
text-align:center; }
.alignleft {float:left; margin:10px;
}
.alignright{float:right;margin:10px;
}


le problème c'est que toutes les images ne font pas la meme taille, que c'est l'image qui est aligncenter et pas le conteneur.

Donc l'image n'est pas aligné dans mon conteneur.

auriez vous une solution?

voici une page d'exemple si vous voulez essayer
http://www.buymeadonut.com/81/icones-reseaux-sociaux-cafe/


Merci par avance de toutes l'aide que vous pourriez m'apporter Smiley smile
Bonjour,

Ton image doit être en display:block.
Attention, tu as mis un style="display:inline" dans le html, donc même si tu mets un display:block dans le css, ca ne sera pas suffisant à moins d'ajouter un !important (qui ne marche pas sous certaines versions d'IE), donc autant enlever la balise style.
merci de ta réponse.

mais je ne vois pas de display:inline pour le html Smiley confused
et le fait de passer l'image en display:block ne change rien. Smiley decu
Sur cette page : http://www.buymeadonut.com/81/icones-reseaux-sociaux-cafe/


<img class="aligncenter size-full wp-image-82" title="icons-reseaux-sociaux-café" src="http://www.buymeadonut.com/wp-content/uploads/2011/12/icons-reseaux-sociaux-café.jpg" alt="icons-reseaux-sociaux-café" width="500" height="320" style="display: inline; " data-lazy-loaded="true">


style="display: inline; "

Mets le display:block !important; dans ta regle css .aligncenter, je pense que tu comprendras.
a mince ok, dsl je n'avais pas compris le display dans le html ^^ autant pour moi, je vais voir function.php, j'ai du mettre un truc dedans.

merci beaucoup pour ta précieuse aide.
je v ais tester de suite avant d'aller dormir Smiley smile