Discussion :

[moomba]

Bonjour à tous,

Je suis en train de construire un site web qui me sert de base de connaissances. Connaissances partagées au passage.

Je cherche à créer un menu simple pour naviguer sur le site. Dans le cas d'un écran tactile, la navigation se fera par utilisation du fil d’Ariane et de pages intermédiaires (pas d'utilisation du menu donc). Tout ceci est en cours de production, et prévus dans les jours a venir.

Mon problème : le menu fonctionne très bien sous Firefox, mais mal sous IE et Chrome. Vous remarquerez tout de suite le problème : on accroche facilement les sous menus sous Firefox, mais sous les autres il y a un écart de 2 ou 3 pixels qui l’empêche (si on vas vite, ca marche quand même).

Le CSS et le HTML ne sont pas vraiment mon domaine, et je ne vois donc pas l'erreur, du moins sans altérer le rendu visuel, qui change déjà pas mal en passant d'un navigateur à l'autre.

A noter que j'utilise un petit script conçu par quelqu'un d'autre pour que le site fonctionne aussi sous IE6/7/8. Vous le verrez dans les sources.

La page web : spheniscus.brennik.fr/index/index.html

Au passage, je sais que la structure est stupide (pas de robots.txt, pas de sitemap.xml, l'index.html n'est pas au bon endroit, etc.) Tout ceci est corrigé dans la nouvelle version, qui sera propagée une fois le bug corrigé.

Si l'un d'entre vous a une idée, je suis preneur

Merci d'avance

Moomba

[Candygirl]

Bonsoir,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 a {
   font-weight:normal;
   padding-top: 12px;
   padding-bottom: 12px;
 }
 
li.folder ul {
      position:absolute;
      top:45px;
 }

En faite, tu décides que le line-height de ton a + les 2 padding = 45px... Ce qui peut être vrai sur un navigateur mais pas les autres.

Tu n'as pas besoin de spécifier de top et ton éléments devrait de se positionner de lui-même correctement sur tous les navigateurs.

de même:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 div#MenuBar {
   height: 45px;
 }

Tu devrais éviter d'attribuer une hauteur fixe à un élément contenant du texte. Tu peux le forcer de différentes manière à prendre en compte les élément flottants qui sont à l'intérieur (clear sur :after, overflow, float, display:table,...). Par exemple ajouter un float:left au lieu du height de 45px (puisque tu as un width de 100%).

[moomba]

Un petit peu en retard.

Merci pour ces informations. J'ai corrigé le bug avec un patch temporaire à l'aide du debbugeur de Chrome. Cela fonctionne à nouveau, mais je vais essayer de me caler sur tes conseils qui me semblent plus portable.

Je teste dans la semaine et je te tient au courant de ce que ça donne

Moomba

[moomba]

Bonjour,

Je revient sur les indications que tu m'as donné.

Effectivement, le fait de passer en float:left permet la prise en compte du texte lorsque je fait sauter le top et le bottom. Cependant, mon image de fond de cette fameuse barre de menu fait elle 45px pile, et du coup la barre fait la taille du texte en épaisseur, et plus les 45px de l'image :



Comment faire en sorte que la barre s'adapte à l'image de fond ? Mais du coup, est ce que ca vaut vraiment le coup de changer ici, puisque de toute façon l'image a une taille fixe ?

[Candygirl]

Ce n'est pas la barre qui doit s'adapter à l'image mais l'image qui doit s'adapter en fonction de la taille des caractères.

Tu ne dois pas supprimer ton padding-bottom et padding-top, tu dois juste être conscient que cela ne fera pas la même hauteur sur tous les navigateurs et gérer le cas correctement, que ton bouton soit plus ou moins haut que tes 45px.

Cela nécessite que tu retires les 2px de border de l'image et que tu joues, par exemple, avec les border de ton #menu et du ul. Et tu attribues une couleur de fond de la couleur du dernier pixel de ton dégradé de gris pour les cas où tes boutons seraient plus hauts que tes 45px suivant la taille de la police.

De cette manière tu auras un comportement solide, à tout épreuve. (Tu peux aussi passer par la génération d'un dégradé en css3 mais c'est encore une autre histoire )

Sauf que, dans ton cas, tu veux que ton hover passe par-dessus les border, ce qui complique un tout petit peu le problème pour utiliser de simples border...

Une manière de faire pourrait être de jouer avec des :after et :before

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#MenuBar {
 background:#101010 url(pict/MenuFrame.png) repeat-x top left;
 }
 
 #MenuBar:after,#MenuBar:before {
 content:'';
 height:1px;
 background:#000;
 display:block;
 
 }
 
#MenuBar:before {
 border-bottom:1px solid #313131;
 margin-bottom:-2px;
 }
 
#MenuBar:after {
 border-top: 1px solid #1E1E1E;
 margin-top:-2px;
 }
 
#MenuBar>ul:after {
	content:'';
	height:0;
	display:block;
	clear:both;
 }

Avec ce code, tu devrais obtenir qqch de correct sur tous nav (IE8+) (tu peux faire des ctrl+ et ctrl- en zoom text seul sur FF pour constater la variation de hauteur en fonction de la taille d'écriture)

[moomba]

Je suis très en retard, mes excuses.

Je vais essayer ton code pour voire le rendu. Je perd du coup l'image de la barre de menu, mais on doit pouvoir la reproduire avec du CSS3 comme tu l'indiquais au dessus.

La prochaine mise à jours du site arrive sous peu, avec beaucoup plus de contenu, je vais essayer de passer sur ta méthode au passage. Je te tient au courant