Forum d'entraide PHPFrance

Hello : )

J'ai un petit souci avec le code d'un menu, et je ne vois pas comment le corriger: dans Epiphany(*) j'ai un espace entre deux éléments (le bouton de la barre de navigation et le sous-menu (affiché au survol de la souris)) alors que dans Firefox il n'y a pas cet espace (c'est ce que je veux au départ: les deux éléments doivent être collés).


Voici deux capturettes, la 1ère dans FF (affichage voulu), la seconde dans Epiphany (pas bon):






Voici le CSS:

#navbar  {
		display: block;
		margin: 0 0 25px 0;
	}
		#navbar ul { margin: 0; padding: 0; position: relative; }
			#navbar ul li {  position: relative; list-style-type: none; font-family: "Courier New", Courier, mono; display: inline-block; margin: 0; }
			#navbar ul li a { display: inline-block; font-weight: bold; background-color: #fff; color: #4D4D4D; padding: 2px 2px 1px 2px; text-align: center; width: 150px; border: 1px solid #7f7f7f; -moz-border-radius: 5px; }
			#navbar ul li a:hover { background-color: #BFBFBF; color: #1A1A1A; text-align: center; }
				#navbar ul li ul { display: none; }
				#navbar ul li:hover ul { display: block; position: absolute; top: 0; left: 0; width: 147px; margin: 24px 0 0 0; padding: 5px; background: transparent url('../img/bg_trans.png'); color: #fff; -moz-border-radius: 5px; }
				#navbar ul li:hover ul li { display: inline-block; font-size: 0.8em; }
				#navbar ul li:hover ul li a { width: 140px; text-align: left; color: #fff; padding: 2px 2px 1px 5px; background-color: transparent; background-image: none; border: none; }
				#navbar ul li:hover ul li a:hover { background-color: #fff; color: #4D4D4D; -moz-border-radius: 4px; }

Que modifiriez vous pour corriger ça? Merci! : )

______________________________
(*) J'imagine que dans d'autres navigateurs ce doit être aussi un problème (IE..., et peut-être Opera, Chrome et Safari...)

Salut Stef,

Ce que tu nous demandes est un jeu d'enfant. Je veux pas te priver du plaisir de trouver tout seul (à part si vraiment tu ne vois pas, mais y'a pas de raison là ).

Je t'invite à bien regarder les deux captures d'écran que tu as copiées. Mets-les l'une à côté de l'autre, en t'aidant de deux fenêtres (et non pas l'une en dessous de l'autre) si nécessaire.

Petit indice : c'est pas là où tu as regardé jusqu'à maintenant.

Deuxième indice (ne regarder que si tu ne trouves toujours pas) : c'est pas dans le menu déroulant mais partout ailleurs !

Salut Stef,

Ce que tu nous demandes est un jeu d'enfant. Je veux pas te priver du plaisir de trouver tout seul (à part si vraiment tu ne vois pas, mais y'a pas de raison là ).

Je t'invite à bien regarder les deux captures d'écran que tu as copiées. Mets-les l'une à côté de l'autre, en t'aidant de deux fenêtres (et non pas l'une en dessous de l'autre) si nécessaire.

Petit indice : c'est pas là où tu as regardé jusqu'à maintenant.

Deuxième indice (ne regarder que si tu ne trouves toujours pas) : c'est pas dans le menu déroulant mais partout ailleurs !

J'ai fait comme tu m'as conseillé, j'ai placé les deux captures côte à côte et je suis resté un moment à regarder ça:



Mais là je sèche... Certes ce qui se remarque c'est que tout est plus petit dans Epihpany, mais comme c'est les paramètres du navigateur ça ne peut pas venir de ça.

Je ne vois vraiment pas; "c'est pas dans le menu mais partout ailleurs", non je ne vois pas... :/

Qu'est-ce que je peux changer qui soit "partout ailleurs"? Les valeurs des attributs du body?

Non je cale...

Mais là je sèche... Certes ce qui se remarque c'est que tout est plus petit dans Epihpany, mais comme c'est les paramètres du navigateur ça ne peut pas venir de ça.

Je ne vois vraiment pas; "c'est pas dans le menu mais partout ailleurs", non je ne vois pas... :/

Qu'est-ce que je peux changer qui soit "partout ailleurs"? Les valeurs des attributs du body?

Non je cale...

Fin du suspense... Tu as trouvé

