Menu horizontal en css compatible IE et Firefox

Question

matissed

14 Nov 2014 à 17:21

Bonjour à tous.

je ne suis pas webmaster ni informaticien.
Je prépare un mini-site pour ma soeur et j'ai lu les différents sujets sur les feuilles de style en CSS.
mon soucis est le suivant:

mes pages web s'affichent bien avec chrome, mais mon menu n'a pas le même rendu avec IE et Firefox. Mes boutons changent d'aspect, l'image gif ne se centre plus horizontalement à l'intérieur du bouton.

voici ma feuille de style

html
body {
background-image:
url('images/ciel2.jpg');

}

#menu {
height: 30px
margin: 0 ;
padding: 0 ;
list-style: 0 ;
text-align : center ;

}

#menu li {
display:inline-block;
vertical-align:top;
width: 190px ;
height :60px ;
border-radius: 12px ;
border: 2px solid #600 ;
margin-right: 1px;
color: #fff ;
background: #669999 ;
list-style: none;
}

#menu li a {
display: inline-block ;
background: #669999 url('images/bouton.gif') no-repeat left center ;
color: #fff ;
line-height: 1em ;
text-align: center ; font-style:normal; font-variant:normal; font-weight:normal; font-size:1em; font-family:Trebuchet MS, Arial, sans-serif; padding-left:0; padding-right:0; padding-top:4px; padding-bottom:4px
}
#menu li a:hover,
#menu li a:focus,
#menu li a:active {
background: #336666
url('images/bouton.gif')
no-repeat right top ;
}

#contenu2{
margin-left:10px;
font-size : 100%;
font-family : Verdana, comic, Arial, Helvetica, Geneva, sans-serif;
color : green;

}
#menubas {
align: center;
background-color:#CCCCCC;
}
et mon menu dans la page html

<ul id="menu">

<li><a target="_blank" href="gite.htm" title="Découverte du Gite"> Découverte du gite</a></li>
<li><a target="_blank" href="region.htm" title="A voir dans La Région"> A voir dans la région</a></li>
<li><a target="_blank" href="manifestations.htm" title="Les manifestations 2015"> Manifestations 2015</a></li>
<li><a target="_blank" href="photos.htm" title="Vos photos du gites"> Vos photos du gite</a></li>
<li><a target="_blank" href="contact.htm" title="Réservation, Contact"> Réservation, Contact</a></li>

</ul>

et voici la page
http://delaplacem.fr/wildenguth/index.htm

Pouvez vous m'aider à solutionner ce problème .

Merci d'avance
Matissed

~~supprimé~~

14 Nov 2014 à 17:56

Bonjour matissed,

En jettant un rapide coup d'oeil, je te propose les modifications suivantes :

Sur ton HTML :

<ul id="menu">

<li><a target="_blank" href="gite.htm" title="Découverte du Gite"> Découverte du gite</a></li><!--
--><li><a target="_blank" href="region.htm" title="A voir dans La Région"> A voir dans la région</a></li><!--
--><li><a target="_blank" href="manifestations.htm" title="Les manifestations 2015"> Manifestations 2015</a></li><!--
--><li><a target="_blank" href="photos.htm" title="Vos photos du gites"> Vos photos du gite</a></li><!--
--><li><a target="_blank" href="contact.htm" title="Réservation, Contact"> Réservation, Contact</a></li></ul>

Les commentaires conditionnels pour palier aux problèmes d'espacement des éléments Inline-Block. Voir cet article

D'autre part, pour ton Css, je te propose de jouer ainsi sur les marges des éléments Li:

#menu li {
display:inline-block;
vertical-align:top;
width: 190px ;
height :60px ;
border-radius: 12px ;
border: 2px solid #600 ;
margin:AUTO 1PX;
color: #fff ;
background: #669999 ;
list-style: none;
}

Testé sous firefox ! Je te laisse le code sur CodePen, tu pourras y faire tes essais.

