Des div dans des div , probléme de coordonnées

Bonjour ,

J'ai un souci de mise en page , je m'explique , j'ai crée une div qui affiche mon image de fond , et ensuite deux div : 1 qui place une lien a un endroit précis sur l'image et 1 qui place une image à un endroit précis.

.bloc_news étant mon image
.archives étant mon emplacement de lien
.images_news étant mon image à placer.

Voila le code :

Dans mon fichier .css

a écrit :
.bloc_news { background-image:url(../images/news/news.png); width: 598px; height: 144px;float:left;}
.news_img {margin-top:9px;margin-left:422px;background-image:url(../images_mod/image_news.jpg);}
.archives {margin-top:122px;margin-left:280px;font-size:10px;font-weight:bold;}

Dans mon fichier php :

a écrit :
<div class="bloc_news"><div class="news_img"><div class="archives"><a href="#">Consulter les archives</a></div></div></div>

Quand je met pas la balise news_img mon lien se place au bon endroit dans mon image de fond , mais des que j'essaye de rajouter l'image rien à faire ca décalle tout.

Merci de votre aide
Modifié par ricard (15 Dec 2006 - 14:33)

Bonjour Ricard,
Avec un nom comme ça on a tout de suite envie de t'aider

Je n'ai pas trop compris ou tu voulais placer tes blocs mais je pense que ton problème vient des margin qui s'appliquent à chaque fois à la div supérieure.

Voilà le code que je 'suggère' pour le CSS (le php ne change pas)

.bloc_news { width: 598px; height: 144px;float:left; background-image: url(ton image);}
.news_img {display:block; position:absolute; top:9px; left:422px; height:142px; background-image: url(ton image);}
.archives {display:block; position:relative; top:122px; font-size:10px;font-weight:bold;}

Dit moi si ça correspond à ce que tu cherchais. Et dans tous les cas je pense que tu auras moins de difficultées à positionner tes blocs qu'avec les margins.

Bon courage

Gaël

ricard a écrit :
Quand je met pas la balise news_img mon lien se place au bon endroit dans mon image de fond , mais des que j'essaye de rajouter l'image rien à faire ca décalle tout.

Ben euh... c'est normal, non ?

Tu demandes à ton bloc .archives de laisser une marge de 122px entre lui et l'élément précédent. S'il n'y a pas d'élément précédent, ça sera 122px à partir du bord supérieur du bloc parent (sauf cas de fusion des marges). S'il y a un élément précédent, ça décalera donc d'autant. Rien de bien surprenant dans cette histoire.

Une petite révision sur le positionnement CSS serait peut-être utile ?

Sinon, si tu tiens à positionner des éléments au pixel près dans un bloc parent, il faudra peut-être passer par le positionnement absolu (à voir, en fonction des besoins).

gaelgerard a écrit :
Dit moi si ça correspond à ce que tu cherchais. Et dans tous les cas je pense que tu auras moins de difficultées à positionner tes blocs qu'avec les margins.

À priori, le positionnement relatif utilisé dans ton exemple ne sert à rien : les marges sont aussi efficaces dans ce cas. Par contre, il faudra positionner le conteneur (à priori en relatif), pour qu'il puisse servir de référent au positionnement absolu de div.news_img