Pourquoi es-tu certain à priori que la taille de la police définie dans le navigateur n'a pas d'influence sur la mise en page ? ( C'est pour bien voir cela que je te proposais de regarder les images côte à côte, au pixel près ).

Une question pour te guider : quelles sont les unités de longueur (et leurs particularités) que tu utilises pour la mise en page dans ta CSS ?

J'ai mis 100% pour font-size dans le body, et après je n'utilise que des em... rien en tous cas en pixels en ce qui concerne les textes.

J'ai mis 100% pour font-size dans le body, et après je n'utilise que des em... rien en tous cas en pixels en ce qui concerne les textes.

Exactement Et c'est quoi un em ?

Et la différence qui t'embête, en quoi tu la "mesures" (même si c'est juste à l'oeil) ?

Un em c'est une unité relative...

Et la différence qui m'embête, à vue d'oeil je dirais qu'elle est de quelques petits pixels... Mais de là à dire combien ça fait en em, j'en sais rien...

Un em c'est une unité relative...

Et la différence qui m'embête, à vue d'oeil je dirais qu'elle est de quelques petits pixels... Mais de là à dire combien ça fait en em, j'en sais rien...

Désolé de te ballader comme ça, mais rassure-toi, on est en plein sur le souci là

Un em est une unité de mesure qui est relative... à la taille de la police courante (plus exactement à la taille d'un M majuscule, considéré comme le glyphe latin le plus haut). Source : http://fr.wikipedia.org/wiki/Em (mais la version anglaise est, comme souvent sur les sujets techniques, plus étoffée : http://en.wikipedia.org/wiki/Em_%28typography%29 )

Si tu utilises les em, et si tu fais varier la taille de police d'un navigateur à un autre, il ne faut pas chercher un alignement parfait au pixel près (ou alors bien définir ce qui s'aligne par rapport à quoi, et comment, en acceptant des compromis).

Hum, oui je comprends un peu mieux... en fait je comprends qu'il puisse y avoir des différences entre les navigateurs...

Mais dans mon cas comment être sûr d'uniformiser le truc? Faut que j'utilise des pixels?

Hum, oui je comprends un peu mieux... en fait je comprends qu'il puisse y avoir des différences entre les navigateurs...

Dans ton cas ça semble être surtout une question de réglage, puisque epiphany est un gecko light.

Mais dans mon cas comment être sûr d'uniformiser le truc? Faut que j'utilise des pixels?

Si tu veux un rendu parfaitement uniforme sur tous les écrans, à toutes les résolutions, sur tous les browsers et quelle que soit la config (bref partout dans les limites de ce qu'on peut concevoir)... La réponse courte serait oui.

La réponse plus longue (meilleure, comme tu l'auras compris), c'est d'utiliser chaque unité pour ce qu'elle fait le mieux et de comprendre qu'une page web n'est pas une gravure figée dans le marbre. Si le web devait avoir la même tête partout, alors on serait tous en train d'utiliser IE6 sans se poser davantage de questions.

Donc quand tu utilises des em, tu laisses le navigateur deviner, selon sa configuration, quelle taille en pixels ça va donner à l'écran. Quand tu utilises une taille en pixels tu fais exactement le contraire, tu imposes un chiffre strict. Donc si deux éléments sont "calés" l'un par rapport à l'autre à l'aide de ces deux unités simultanément, ça va forcément casser dans un cas ou dans un autre, à moins que tu ne voies ta page que dans le cas où tout marche bien - ta workstation de développement et ton browser favori dans son réglage habituel, le plus souvent.

C'est ton cas ici, tu as la barre de menu principale (ainsi que la plupart des blocs de la page semble t-il...) qui choisit sa hauteur suivant la taille du texte calculée (différente sur chacun de tes 2 browsers donc). Et par rapport à ça, tu cherches à placer un bloc juste en-dessous, en position absolue à l'aide d'une marge définie en pixels (donc fixe, elle).

Deux solutions :
- soit tu rends cette marge adaptable au même titre que la taille de la boîte du dessus (donc passage en em)
- soit tu trouves une autre façon de placer le bloc qui t'éviterait de faire appel aux marges.

A toi de choisir

Hum ok...

j'ai opté pour l'option font-size: 15px que j'ai ajouté dans #navbar ul et ça semble résoudre le problème.

J'ai testé le truc sur https://browserlab.adobe.com/ et c'est correct dans tous les navigateurs, par contre c'est désastreux dans IE 6 et IE 7 (inline-block n'est pas reconnu apparement) et c'est correct dans FF uniquement à partir de 3.0.

J'oubliais: faut dans tous les cas de figure que le sous-menu soit collé au bouton parce qu'il s'affiche au passage de la souris, et si y a un espace, le temps que l'utilisateur descende son curseur sur les liens du sous-menu celui-ci disparait, so...

Merci pour tout le temps que tu as passé à m'expliquer tout ça en tous cas!! J'y vois un peu plus clair maintenant! =D>

J'oubliais: faut dans tous les cas de figure que le sous-menu soit collé au bouton parce qu'il s'affiche au passage de la souris, et si y a un espace, le temps que l'utilisateur descende son curseur sur les liens du sous-menu celui-ci disparait, so...

Merci pour tout le temps que tu as passé à m'expliquer tout ça en tous cas!! J'y vois un peu plus clair maintenant! =D>

Oui je vois bien le souci, j'ai perdu quelques cheveux sur des trucs du même genre

Pas de souci. Un petit lien très complet pour aller plus loin avec les em : http://www.alsacreations.com/article/li ... es-em.html

Oui je suis tombé sur cette page en cherchant des infos à propos de em et cie! Je l'ai bookmarquée la gueuze...

merci encore Calim!!

Je l'ai bookmarquée la gueuze...

Hmmmm A la tienne