Si j'ai plus le temps, je tenterais de me plonger un peu plus sur ton sujet.

A bientôt.

Zelalsan

14 Nov 2014 à 18:44

salut,
tu n'as pas spécifié la version de IE concernée. Si tu parles de IE7, tu peux dès à présent laisser tomber ce navigateur. Si c'est bien de cette version dont il s'agit, il fallait remplacer le "display:inline-block" par un "display:inline" (uniquement pour IE7).
Si non, tu peux améliorer ton HTML en le validant, pour comprendre certaines erreurs commises.
Pour ma part, je ne sais pas s'il y a une réelle utilité à mettre des "title" reprenant le contenu dans tes liens et tu verras que les "target=_blank" sont extrêmement gênant et généralement déconseillé.

matissed

14 Nov 2014 à 19:19

bonsoir à tous les deux et merci pour votre célérité!

pour IE c'est le 11.... je ne l'utilise pas, mais comme certains vieux ( comme moi!) sont attachés à Microsoft, j'essaye de faire en sorte que ça passe aussi sous IE.

mais mon problème est le même avec le dernier Firefox.

voici la capture avec Chrome

et la capture avec IE11 et firefox

j'ai changé le margin du li et ça n'améliore pas.
C'est mon image gif de bouton qui change de background au survol qui n'apparaît bien qu'avec chrome.
Pour Firefox et Ie, l'image n'occupe qu'une ligne et elle est tronquée dans sa partie basse.

je vais tenter de valider mon html mais je ne me faits par trop d'illusions...
Merci pour votre aide
matissed

Zelalsan

14 Nov 2014 à 23:48

Dans ce cas les réponses précédentes n'ont rien à voir. Il n'était pas évident de tout de suite comprendre le problème.
Pour tout dire, le problème se pose également sur Chrome.
Il s'agit tout bêtement du "display" de la balise <a>. Par défaut, les liens sont de type enligne, il suffit donc de leur donner une rendu de type bloc, puis de leur assimiler une hauteur équivalente à "100%" de celle du parent.


#menu li a {
   display: block;
   height: 100%;
}

Si le texte doit être centré verticalement, il faudrait passer par un autre type de positionnement qu'est le "table-cell".
Si on est sûr que le texte ne sera jamais affiché sur deux lignes, on peut tout simplement utiliser la propriété "line-height" qui doit être à peu près égale à la hauteur du parent (soit 60px dans ce cas).

~~supprimé~~

15 Nov 2014 à 06:51

Zelalsan a écrit :
tout simplement utiliser la propriété "line-height"

Voilà ce qui me manquait. Merci Zelalsan !

Matissed, tu peux consulter ce code sur CodePen, tu constateras que ton problème est résolu (bien sûr remplacer le background:pink par ton Gif).

Bon week-end !

Zelalsan

15 Nov 2014 à 07:48

Je t'en prie.
Matinal le Greg ^^ ...
ou fêtard Smiley lol

matissed

15 Nov 2014 à 16:57

Bonjour Zelalsan et Greg_lumière
et merci à tous les deux pour votre aide.

je progresse doucement et le CodePen est un outil génial .

Mais je ne suis toujours pas arrivé à mes fins.

Je souhaite des boutons :
1/ une forme rectangulaire avec un arrondi
2/dans cette forme mon image bouton.gif évidé dans sa partie basse qui reste affiché en permanence
3/ à travers ce git on voit le fond de la forme et c'est ce fond de couleur qui change au survol ou si visité
4/le texte du lien sur deux ligne,centré horizontalement et verticalement au dessus du gif

Avec mon code CSS modifié ( voir plus bas), le bouton. gif n'apparait qu'au survol derrière le texte du lien

voilà ce que souhaiterai :

Mon CSS

#menu {
display: inline-block;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-size:1em; font-family:Trebuchet MS, Arial, sans-serif;
width:100%;
margin:auto;
padding: 0 ;
list-style: 0 inside ;
text-align : center ;

}

