Rendre le style de la barre menu haut compatible avec tous les navigateurs

**Rajoz** · 27/11/2014, 14h59

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Bonjour BruceHarper,

L'a

**BruceHarper** · 27/11/2014, 15h23

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Envoyé par Rajoz Voir le message

Bonjour BruceHarper,

L'a

C'est-à-dire?

**Rajoz** · 27/11/2014, 15h47

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Bonjour BruceHarper,

L'affichage des polices peut être différente selon le navigateur et selon sa configuration.

Les navigateurs ont tous des paramètres qui permettent de choisir les polices par défaut (pour les types standard, Serif, Sans-Serif et fixe) ainsi que leur taille sans parler du niveau de zoom.

Cette fonctionnalité est très intéressante d'un point de vue accessibilité. Mais c'est effectivement un problème quand on veut que l'affichage se fasse strictement de la même façon sur tous les navigateurs et sur tous les écrans.

Un autre aspect c'est la présence (ou pas) des polices selon le navigateur et selon la machine. C'est d'ailleurs pour cela que quand on définit une font-family on prévoit des polices de "secours" au cas où la police initiale n'existerait pas (ex: font-family: "Century Schoolbag", "Times New Roman", Times, Georgia, Serif). Il n'est pas sûr que le rendu visuel soit le même entre Century Schoolbag et Georgia.

Par ailleurs, il y a aussi l'écran qui peut intervenir, la résolution (en dpi) a un impact direct sur l'affichage des polices. Ceux qui auront vu un affichage "normal" sur les nouveaux écran 4K 27" se seront rendu compte que les caractères sont petits voire difficilement visibles.

En pratique on peut améliorer l'affichage avec des css à charger en fonction du navigateur ou de la machine. Mais je ne pense pas que l'on puisse arriver à rendre un affichage strictement identique alors que l'on n'a pas la maîtrise du mode d'affichage.

Amicalement,
Rajoz

**Rajoz** · 27/11/2014, 15h48

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Envoyé par BruceHarper Voir le message

C'est-à-dire?

Oups, c'est parti sans que je ne m'en rende compte.

**BruceHarper** · 27/11/2014, 17h39

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Bonjour Rajoz et merci pour ta réponse instructive.

Je suis encore débutant sur joomla et j'ai bien peur de ne pas maitriser le chargement de template en fonction du navigateur, aurais-tu des pistes à ce sujet? J'ai lu que pour avoir un template différent avec internet explorer, il fallait mettre dans index.php :

Code:

<!--[if IE]>
<link type="text/css" rel="stylesheet" href="template-ie.css" />
<![endif]-->

Je dois mal m'y prendre mais mon template-ie.css ne fonctionne pas (cela vient peut-être du chemin d'accès?)

Mais encore si cela s'affiche plus ou moins gros, ce n'est pas vraiment grave, mon texte se lis bien quand même. C'est vraiment à ce sujet que j'ai besoin d'un coup de main :

Envoyé par BruceHarper Voir le message

Je voudrais que le contenu de la barre de menu s'affiche sur une ligne seulement et qu'il prenne toute la largeur de la barre. A l'heure actuelle, soit il s'affiche sur 2 lignes, soit il reste un espace important à la fin de la ligne.

Je suppose qu'il faut ajouter une taille maximum à la barre et une minimum mais je ne sais pas vraiment comment faire ni quel code mettre à quel endroit.

Ou alors une taille auto : la taille des onglets s'adapte à la barre de menu haut qui elle doit être fixée à ne s’étaler que une ligne seulement

**algrand001** · 28/11/2014, 08h10

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Il me semble que la solution pour avoir toujours la même typo dans tes menus, et sans qu'elle change de taille serait d'utiliser la propriété css3 "@fontface" qui permet d'utiliser des polices persos qui sont téléchargées pour chaque internanute quand il arrivent sur ton site.
Là tu serais sûr que ta police ai toujours la même présentation.

