Probleme de div qui se chevauchent

Bonjour,

je rencontre un probleme assez particulier. J'ai deux div dans lesquels j'ai une image au format png qui se chevauchent.
Ces images sont en fait des liens vers d'autres pages.
Mon soucis c'est qu'une partie de mon lien du bas (cf image) est recouverte par le div contenant le lien du haut.
après de nombreuses recherches, je ne m'en sort toujours pas. Avez-vous une idée?

Ci-joint, un visuel ainsi que le morceau du code concerné.

code :

<div id="service" class="instances">
		<a href="#"><img src="images/instances.png" width="184" height="191" border="0"  onMouseOver="this.src='images/instances2.png'" onMouseOut="this.src='images/instances.png'" alt="Instances Représentatives du Personnel" /></a>
	</div>
	<div id="service" class="applications">
		<a href="#"><img src="images/applications.png" width="184" height="190" border="0"  onMouseOver="this.src='images/applications2.png'" onMouseOut="this.src='images/applications.png'" alt="Applications" /></a>
	</div>

Bonjour,

Impossible de dire quoi que ce soit avec le peu de code que tu fournis, sans avoir les images, etc. Solution: donner l'URL d'une page en ligne (la page posant problème ou éventuellement une page de test reproduisant ce problème).

je ne peux malheureusement pas mettre ma page en ligne....

le probleme est que la partie transparent d'un PNG déborde sur l'autre PNG.

quel code vous faut-il?

je vous joint la partie CSS concernée déjà :

#service {
	position: absolute;
	font-size: 12px;
	font-weight: bold;
	color: #556e83;
}

#service a {
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
}

#service a:hover {
	font-size: 12px;
	font-weight: bold;
	color: #f88702;
	text-decoration: none;
}

.proc_direction {
	top: 115px;
	left: 20px;
}

.proc_metier {
	top: 284px;
	left: 72px;
}

.proc_support {
	top: 275px;
	left: 325px;
}

.applications {
	top: 210px;
	left: 210px;
	/*border: 1px solid #999;*/
	
}

.instances {
	top: 240px;
	left: 250px;
	/*border: 1px solid #999;*/
}

ainsi que les deux png...

C'est un mauvais découpage, voilà tout. Soit tu restreint les liens à deux zones rectangulaires ne se chevauchant pas, soit tu travailles avec une Image Map. Mais dans la configuration actuelle, ça ne pourra pas marcher. Tu aurais forcément un bloc recouvert par l'autre, et donc en lien en bonne partie non cliquable.

L'avantage de ces solutions c'est que dans les deux cas tu optimises très fortement le poids de tes images.
Modifié par Florent V. (07 May 2008 - 13:48)

ok.

merci pour cette réponse claire.
je vais étudier les deux possibilités et choisir celle qui me convient le mieu.
Modifié par manuporquet (09 May 2008 - 15:28)