Positionner une image: un div ou pas?

Bonjour à tous! Je suis entrain d'apprendre le css, et j'ai une petite question:

pour positionner une image dans un div parent, est il mieux de:

créer un id pour l'image:

#img_droite_logo{
margin:0px;
padding:0px;
}

puis

<img id="img_droite_logo" src="bat_index.jpg" width="200" height="114" />

créer un div pour positioner l'image:

#img_droite_logo{
margin:0px;
padding:0px;
}

puis

<div id="img_droite_logo">
<img src="bat_index.jpg" width="200" height="114" />
</div>

???
Merci pour votre réponse!

Bonjour & bienvenue, Battista.

Tout dépend du contexte A quoi sert cette image ? Apporte-t-elle un contenu, une information à ton visiteur ? Si ce n'est pas le cas, l'image ne doit pas être dans le code HTML, div ou pas, mais dans la feuille de style, où tu pourras facilement la positionner avec la propriété background ...

A priori, inutile de créer un <div> ne contenant qu'une seule image, seulement pour du positionnement. Cependant, il y a des endroits où tu n'as pas le droit de placer une image seule (notamment dans body) et où tu es obligé d'ajouter un conteneur ...

Bref, il nous faut plus de détails. Si possible un exemple en ligne

Il s'agit d'un menu situé sur la droite du site.
On trouve:

une image
une série de <li> contenus dans un <ul>
une autre image

ce qui donne ceci:



ces images ne contiennent pas d'nformations à proprement parler, celle du haut sera un logo, et celle du bas une image avec un lien renvoyant vers index.html

J'ai donc fait la chose suivante:

#img_droite_logo{
background-image:url(images/bat_index.jpg);
background-repeat:no-repeat;
width:200px;
height:114px;
}

#img_droite_home{
background:url(images/home.jpg);
background-repeat:no-repeat;
width:80px;
height:72px;
margin:30px;
padding: 0px;
}

avec en html

<div id="img_droite_logo">&nbsp;</div>
	<ul id="liens_droite">
		<h3>Galeries</h3>
			<li><a href="voyage.html">Le voyage</a></li>
			<li><a href="voyage.html">Ma chambre</a></li>
			<li><a href="voyage.html">Hotel</a></li>
			<li><a href="voyage.html">Bamako</a></li>
			<li><a href="voyage.html">Mes proches</a></li>
	</ul>
<div id="img_droite_home">&nbsp;</div>

Je vous remercie pour votre réponse rapide, ça marche très bien! J'ai encore 2 questions:

Ma structure est-elle correcte?
Le &nbsp; est il indispensable entre les balises div?
Modifié par Battista (03 Jun 2007 - 00:05)

a écrit :
j'ai mis l'image en background d'un div! Ca marche très bien!

Que ce soit bien clair, j'ai dit que l'image devait être placée en background si elle était décorative !

Ce n'est pas le cas d'un logo ou d'un lien ! Un logo est porteur d'un information (nom de la boîte, "identité visuelle"), tout comme un lien (destination). Tes 2 images doivent donc se trouver dans le code HTML, et non dans la feuille de style.

Dans ton cas, si tu as besoin d'un positionnement absolu, tu peux utiliser directement les images sans ajouter de conteneur (puisqu'elles en on déjà un utilisable). Inutile d'ajouter un div qui ne fait qu'alourdir ton code sans nécessité ...

salut,

si ta deuxieme image va servir pour faire un lien vers ta page d'index je dirais que au contraire elle est porteuse d'information.

et de toute façon tu vas etre ennuyée pour associer ton lien avec ton image si tu la mets en background.

sinon le &nbsp; n'aurait pas été/n'est pas nécessaire.
Modifié par CPascal (03 Jun 2007 - 00:13)

Merci beaucoup pour vos réponses, j'ai rectifié le tir!