Problème de positionnement ?

Bonjour,

A l'intérieur d'une div (avec une image en background), je souhaite disposer des images réactives (dans l'exemple, minicross.png). Problème : le margin-left est ok, mais pas le margin-top : l'image reste invariablement collée tout en haut.

HTML

<div id="plan">
<a class="minicross" href="#"><img src="images/minicross.png" width="95" height="82"<span><img src="images/toph_minicross" width="287" height="206"</span></a>
</div>

CSS

#plan {
	background: url(images/planferme.png) no-repeat;
	height: 460px;
	width: 536px;
}

a.minicross {
	margin-top: 172px;
	margin-left: 49px;
	width: 95px;
	height: 82px;
}

Merci de m'aider.

Salut,

tu appliques des propriétés à ton <a> comme s'il était un élement block.

comme <a> est une balise inline il faut rajouter display:block; dans .minicross.

pascal
Modifié par CPascal (09 Jun 2007 - 16:41)

Avec display:block, c'est la div#plan (et son background) qui "descend", et minicross.png reste en bordure haute du background.

J'ai mis float:left; et minicross.png se positionne correctement (...). MAIS la grande image toph_minicross.png entre <span> et </span> ne s'affiche pas.

HTML

<div id="plan">
<a class="minicross" href="#"><img src="images/minicross.png" width="95" height="82"/><span><img src="images/toph_minicross" width="287" height="206"/></span></a>
</div>

CSS

#plan {
	background: url(images/planferme.png) no-repeat;
	height: 460px;
	width: 536px;
}

a.minicross {
	float: left;
	margin-top: 72px;
	margin-left: 48px;
	width: 95px;
	height: 82px;
}

a:hover.minicross {
	background: none;
}

a.minicross span {
	display: none;
}

a:hover.minicross span {
	display: inline;
	position: absolute;
	top: 280px;
	left: 80px;
	width: 287px;
	height: 206px;
}

Problème de synthaxe ?
Merci encore

ben sous ie6 et FF je vois les cadres d'images vides (n'ayant pas d'images appelées comme les tiennet ) apparaitre quand la souris passe sur la premiere image. c'est ce que tu souhaitais?

tu as quel navigateur?
Modifié par CPascal (09 Jun 2007 - 18:25)

<img src="images/toph_minicross" width="287" height="206"/>

1. Il manque l'extension de l'image.
2. Penser à mettre une espace devant le /> final.

a:hover.minicross {
	...
}

Mauvais sélecteur, à priori. Ça devrait être l'inverse :

a.miniscross:hover {...}

Remarque, pas sûr que ça gêne les navigateurs...

Ok. Tout fonctionne correctement. Voilà comment faire une map ...sans map.
Car j'ai eu de grosses difficultés avec les area, avec lesquelles il semble difficile d'associer le survol de la souris, en évitant le javascript. Bon, je ne suis pas un utilisateur "intégriste" des CSS, mais j'aime bien.

Merci+++

HTML

<div id="plan">
<a class="minicross" href="#"><img src="images/minicross.png" width="95" height="82"/><span><img src="images/toph_minicross.png" width="287" height="206" /></span></a>
</div>

CSS

#plan {
	background: url(images/planferme.png) no-repeat;
	height: 460px;
	width: 536px;
}

a.minicross {
	float: left;
	margin-top: 72px;
	margin-left: 48px;
	width: 95px;
	height: 82px;
	text-decoration: none;
}

a:hover.minicross {
	background: none;
}

a.minicross span {
	display: none;
}

a:hover.minicross span {
	display: inline;
	position: absolute;
	top: 341px;
	left: 244px;
	width: 306px;
	height: 218px;
}

(CPascal). Le code fonctionne avec FF(mon navigateur favori) et IE6.

(Florent V.). D'après ce que j'ai vu ici et là, l'une ou l'autre forme du sélecteur ne gêne pas les navigateurs.

Merci encore.

jide a écrit :
Voilà comment faire une map ...sans map.

Attention toutefois : les image maps sans map, à grand renfort de CSS, posent souvent des problèmes d'accessibilité. Les image maps sont un peu plus « old school » que les bidouillages CSS, mais ne sont pas pour autant dépréciées ou moins pertinentes.
NB : penser au texte alternatif via l'attribut alt sur les area.

jide a écrit :
Car j'ai eu de grosses difficultés avec les area, avec lesquelles il semble difficile d'associer le survol de la souris, en évitant le javascript.

Pas de raisons d'éviter le Javascript si c'est pour des effets décoratifs ou non nécessaires pour l'accès au contenu et fonctionnalités. Par contre, ça demande effectivement deux ou trois notions de Javascript.

Florent V. a écrit :

Attention toutefois : les image maps sans map, à grand renfort de CSS, posent souvent des problèmes d'accessibilité.

Les images MAP sans MAP, avec ou sans dépense d'énergie débordante en javascript, ne passent aucune validation d'aucune méthode d'accessibilité, au niveau minimal. Une image MAP avec MAP est accessible en 10 secondes de développement. Faites du Web, pas du standard sexy
Modifié par Laurent Denis (10 Jun 2007 - 00:48)

Messages parfaitement entendus.

a écrit :
Laurent Denis a écrit :

Faites du Web, pas du standard sexy

...la formule est excellente