28172 sujets

CSS et mise en forme, CSS3

[Résolu]Menu horizontal sous Firefox, Opera, Safari mais pas sous IE !

Pages :
Salut tout le monde,
Je suis en train de développer un site Internet avec un menu horizontal... Je suis très content du résultat sauf sur Internet Explorer... Voilà mon problème :
Sous IE:
upload/11192-Image1.png

Sous FF:
upload/11192-Image2.png

Le code :
Page html :

...

<link rel="stylesheet" href="style.css" />
<!--[if lt IE 7]>
<style type="text/css">
#menus  a {
	display:inline-block;
    
}
#menus {
	text-align:center;
}
#menus ul li {
	width: 100px;
	display:inline;
/* necessaire pour un menu horizontal */
}
</style>
<![endif]-->
</head>
<body>

<div id="menus">
<ul id="menu">
 <li><a href="?page=accueil" title="Accueil" class="accueil">&nbsp;</a></li>
 <li><a href="?page=apropos" title="&Agrave propos" class="apropos">&nbsp;</a></li>
 <li><a href="?page=males" title="M&acirc;les" class="males">&nbsp;</a></li>
 <li><a href="?page=femelles" title="Femelles" class="femelles">&nbsp;</a></li>
 <li><a href="?page=chatons" title="Chatons" class="chatons">&nbsp;</a></li>
 <li><a href="?page=conditions" title="Conditions" class="conditions">&nbsp;</a></li>
 <li><a href="?page=contact" title="Contact" class="contact">&nbsp;</a></li>
</ul>
</div>
...


Page CSS : 

...
#menus {
	width: 100%;
	background: url(images/bg1.png) repeat-x;
	height: 45px;
	text-align: center;
	display: table;
}

#menus ul {
	margin:0 auto;
	list-style-type:none;
	height:45px;
	display:table;
}

#menus ul li {
	display:table-cell;
	vertical-align: middle;
}
...

Modifié par MiluX (28 Dec 2008 - 22:20)
Bonjour,

Alors ton menu horizontal fonctionne ainsi:
- les éléments LI sont en display: table-cell, c'est à dire affichés comme des cellules de tableau;
- pour toutes les versions d'Internet Explorer, tu demandes du display: inline-table.

Sauf que:
- Internet Explorer 8 supporte display:table-cell, donc adresser ce correctif CSS à toutes les versions d'Internet Explorer sans discrimination est une bêtise;
- Internet Explorer 6 et 7 ne supportent pas display:table-cell, mais à ma connaissance ils ne supportent pas plus la valeur "inline-table".

Tu as trouvé cette technique dans un article en particulier?
MiluX a écrit :
En fait ce n'est pas display:inline-table mais display:inline qu'il y a en réalité dans le code...

Et donc dans ton code il y a bien inline et pas inline-table? Dans ce cas ça doit marcher. Peut-on voir une page en ligne pour éventuellement débusquer le problème?

MiluX a écrit :
Il me semble avoir bien tout suivi mais ça ne marche quand même pas... Et quand je dis IE je n'inclu pas encore le 8 parce qu'il est encore en bêta...

Il est encore en beta mais sort prochainement, et ton site sera en ligne pour au moins quelques mois, sans doute quelques années, non? Il faut donc prévoir cette évolution. Et donc utiliser un commentaire conditionnel qui vise les versions 7 et inférieures par exemple. Voir les commentaires conditionnels dans la FAQ pour la syntaxe à utiliser.
Florent V. a écrit :

Peut-on voir une page en ligne pour éventuellement débusquer le problème?

Oui, je l'ai mise temporairement ici...

Florent V. a écrit :

Il est encore en beta mais sort prochainement, et ton site sera en ligne pour au moins quelques mois, sans doute quelques années, non? Il faut donc prévoir cette évolution. Et donc utiliser un commentaire conditionnel qui vise les versions 7 et inférieures par exemple. Voir les commentaires conditionnels dans la FAQ pour la syntaxe à utiliser.


C'est vrai je n'avais pas pensé à ça...

Merci encore !!

MiluX
Autant pour moi: ce que tu as fait ne devrait pas marcher, car Internet Explorer 6-7 n'implémente inline-block que pour les éléments de niveau texte, donc pas pour les LI.

Par contre l'article que tu as (mal) suivi est correct, et la technique qui y est proposée fonctionne.

Attention à ne pas lire en diagonale. Smiley cligne

D'autres choses qui ne vont pas du tout:

1. Deux Doctype dans la page. Va sur ta page et affiches le code source, pour voir. Je parie sur une utilisation incorrecte de la fonction Include en PHP. Le contenu que tu inclues dans div#content ne doit pas être le code d'une page HTML complète, mais juste le code HTML du contenu lui-même.

2. Le commentaire conditionnel est toujours mauvais. Tu as utilisé <!--[if lt IE 7]>, alors qu'il faudrait utiliser soit <!--[if lt IE 8]> soit <!--[if lte IE 7]>. Relire la FAQ.

