Surperposition de deux images

Bonjour à tous,

je suis confonté à un problème : J'ai deux image, l'une est un graphique et l'autre qui vient ajouter des infos sur le graphique.

Mon soucis c'est que je n'arrive pas à les mettre l'une au dessus de l'autre j'ai pourtant tester le z-index...

<img src="graph.png" class="graph" /><img src="test.php" class="com" />

.graph {
	margin-right: auto;
	margin-left: auto;
	height: 192px;
	width: 512px;
	background-color: #F00;
	z-index: 1;
}
.com {
	margin-right: auto;
	margin-left: auto;
	height: 192px;
	width: 512px;
	background-color: #0F0;
	z-index: 2;
}

Modifié par webprxs (16 Jul 2010 - 17:09)

Salut,

Comme tu le dis toi même, une image vient apporter de l'information, donc elle ne doit pas se trouver appelée par le code css, mais bel et bien par le code html, avec un attribut alt renseigné pour avoir une alternative textuelle à l'image, sinon l'information ne sera pas accessible.

Oui mais pour le moment ce n'est pas mon soucis, les alt et compagnie ne sont encore renseigné, je suis en phase de conception, trouver le moyen de faire ce que je veux.. après c'est clair qu'il me reste du boulot.

Bonsoir,
transférer les propriétés de taille dans le HTML aussi.
Si le alt dépasse 80 caractères, alors il faudrait mettre en place une page de description appelée via l'attribut longdesc.

Attention, la priopriété z-index ne s'applique qu'aux élément positionnées (toutes valeur de position sauf static)

Pour le superpositionnement, plusieurs solution possibles, la plus simple étant de placer l'image de premier plan en position absolue avec un top:0 et un left:0 en n'poubliant pas d'ajouter un conteneur aux 2 images doté de position:relative pour qu'il serve de référent à l'image positionnée en absolue.

Bonjour,

a écrit :
Oui mais pour le moment ce n'est pas mon soucis, les alt et compagnie ne sont encore renseigné, je suis en phase de conception

C'est le meilleur moyen de les oublier
Modifié par knarf (16 Jul 2010 - 17:40)

en suivant tes conseils Hermann, sa fonctionne c'est parfait ^^

Merci