18041 sujets

Questions générales et questions de débutants

Insertion image

Bonjour, lorsque j'insère une image en CSS je crée un style qui pilote cette image, jusque là je comprends.

Exemple :

#img {
	border: 1px solid #000000;
	width: 143px;
	height: 97px;
	margin-left: auto;
	margin-right: auto;
}

Je demande donc une bordure, image centrée, et je spécifie les dimensions de mon image.
Mais si j'ai plusieurs images de dimensions différentes dans ma page, ça veut dire qu'il faut que je fasse un style pour chaque image ?
Existe t-il une autre méthode qui demanderait la même chose pour toutes les images ?
A +
Bonsoir,

Oui, il suffit d'appliquer toutes les propriétés que tu veux à l'élément img.
Dans ton cas, cela donnerai ceci :


img {

	border: 1px solid #000000;

	width: 143px;

	height: 97px;

	margin-left: auto;

	margin-right: auto;

}


Le code css ci-dessus appliquera toutes ces propriétés à toutes tes images.
Bah parceque peut-être que je fais une erreur dans mon code.
Moi je pensais qu'il fallait coder comme ci-dessous pour insérer une image que l'on voulait Centrer, et avec une bordure.

#img {
	border: 1px solid #000000;
	width: 143px;
	height: 97px;
	margin-left: auto;
	margin-right: auto;
}





<div id="img"><a href="#"><img src="images/Plume.jpg" width="143" height="97" border="0"  title="Nous envoyer un commentaire" alt="Venise" /></a></div>


Est-ce que l'erreur ne viendrait pas du fait que je crée une boîte DIV ?

A +
Hum, à mon sens il y a plusieurs erreurs.

1) Il ne faut pas mélanger styles "dans le html" et CSS. Choisis l'un des deux Smiley cligne
2) Tu n'as pas besoin de spécifier la hauteur et la largeur d'une image que tu ne souhaites pas redimensionner. De même, son contenant s'ajustera sans que tu ne lui demandes rien.
3) Tu appliques le même style à la fois à l'image et au div, c'est comme qui dirait... redondant.

Pourquoi as-tu besoin du div ? Parce que le margin auto ne fonctionne que sur un élément de type bloc. Or, une image (ou un lien) est de type inline. Dans ton cas, il suffirait d'afficher l'image en bloc.


<a class="centre" href="#"><img src="images/Plume.jpg"  title="Nous envoyer un commentaire" alt="Venise" /></a>




.centre {display: block; border: 1px solid #000000; margin: 0 auto;}


Pas testé mais ça devrait fonctionner Smiley cligne
Ok et merci pour les explications. En fait, mon erreur venait bien du fait que je créais une boîte pour IMG alors qu'il suffit de prendre la main sur cet l'élément IMG.
Et surtout ne pas spécifier de dimensions de manière à appliquer les mêmes paramètres pour d'éventuelles images de dimensions différentes.


PS : une autre question cette fois-ci relative aux balises ALT et TITLE pour les liens sur les images.
Doit-on mettre les 2 balises pour que lLa validation du code XHTML soit acceptée ?

Renato...
renato a écrit :

PS : une autre question cette fois-ci relative aux balises ALT et TITLE pour les liens sur les images.
Doit-on mettre les 2 balises pour que lLa validation du code XHTML soit acceptée ?

Renato...


Non. L'attribut alt est obligatoire pour les images, mais il ne doit pas forcément être rempli. Il ne doit l'être que lorsque l'image est porteuse de contenu. C'est le cas par exemple des logos, ou de toute image contenant du texte. Ou encore, dans les portfolios, des photos que l'on souhaite présenter. Le alt remplacera l'image si elle ne peut être affichée pour une raison ou une autre. Dans le cas d'une image-lien, il est important si l'image en question n'est pas accompagnée de texte au sein du même lien.

En revanche, pour une image purement décorative, le alt peut être vide (alt="").
Sujet clos
Aller à