3. Les paragraphes se font avec des éléments P, pas avec des doubles BR. Pourquoi des éléments P? D'une parce que c'est prévu pour, de deux parce que ça laisse plus de souplesse pour la mise en forme via CSS (pour rapprocher/écarter les paragraphes, utiliser un retrait de première ligne, etc.).

4. Ne pas utiliser l'attribut align en HTML. On peut faire la même chose en CSS avec la propriété qui va bien, et c'est largement conseillé.

5. Les liens du menu sont vides de tout contenu. Ce qui signifique, si je comprends bien l'intention, que tu souhaites que ce menu ne soit pas utilisable par un utilisateur de navigateur en mode texte, de lecteur d'écran, par une personne qui -- à cause d'une connexion bas débit par exemple -- aurait désactivé l'affichage des images, et enfin que ces liens ne soient pas suivis correctement par les moteurs de recherche. Me trompè-je?
Waouw !! Merci, je viens d'apprendre plein de choses !!!

Florent V. a écrit :

1. Deux Doctype dans la page. Va sur ta page et affiches le code source, pour voir. Je parie sur une utilisation incorrecte de la fonction Include en PHP. Le contenu que tu inclues dans div#content ne doit pas être le code d'une page HTML complète, mais juste le code HTML du contenu lui-même.

--> Ah oui j'ai fait cela un peu vite... Tu as tout à fait raison : j'ai créé une page automatique et ajouté le contenu sans faire gaffe avec mon include php Smiley biggrin

Florent V. a écrit :

2. Le commentaire conditionnel est toujours mauvais. Tu as utilisé <!--[if lt IE 7]>, alors qu'il faudrait utiliser soit <!--[if lt IE 8]> soit <!--[if lte IE 7]>. Relire la FAQ.


--> Là j'ai dû un peu mal comprendre la FAQ... Mais je crois que c'est bon maintenant...

Florent V. a écrit :

3. Les paragraphes se font avec des éléments P, pas avec des doubles BR. Pourquoi des éléments P? D'une parce que c'est prévu pour, de deux parce que ça laisse plus de souplesse pour la mise en forme via CSS (pour rapprocher/écarter les paragraphes, utiliser un retrait de première ligne, etc.).


--> J'ai toujours eu qu'un paragraphe et j'ai trouvé ça plus simple pour gérer les espacements... Ceci dit, je crois que ça va changer à partir d'aujourd'hui Smiley smile

Florent V. a écrit :

5. Les liens du menu sont vides de tout contenu. Ce qui signifique, si je comprends bien l'intention, que tu souhaites que ce menu ne soit pas utilisable par un utilisateur de navigateur en mode texte, de lecteur d'écran, par une personne qui -- à cause d'une connexion bas débit par exemple -- aurait désactivé l'affichage des images, et enfin que ces liens ne soient pas suivis correctement par les moteurs de recherche. Me trompè-je?


--> Non, tu as tout à fait raison et d'ailleurs je n'y avais pas pensé... (J'ai pas pensé bcp aujourd'hui, soit dit en passant...) Le problème, c'est que le texte viendrait par dessus l'image ensuite... Mais je pense que tu as la solution !?!?

Encore 1000 mercis pour ton aide bien précieuse !!
Joyeux Nouvel An !!

MiluX

Edit: Euhh... j'ai oublié... si le diplay:inline-block ne s'applique pas au <li> alors comment je dois faire ?
Modifié par MiluX (28 Dec 2008 - 21:10)
a écrit :
Le problème, c'est que le texte viendrait par dessus l'image ensuite... Mais je pense que tu as la solution !?!?

Eh bien il n'y a pas de solution miracle. Placer un contenu en image de fond CSS pose toujours problème, car il y a toujours des cas de figure où l'image de fond ne s'affichera pas... et où le texte réel, que l'on aura caché d'une manière ou d'une autre, ne s'affichera pas non plus.

Dans l'immédiat tu peux te contenter de rajouter tes intitulés dans les liens, et de les cacher par exemple avec un text-indent:-5000px. Il y a d'autres techniques du même type un peu plus avancées.

Dans l'idéal, toute image porteuse de sens devrait être placée dans le code HTML, avec un texte alternatif:
<a href="contact.html"><img src="menu-contact.png" alt="Nous contacter" /></a>

S'il faut remplacer l'image par une autre lors du survol, ça peut se faire en JavaScript (donc pas en CSS).

Une solution intéressante ici serait d'avoir comme images le texte avec son ombre, en PNG-32 (PNG avec transparence alpha) ou éventuellement en PNG-8 avec transparence alpha (un des rares outils le proposant est Fireworks). En CSS, on ne gèrera alors que le dégradé de fond, l'image venant s'y superposer pour donner le bouton complet.

Ça ne sera pas super compatible IE6 (sauf à faire ça très bien), mais ça reste intéressant.

a écrit :
Edit: Euhh... j'ai oublié... si le diplay:inline-block ne s'applique pas au <li> alors comment je dois faire ?

