[Résolu] Positionnement CSS

Bonjour !

Je dispose d'un soucis sur mon CSS, notamment concernant le positionnement de plusieurs liens disposés sur un background en image.

Je m'explique : je dois concevoir un jeu qui permet de découvrir un château en cliquant sur différentes parties d'un couloir par exemple, avec des portes, des fenêtres...
Pour cela, je dois disposer des liens sur chacune des portes pour permettre à l'utilisateur de naviguer dans le château.

Ainsi, par manque de temps je pense utiliser une technique assez barbare mais qui marche (en théorie), placer des balises <a> en position:absolute; qui contiennent des <span>, en position:absolute;, pour définir une largeur et une hauteur au lien (120x120px), le tout sur une <div> conteneur en position:relative;.

Voici mon XHTML :

<div id="couloir">
	<div id="cheminee">
		<a href="index.php?p=4" title="Mince ! Tu m'as trouvé !"><span></span></a>
	</div>
	<div id="porte-couloir">
		<a href="index.php?p=5" title="Let's go Space Marines"><span></span></a>
	</div>
</div>

Et mon CSS :

#couloir {width: 948px; height:711px; position:relative; background:url(../images/couloir.jpg) no-repeat;}

#cheminee,#porte-couloir {position:absolute;}
#cheminee span,#porte-couloir span {width:120px; height:120px; position:absolute;}

J'ai écumé votre site pour voir où était mon erreur mais j'avoue que je suis face à une impasse.
Ai-je mal conçu mon positionnement CSS ?

Je vous remercie d'avance pour le temps que vous me consacrerez.
Modifié par Ysu (16 Dec 2010 - 14:56)

Bonjour,

Il faut juste donner un width et un height à tes balises <a>. Après tu peux même enlever toutes tes div cela marchera pareil.

P.S. Des liens vides ne sont pas recommandés pour l’accessibilité. Les balises <map> et <area> guère plus, mais elles te faciliteraient grandement le travail.
Modifié par adrien881 (16 Dec 2010 - 14:45)

Slt, pour pouvoir positionner tes blocs, tu devrais utiliser "top", "left", "right", "bottom" sur les spans.
genre :

#cheminee span {top:0px; left:0px}
#porte-couloir span {top:0px; left:125px;}

Modifié par 513_ (16 Dec 2010 - 14:55)

Ok ça fonctionne. Quel erreur de débutant, ça doit être la fatigue accumulée J'avais besoin d'un point de vue extérieur pour comprendre où était l'erreur.

Concernant l'accessibilité, j'en prends pas compte sur ce projet-ci. C'est uniquement à caractère pédagogique et il n'a pas vocation a être diffusé sur le Web.

Sinon, je te remercie bien adrien881.

Bonne journée.

513_ a écrit :
Slt, pour pouvoir positionner tes blocs, tu devraient utiliser &quot;top&quot;, &quot;left&quot;, &quot;right&quot;, &quot;bottom&quot; sur les spans.
genre :

#cheminee span {top:0px; left:0px}
#porte-couloir span {top:0px; left:125px;}

Oui, je l'utilise mais mon problème venait plutôt de la taille de mes liens, qui ne prenait pas en compte la taille du <span> qu'il contenait.

Merci pour ta réponse toutefois. Je marque ce sujet comme résolu.

Bonne journée.