Effet sur Images

Bonjour, je souhaiterai savoir comment peut on faire pour avoir un espèce de cadre autour d'une image, comme sur ce blog http://www.fubiz.net/blog/ ?

C'est assez simple, tu peux par exemple attribuer un padding à ton image, une couleur de fond et une bordure de la couleur de ton choix.

Le code CSS correspondant sur la page que tu cites est le suivant :

.post p img {
	background-color:#EEEEEE;
	border:1px solid #CCCCCC;
	margin:5px 15px 15px 0px;
	padding:0.5em;
}

QuentinRaShEr a écrit :
ah d'accord et j'ajoute

<div class="post"><p> 

devant <img src="">

Ben non, tu n'es pas obligé d'utiliser le même sélecteur CSS !

Logiquement, tu ne devrais pas adapter ton code HTML aux styles CSS que tu veux donner, mais l'inverse. Si tes images ne sont pas dans des paragraphes et dans un flot de contenu au sein d'une div ayant pour identifiant "contenu", tu feras ceci par exemple :

#contenu img {
	background-color:#EEEEEE;
	border:1px solid #CCCCCC;
	margin:5px 15px 15px 0px;
	padding:0.5em;
}

À toi de voir comment adapter le sélecteur CSS à ton code HTML. Tu peux aussi, par exemple, donner une classe spécifique à toutes les images que tu veux voir ainsi décorées.

[b]HTML :[/b]
<img class="cadre" alt="..." src="..." />

[b]CSS :[/b]
img.cadre {...}

Merci de cette aide supplémentaire, en effet ça m'embetait de mettre une "div", mais je pense que j'aurais laisser comme ça, mais je viens de changer et c'est plus claire pour moi ainsi. Merci beaucoup !
Modifié par QuentinRaShEr (08 May 2007 - 13:37)