Image sur une image. positionnement précis !

Résolu/Fermé

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 - 4 janv. 2011 à 20:51
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 4 janv. 2011 à 22:26

Bonjour,

je suis en train de créer mon site.
- je souhaite positionner mes boutons du menu sur une image à des emplacement précis.
- mon image principale se trouve dans une class.
- dans cette class, j'insère des images(boutons) rangées également dans des class.
- mes images(boutons) sont positionnées en "absolute".
- j'ai eu le plaisir de remarqué qu'on pouvait glisser les images directement sur dreamweaver, le positionnement étant automatiquement calculé et retransmis en CSS

Mais lorsque je teste mon site sur Opera mes boutons sont décalés
Pire encore ! sur IE la position est encore différente.

Est-ce qu'il y a une procédure particulière pour faire ce que je souhaite ?

A voir également:

Image sur une image. positionnement précis !
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Comment agrandir une image - Guide
Image de manchots sur une image de plage - Forum Musique / Radio / Clip
Image ? ✓ - Forum Graphisme

2 réponses

Réponse 1 / 2

coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
4 janv. 2011 à 20:55

Bonjour !

Sur tes boutons, dans ton CSS, enlève tout ce qui est padding et margin. À la place, puisque tu as un position:absolute;, utilise les attributs left et top.

C'est le problème le plus courant entre les browsers, l'interprétation différente des margins et paddings.

Réponse 2 / 2

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 4
4 janv. 2011 à 21:35

salut coeus !

je ni padding, ni margin dans mes class="bouton"

mais un text-align:center; pour ma class="image principale"

bah ouais j'aimerai que mon image soit centrée.
j'ai viré text-align:center; et là ça marche.
ça marche, mais qu'à moitié car je souhaite une image principale centrée.

là j'ai pas trop d'idée. à moins que je tente de mettre mon image principale directement en background.
j'essaie !

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 4
4 janv. 2011 à 21:38

ah oui mais non !
si je mets mon image principale en background, le positionnement des boutons ne se feront plus en fonction de mon image principale mais en fonction de l'écran.
donc soucis.

coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
4 janv. 2011 à 21:40

Si tu veux centrer les trucs, la meilleure chose à faire est de mettre un margin:0 auto; sur l'élément à centrer. Aussi, sur l'élément et sur son contenant, laisse un position:relative; ça ne nuit jamais ;-)

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 4
4 janv. 2011 à 21:47

désolé je n'ai peut-être pas compris ta réponse.
j'ai tenté ça mais l'image n'est pas centrée

.image principale {
position: relative;
margin: 0 auto;
}

.bouton1{
position: absolute;
left: 600px;
top: 133px;
}

coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
4 janv. 2011 à 21:52

.image principale {
Je ne sais pas si c'était voulu, mais il ne faut jamais mettre un espace dans un nom de classe... :-S

Essaie de régler ça, c'est peut-être aussi simple...

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 4
4 janv. 2011 à 21:58

non non ! je t'ai mis des noms factis pour tu comprennes bien.
il n'y a pas d'espace dans mes vrais noms.
mais merci pour ce détail important

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)

Impossible de télécharger photos messenger

PIX

sortir des réseaux sociaux

Dechiffrer une image caché