#menu li {
display: inline-block;
margin:0 1EM;
color: #fff ;
background: #669999 ; // inutile si tu utilises un Gif dans A
border: 2px solid #600 ;
list-style: none;
overflow:hidden;
width: 190px ;
height :60px ;
border-radius: 12px ;
}
#menu li a {
display:inline-block;WIDTH:100%;
background:bouton.gif;
line-height:60px;
PADDING:0;
color: #fff ;
}

#menu li a:hover {
background: #009999
url('images/bouton.gif') no-repeat right top ;
}
#menu li a:focus {
background: #336666
url('images/bouton.gif') no-repeat right top ;
}
#menu li a:active {
background: #336666
url('images/bouton.gif') no-repeat right top ;
}

puis-je persévérer dans cette voie et espérer un affichage correct avec la majorité des navigateurs utilisés?
merci pour votre aide
matissed
Modifié par matissed (16 Nov 2014 - 09:35)

~~supprimé~~

16 Nov 2014 à 19:17

Bonsoir à tous,

Je vais reprendre tes contraintes Matissed afin de voir si j'ai bien compris.

matissed a écrit :

1/ une forme rectangulaire avec un arrondi

En appliquant le Border-Radius sur l'élément LI et en appliquant à ces mêmes éléments un Overflow:Hidden, tes boutons seront arrondis et rien n'en sortira (il me semble avoir mis celà comme ça dans CodePen).

matissed a écrit :

2/dans cette forme mon image bouton.gif évidé dans sa partie basse qui reste affiché en permanence

Dans ce cas l'idéal est un Gif dont le bas est transparent (le contraire serait une image plus petite que le bouton). Cette image, et je vois que c'est le cas, est à appliquer sur l'élément A en Background ainsi on répond à moitié au point n°4, soit avoir le texte devant l'image.

matissed a écrit :

3/ à travers ce git on voit le fond de la forme et c'est ce fond de couleur qui change au survol ou si visité

Le fond de couleur qui change au travers du Gif risque d'être compliqué. Le mettre par exemple sur l'élément LI est tout bonnement impensable. En effet, il n'y a aucun sélecteur en Css capable de remonter le DOM (cibler un élément parent). Par contre tu peux simuler un boite.
Pour ce faire à chaque élément A tu vas créer un objet par un :Before dont le contenu sera vide et dont les dimensions devront faire celle du bouton. En positionnant cette boite en position Absolute à Top:0 et Left-0, celle-ci va se superposer à celle du lien (tu devras peut-être positionner explicitement tes LI en position relative). Maintenant à cette boite tu applique la couleur de fond et tu la fais changer en personnalisant A:HOVER:BEFORE.

matissed a écrit :

4/le texte du lien sur deux ligne,centré horizontalement et verticalement au dessus du gif

Il me semble que Zalalsan a répondu à celle-ci.

matissed a écrit :
Mon CSS

#menu {
display: inline-block;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-size:1em; font-family:Trebuchet MS, Arial, sans-serif;
width:100%;
margin:auto;
padding: 0 ;
list-style: 0 inside ;
text-align : center ;

}

#menu li {
display: inline-block;
margin:0 1EM;
color: #fff ;
background: 0 NONE ;
border: 2px solid #600 ;
list-style: none;
overflow:hidden;
width: 190px ;
height :60px ;
border-radius: 12px ;
}
#menu li a {
display:inline-block;WIDTH:100%;
background:URL("bouton.gif");
line-height:60px;
PADDING:0;
color: #fff ;
}

#menu li a:hover {
background:url('images/bouton.gif') no-repeat right top ; // Si tu veux une couleur de fond pour prévoir les cas où l'image ne serait pas chargée, il faut doubler la commande background en plaçant celle en couleur avant celle en image comme si dessous:
}
#menu li a:focus {
BACKGROUND:couleur; background: url('images/bouton.gif') no-repeat right top ;
}
#menu li a:active {
background:url('images/bouton.gif') no-repeat right top ;
}

