Menu sur 1 image de fond décalé sur IE

Bonjour à tous !
Juste une petite question : j'ai fais très rapidement un menu (des liens de texte) posés sur une grande image de fond. Le tout calé approximativement.

Nickel sur Firefox et Safari mais décalé sur IE évidemment.

Dois-je donc préférer un empilement d'images découpées.

Ce que ça donne quand ça marche :

Le site pour ceux qui ont IE : ici
Modifié par bmael (12 Feb 2009 - 11:30)

Il y a un petit problème avec le doctype :

<!DOCT	YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Hello

Intéressant comme structure, par contre le balisage laisse à désirer (les éléments du menu dans des <p>, les intitulés calés avec des &nbsp et des "align" pour le centrage).

Je pense qu'il serait mieux d'utiliser une liste <ul>, avec des classes sur chaque <li> permettant de différencier les éléments, de leur définir un background et de les positionner (absolument ?).

<ul id="menu">
     <li class="sculptures gauche"><a href="#">Sculptures</a></li>
     <li class="bijoux droite"><a href="#">Bijoux</a></li>
     [...]
</ul>

ul#menu {
position:relative;
width:...px; /*largeur totale*/
height:...px; /*hauteur totale*/ }

ul#menu li {
width:...px; /*largeur boite*/
height:...px; /*hauteur boite*/
line-height:...px; /*centrage vertical du lien*/
text-align:center; /*centrage horizontal du lien*/
position:absolute; }

ul#menu li.gauche {
left:0; }

ul#menu li.droite {
right:0; }

ul#menu li.sculptures {
top:0;
background:transparent url(img/menu_sculptures.png) no-repeat; }

ul#menu li.bijoux {
top:...px;
background:transparent url(img/menu_bijoux.png) no-repeat; }

Modifié par BeliG (12 Feb 2009 - 11:57)

Merci pour le doctype.

OK pour utiliser une liste avec 2 classes différentes utilisées une fois sur 2.
alignement centré avec une marge à gauche puis une marge à droite alternativement. Ce sera plus propre.
Mais pour l'espacement vertical, ce sera le même sur IE que sur Firefox ? Bon il faut que j'essaie. Je vous tiens au courant.

Sinon, découper l'image de fond et la mettre en fond de chaque item avec les paddings réglés correctement ça pourrait être pas mal.

Merci encore.

bmael a écrit :
alignement centré avec une marge à gauche puis une marge à droite alternativement.

Hein ?? Le text-align:center sur le <li> se charge du centrage horizontal, pas besoin de marges

bmael a écrit :
Sinon, découper l'image de fond et la mettre en fond de chaque item avec les paddings réglés correctement ça pourrait être pas mal.

Mais c'est quoi cette histoire de padding ?


Le code que je t'ai écrit est fonctionnel, tu n'as plus qu'à rajouter tes autres éléments, fixer une taille au <ul> (largeur / hauteur totale du menu), fixer une taille aux <li> (largeur / hauteur d'un losange) et à positionner absolument les éléments (juste modifier la valeur de la propriété "top").
Modifié par BeliG (12 Feb 2009 - 12:29)

Désolé, j'ai répondu un peu vite.
Il faut que je me penche dessus pour essayer et ensuite je poserai des questions.
Je n'ai pas trop le temps pour l'instant.
Je te tiens au courant.
Merci pour votre aide.