**Alice** · 28/11/2014, 14h58

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Bonjour à tous,

Je voudrais que le contenu de la barre de menu s'affiche sur une ligne seulement et qu'il prenne toute la largeur de la barre. A l'heure actuelle, soit il s'affiche sur 2 lignes, soit il reste un espace important à la fin de la ligne.

Ça, c'est exactement ce qui arrive pour le site que je suis en train de faire et ça m'agace fortement car je n'ai jamais rencontré ce problème, et surtout car je ne trouve la solution nulle part ! J'utilise ce template: http://demo25.plustheme.com/?template=pt_lacuanda_free sur ce site .
Alors algrand001, quelle est cette solution que tu proposes ??

**Rajoz** · 29/11/2014, 15h22

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Bonjour BruceHarper,

Pour charger un css différent selon le navigateur, la méthode des feuilles de style alternatives par commentaires conditionnels que tu indiques est une des solutions possibles (on peut aussi utiliser Javascript ou PHP).

Pour reprendre ton exemple de code, il faut le mettre entre les balises <head> et </head> et préciser le chemin d'accès du css à charger. Voici un exemple tiré de Beez3 :

Code HTML:

<head>
    ...
    <!--[if IE 7]>
        <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/ie7only.css" rel="stylesheet" type="text/css" />
    <![endif]-->
</head>

[if IE 7] : s'il s'agit de IE 7, on peut aussi mettre des inégalités comme par exemple [if lte IE 9] qui va couvrir toutes les versions inférieures ou égales à IE 9
$this->baseurl : adresse de base du site (la racine du site)
$this->template : nom du template

la taille des onglets s'adapte à la barre de menu haut qui elle doit être fixée à ne s’étaler que une ligne seulement

Ce n'est pas comme ça que cela fonctionne dans Protostar, c'est l'inverse, c'est la largeur de la barre de menu du haut qui s'adapte à la largeur des liens de menu.

Ce sont donc ces liens de menu qu'il faut modifier. De base dans Protostar, leur largeur dépend de la largeur du texte du lien plus une marge.

On peut faire varier leur largeur en fonction de la largeur de l'écran en utilisant des largeurs en % (au lieu des largeurs fixes).

Une autre possibilité c'est d'utiliser des Medias Queries CSS3 (@media) qui vont permettre d'adapter la largeur et le contenu (marge, police, etc.) des liens de menu en fonction de la largeur de l'écran.
Tutoriel sur les Medias Queries CSS3 : http://www.alsacreations.com/article...a-queries.html

Avec un lien sur ton site, je pourrais te donner des exemples plus précis.

Amicalement,
Rajoz

**Rajoz** · 29/11/2014, 19h38

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Bonjour Alice,

Tu utilises la version pro (payante) du template Lacuanda de PlusTheme. Pour un template acheté, tu devrais aussi poser la question au vendeur.

Par ailleurs le template du site, au moins le css, a subi des modifications qui impactent le menu par rapport à ce que l'on voit sur la démo. En effet, on voit en haut que les liens sont décalés sur le site entre les différents navigateurs et en bas qu'ils restent alignés sur la démo quelque soit le navigateur :

En ce qui concerne la police :

démo : font-family: Oswald, sans-serif; font-size: 12px;
site : font-family: Helvetica; font-size: 13px;

Helvetica est la police utilisée par Apple pour Mac OS X ainsi que pour la plupart de ses produits (iPhone , iPad, etc.).
Microsoft a fait le choix de Arial pour Windows, il n'y a pas de police Helvetica.

Quand on regarde le site à partir d'un navigateur sous Windows (IE, FF, Chrome, etc.), comme la police Helvetica n'existe pas c'est chacun des navigateurs qui va décider de la police la plus proche à utiliser parmi celles qu'il intègre. Le résultat ne peut être que disparate.