matissed a écrit :
puis-je persévérer dans cette voie et espérer un affichage correct avec la majorité des navigateurs utilisés?

Bien sûr ! Tu n'en es plus très loin.Bon courage

Pour répondre à

Zelalsan a écrit :
Matinal le Greg ^^ ...
ou fêtard Smiley lol

Quand je fais la fête, le lendemain c'est pas dans le flux qu'elle est ma tête... Smiley smile

matissed

17 Nov 2014 à 09:12

Bonjour et merci pour vos suggestions...

n'ayant pas bien compris la création de l'objet "before", je reste pour l'instant sur un compromis acceptable avec ce css :

#menu {
display: inline-block;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-size:1em; font-family:Trebuchet MS, Arial, sans-serif;
width:100%;
margin:auto;
padding: 0 ;
list-style: 0 inside ;
text-align : center ;

}

#menu li {
display: inline-block;
margin:0;
color: #fff ;
border: 2px solid #600 ;
list-style: none;
overflow:hidden;
width: 190px ;
height :60px ;
border-radius: 12px ;
}

#menu li a {
display:inline-block;WIDTH:100%;
background:bouton.gif;
line-width : 190px ;
PADDING:0;
color: #fff ;
}

#menu li a:hover {
background: #009999 url('images/bouton.gif') no-repeat;
}
#menu li a:focus {
background: #336666 url('images/bouton.gif') no-repeat;
}
#menu li a:active {
background: #003366 url('images/bouton.gif') no-repeat;
}

#contenu2{
margin-left:10px;
font-size : 100%;
font-family : Verdana, comic, Arial, Helvetica, Geneva, sans-serif;
color : green;

}
#menubas {
align: center;
background-color:#CCCCCC;
}

Bonne journée

matissed

5 Dec 2014 à 18:24

Bonjours à tous,

et Merci d'abord à Greg_lumière qui m' a permis d'arriver exactement à ce que je souhaitais : un fichier css avec un affichage identique avec chrome, IE explorer et Firefox

voici le texte définitif du CSS

html
body {
background-image:
url('images/foret.jpg');

}
#menu {display:inline-block;font-style:normal;font-variant:normal;font-weight:normal;font-size:1em; font-family:trebuchet MS, arial, sans-serif;
width:100%;margin:auto;padding: 0 ;list-style: 0 inside;text-align : center ;}

#menu li {display:inline-block;margin:0 1EM;color: #fff;border: 2px solid #600;list-style: none;overflow:hidden;border-radius: 12px ;}

#menu li a {position:relative;display:inline-block;line-height:60px;width: 190px ;
PADDING:0;color: #fff;background:url('http://delaplacem.fr/wildenguth/images/bouton.gif') No-repeat;}

#menu LI A:before {content:"";position:absolute;background:#336699;width:30PX;width:100%;height:100%;left:0;z-index:-1}
#menu li a:hover, #menu li a:focus, #menu li a:active {//rien}

#menu li a:hover:before, #menu li a:active:before, #menu li a:focus:before {background:#339966;}
#menu li a:visited:before{background:#336666;}

#contenu{
margin-left:0px;
font-size : 100%;
font-family : Verdana, comic, Arial, Helvetica, Geneva, sans-serif;
color : #000066;
}

#contenu2{
margin-left:10px;
font-size : 100%;
font-family : Verdana, comic, Arial, Helvetica, Geneva, sans-serif;
font-color : green;

}
#menubas {
align: center;
background-color:#CCCCCC;
}

et le résultat:

http://delaplacem.fr/wildenguth/index.htm

MERCI ENCORE§

Sujet clos

CSS et mise en forme, CSS3

Menu horizontal en css compatible IE et Firefox