Dans la page que tu as pris pour référence, le display: inline-block pour IE est appliqué non pas aux LI, mais aux éléments... (je te laisse compléter).
J'ai en fait résolu le problème par une autre façon :

Dans mon code CSS:

#menus ul li {
	display:table-cell !important;
	display:inline-block;
}


Dans l'html :

<!--[if lte IE 7]>
<style type="text/css">

#menus ul li {
	display:inline;
}

</style>
<![endif]-->


!important signifie qu'on ne prend pas en compte "une propriété qui se trouve 2 fois" : (ici, on ne prend pas en compte le "display:inline-block")... Heureusement, IE (je ne sais pas pour le 8) ne le prend pas en compte et prend en compte le dernier qui vient... Merci Florent pour ton aide précieuse !!!

Joyeux réveillon !

MiluX
Modifié par MiluX (28 Dec 2008 - 22:21)
MiluX a écrit :

!important signifie qu'on ne prend pas en compte "une propriété qui se trouve 2 fois"
Euh... non ! !important influe sur la priorité d'une déclaration (lire cet article : http://openweb.eu.org/articles/cascade_css/ )

Il se trouve que dans ce cas précis il s'agit d'un vilain hack (Florent en parle d'ailleurs dans cet article)... complètement inutile puisque les commentaires conditionnels sont faits pour ça.


Edit: c'est d'autant plus inutile que seules les versions d'IE < 8 vont ignorer !important pour appliquer display:inline-block; ... qu'elles n'appliquent pas aux LI mais seulement aux éléments... (je te laisse compléter). Smiley lol
Modifié par Heyoan (28 Dec 2008 - 23:19)
C'est fou cette obstination à ne pas lire attentivement le code des tutoriels que l'on suit.

Alors on reprend:
http://gcyrillus.free.fr/trucs_css/menu-liste-horizontal-centrer.html

Je reprend les portions de code que tu n'as apparemment pas saisies, en simplifiant un peu la syntaxe au passage (sélecteurs plus courts lorsque possible):

Pour tous les navigateurs:
#menuh li {
	display: table-cell;
}
#menuh a {
	display: block;
}


Pour Internet Explorer 7 et inférieurs:
#menuh li {
	display: inline;
}
#menuh a {
	display: inline-block;
}

Et voilà. Smiley smile

PS: dans la solution que tu as trouvée par toi-même, le !important est totalement inutile, de même que la ligne qui suit.
Modifié par Florent V. (28 Dec 2008 - 23:42)
Florent V. a écrit :

PS: dans la solution que tu as trouvée par toi-même, le !important est totalement inutile, de même que la ligne qui suit.


Pourtant ça marche très bien avec et ça ne marche pas sans...

MiluX
Tu veux dire qu'ainsi ça ne marche pas?
#menus ul li {
	display: table-cell;
}
<!--[if lte IE 7]>
<style type="text/css">
#menus ul li {
	display: inline;
}
</style>
<![ endif ]-->

Il y a au contraire des chances que ça marche aussi bien dans Firefox, Safari, Opera, et IE6, et que ça marche mieux dans IE7.
Modifié par Florent V. (29 Dec 2008 - 00:05)
Non désolé ça ne marche pas comme ça... Enfin, ça marche avec Opera, Firefox, Safari mais pas It IE 8, pour reprendre tes termes Smiley biggrin ...
MiluX a écrit :
Non désolé ça ne marche pas comme ça...

Là je demande à voir...

(Et c'est «lt» pour «less than», pas «It». Smiley cligne )
Modifié par Florent V. (29 Dec 2008 - 11:49)
Ah... là ça change tout Smiley eek ... et ça je ne pouvais pas le savoir ...

Edit: en fait ça ne change rien Smiley rolleyes
Modifié par MiluX (29 Dec 2008 - 15:13)
En fait, désolé de flooder, ça change rien... j'avais déjà LTE parce que je l'avais copié du tutoriel... mais tu peux aller voir par toi-même (je l'ai changé de place --> ici), ça ne marche quand même pas ...

MiluX
Bon, j'avais fait une réponse mais elle s'est perdue dans un bug du forum. Alors en bref:

Dans ta feuille de styles, tu as un #menus ul li a {display: block}. Si les LI ne sont pas en table-cell, ce display:block sur les liens causera un retour à la ligne. Donc il faut:

1. soit l'annuler pour IE 6-7 comme le fait le tutoriel de gcyrillus (cf. le tutoriel, mon message ci-dessus qui en extrait les points essentiels, etc.);
2. soit supprimer complètement ce display: block (pour tous les navigateurs).
Finalement je crois que je vais laisser avec mon !important et tout ça... ça marche et c'est compatible avec les navigateurs principaux... J'ai pas vu d'inconvénient pour l'instant...

Joyeux Réveillon !!

MiluX
MiluX a écrit :
J'ai pas vu d'inconvénient pour l'instant...

Bah l'inconvénient c'est que tu n'as pas compris ce que tu fais.
Pages :
Sujet clos
Aller à