+1 avec algrand001 : la première chose à faire c'est de choisir une police comme une Google Font qui sera embarquée dans le site et donc identique (au moins pour la famille) quelque soit le navigateur.

Le choix de cette police doit pouvoir être fait dans les paramètres du template car j'ai trouvé dans le code source de la démo :

Code:

<!-- GOOGLE FONTS HORIZONTAL NAVIGATION -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<style type="text/css">
#hor_nav { font-family: 'Oswald', sans-serif; }
</style>
<!-- //GOOGLE FONTS HORIZONTAL NAVIGATION -->

S'il reste des décalages après ce choix de police, on verra pour les gérer par des largeurs en % et des @media comme je l'ai indiqué dans ma réponse à BruceHarper.

Amicalement,
Rajoz

**Alice** · 01/12/2014, 15h10

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Bonjour Rajoz,

Merci infiniment pour ta réponse. J'ai demandé au vendeur mais il me propose de re télécharger un template à jour et j'avoue que comme on a fait des modifs esthétiques déjà sur celui-là, je n'ai pas envie de tout recommencer...

C'est vrai que la police a été changée car dans l’interface du template, on peut choisir une police :
et le propriétaire du site voulait Helvetica. Du coup moi j'ai mis le menu avec Helvetica pour que ce soi homogène mais j'ignorais qu'il y aurait ce problème.
J'ai rajouté le code Google Fonts comme indiqué et vais tester tout ça.

Bien à toi

**BruceHarper** · 01/12/2014, 17h28

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Bonjour et merci pour vos réponses.

Concernant la police, voilà ce que j'ai :

Code:

body {
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #333;
	background-color: #fff;
}

Je n'ai pas touché le template de ce côté là. Sur tous les navigateurs, c'est bien la même police qui s'affiche (qui doit être arial, je suis sous windows).

Effectivement, j'avais un zoom de 150% sur IE ce qui explique que le texte était très gros. Et je me suis aperçu qu'il était à 110% sur Firefox donc ma barre de menu n'est pas correcte sur ce navigateur non plus, j'ai dans tous les navigateurs un petit bout avec rien dans mon menu.

Je sais et je peux modifer mes marges de menu mais je crois que ce ne serait qu'un pansement étant donné que comme vous l'avez dit, la taille et les zooms des écrans diffèrent. J'ai actuellement des marges fixes, en appliquant des %, vais-je avoir un menu sur ligne prenant tout l'espace de la ligne quelque soit le navigateur et quelque soit l'écran? Ou faut-il que je double avec des @media? (sachant que je ne sais pas encore comment faire, si je n'ai pas à les utiliser c'est aussi bien

)

Envoyé par Rajoz Voir le message

Avec un lien sur ton site, je pourrais te donner des exemples plus précis.

Mon site est en local, je ne peux donc pas te fournir de lien

Edit : dans joomla, le nom de police google est Open+Sans (dois-je y toucher?)

**Rajoz** · 01/12/2014, 19h15

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Bonsoir BruceHarper,

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
Sur tous les navigateurs, c'est bien la même police qui s'affiche (qui doit être arial, je suis sous windows).

Ce que j'ai voulu expliquer c'est que alors que tu auras mis tous tes efforts pour fignoler ton site aux petits oignons en te basant sur Arial, quelqu'un qui naviguera sur ton site à partir d'un Mac le verra en Helvetica ce qui pourra amener des différences d'affichage.
On n'est pas vraiment complètement maîtres de la vision qu'auront les utilisateurs de notre site.
A propos de vision, j'ai parlé des différences entre PC, Mac, smartphone mais j'ai oublié les afficheurs braille et autres synthétiseurs vocaux pour lesquels l'alignement du menu ne signifie plus rien du tout.

Je sais et je peux modifer mes marges de menu mais je crois que ce ne serait qu'un pansement étant donné que comme vous l'avez dit, la taille et les zooms des écrans diffèrent. J'ai actuellement des marges fixes, en appliquant des %, vais-je avoir un menu sur ligne prenant tout l'espace de la ligne quelque soit le navigateur et quelque soit l'écran? Ou faut-il que je double avec des @media? (sachant que je ne sais pas encore comment faire, si je n'ai pas à les utiliser c'est aussi bien

)

Imaginons qu'il y ait 5 liens de menu, on pourrait leur donner à chacun une largeur de 20% pour que le menu remplisse la largeur de la page quelle qu'elle soit. Mais en diminuant la largeur de l'écran, il arrivera un moment où le texte sera trop grand pour l'espace alloué à chaque lien. A ce moment, avec un @media on peut empiler les 5 liens verticalement en leur donnant chacun une largeur de 100%.
Protostar avec nav-pills passe d'un menu horizontal sur grand écran à un menu vertical sur petit écran, mais sur le menu horizontal, il calcule la largeur des liens en fonction de leur contenu texte ou image.
Au fait voilà un tuto sympa sur les Media Queries : http://openclassrooms.com/courses/ap...-media-queries

dans joomla, le nom de police google est Open+Sans (dois-je y toucher?)

Cette police est utilisée dans templates/protostar/index.php pour les titres (h1 à h6) et le titre du site (site-title). Si tu la désactives, les titres utiliseront la même police que celle de body par "héritage".
Cela ne changera pas grand chose d'y toucher sauf bien sûr pour appliquer aux titres une police plus "sexy", oups, je voulais dire "plus adaptée à la charte graphique de ton site"

.
Pour info, une fois chargée cette police pour les titres, on peut très facilement l'utiliser pour d'autres éléments, par exemple pour les liens de menu.

Amicalement,
Rajoz

**BruceHarper** · 02/12/2014, 10h17

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Ah donc il vaut mieux que je mette Arial d'abord...

Pour mes marges, si je comprends bien il faut quand même des media queries. Comme tu l'as justement dit, prostar a nav-pills donc la possibilité de passer en menu vertical. Je pense que je vais tester avec les % sur les marges et voir si le nav-pills s'applique bien en diminuant (et éventuellement grossissant) au maximum. Mais effectivement, cela va sûrement poser problème.

Et pour mes police sexy

comme c'est censé être un site "sérieux", je me dis qu'il vaut mieux ne pas trop innover, d'autant plus que je suis sûr que tout le monde a Arial et que c'est une police sans empattement, pratique pour les dyslexiques par exemple.

Je teste tout ça et je reviens vous faire mon rapport

**Rajoz** · 02/12/2014, 12h10

Re : Rendre le style de la barre menu haut compatible avec tous les navigateurs

Bonjour BruceHarper,

Dicton du jour : C'est dur-dur de plaire à tout le monde !

je suis sûr que tout le monde a Arial

Pas ceux qui sont sur Mac qui vont avoir Helvetica.

Pas facile la vie du développeur web, ils nous font tous les coups : chacun sa police, chacun sa façon d'afficher, chacun ses normes, chacun ses bugs, ...

Comme l'avait dit algrand001, il vaut mieux charger une police Google comme Open+Sans pour que tout le monde voit la même.

Dans Protostar, la police Google n'est utilisée que pour les titres. Pour que cette police soit aussi utilisée pour les liens du menu du haut (position-1) il faut faire une petite modification.

Dans le fichier templates/protostar/index.php à la ligne 90 ajouter le code en rouge :

Code:

<style type="text/css">
    h1,h2,h3,h4,h5,h6,.site-title[COLOR=#FF0000],nav a[/COLOR] {
        font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName')); ?>', sans-serif;
    }
</style>

Tu peux tester momentanément avec une police comme Lobster, qui est suffisamment différente, que les liens du menu du haut ont bien changé aussi de police.

Amicalement,
Rajoz

Rendre le style de la barre menu haut compatible avec tous les navigateurs

Rendre le style de la barre menu haut compatible avec tous les navigateurs

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association