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

[BruceHarper]

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

Bonjour,

J'ai testé les % pour mes marges, ce n'est pas super. En effet, j'ai des onglet de menu de taille assez variable (pour exemple, mon onglet d'accueil est un icone de maison) et donc cela donne des onglets pas très jolis, notamment ledit onglet d'accueil qui a forcément peu de marge vu que cet onglet est déjà petit.
J'ai donc tout remis en px.
Je vais essayé les @media pour voir si je peux avoir un meilleur rendu, I'll be back

[BruceHarper]

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

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

Je vais faire ça, je crois que ça peut régler déjà quelques soucis de mise en page.

Mais je reviens sur

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).

Aurais-tu par hasard un exemple sur prostar ou plutôt dois-je avoir une feuille de style alternative avec juste le code qui change ou dois-je tout remettre en modifiant le code voulut ?

Je crois que c'est peut-être la meilleure solution vu que prostar est a priori déjà un template responsive (?)

[Rajoz]

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

Bonjour BruceHarper,

Sur Protostar tout est regroupé en une seule feuille de style (template.css).

Personnellement je préfère avoir un ou des fichiers complémentaires par exemple en ajoutant un custom.css plutôt que de modifier template.css

La raison principale c'est qu'en modifiant template.css je trouve très difficile de retrouver plus tard mes modifications (peut-être des problèmes de mémoire liées à l'âge !). Il y a bien les commentaires et WinMerge mais c'est plus long et moins fiable qu'un fichier séparé.

Voici deux exemples :

Pour ajouter dans templates/protostar/index.php un fichier custom.css (code ajouté en rouge) :

// Add Stylesheets
$doc->addStyleSheet('templates/' . $this->template . '/css/template.css');
[COLOR=#ff0000]$doc->addStyleSheet('templates/' . $this->template . '/css/custom.css');[/COLOR]

Pour ajouter dans templates/protostar/index.php un fichier custom-ie9.css valable que pour les version <= IE 9 (code ajouté en rouge) :

    [COLOR=#FF0000]<!--[if lte IE 9]>
[/COLOR][COLOR=#ff0000]        <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/custom-ie9.css" rel="stylesheet" type="text/css" />[/COLOR]
[COLOR=#ff0000]    <![endif]-->[/COLOR]
</head>

Comme il s'agit de modifications sur un fichier de Joomla :

• penser à sauvegarder avant : comme pour toute modification
• utiliser de préférence une copie du template : sinon les modifs risquent d'être écrasées à la mise à jour suivante

Amicalement,
Rajoz

[BruceHarper]

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

Bonjour,

Pour l'ajout d'une feuille alternative pour IE, j'ai essayé ta méthode Rajoz

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

mais je n'ai pas constaté de changement, je m'y suis peut-être mal pris. De plus, il semblerait que tous les navigateurs SAUF FF m'affiche le menu haut avec environ le même espace à la fin. Ce qui m'amène à vous demander : est-il possible de faire une feuille de style spécifique pour FF et une feuille de style qui fonctionne pour tous les autres navigateurs? et si oui, comment?

Edit : De plus, sur tous les navigateurs sauf FF, si mes titres de menu sont un peu long, un morceau de titre passe à la ligne suivante mais toujours groupé avec le reste du titre. C'est assez étrange vu qu'il reste de la place en bout de menu. Comment cela se fait et comment arranger cela? Voilà comment ça se présente :



Par contre, je me suis lancé sur le media querries, voilà ce que j'ai ajouté :

@media screen and (max-width: 758px) {
.row1module, .row2module, .row3module, #left, #center, #right {
float: none !important;
width: 100% !important;
}
.row1module > div.inner, .row2module > div.inner, .row3module > div.inner,
#left > div.inner, #center > div.inner, #right > div.inner {
margin: 5px 0px 5px 0px !important;
}
.items-row .item, .column, .flexiblemodule, .logobloc {
width: auto !important;
float: none;
margin: 0 !important;
}
}

Avec ça, à partir de 758px, le menu haut s'affiche verticalement et mes modules aussi, avec une bonne mise en page.
Par contre, cela m'a fait remarqué que mon footer ne s'adapte pas correctement. En effet, l'espace du module en lui-même s'adapte mais les écrits s'empilent les uns sur les autres et dépassent du footer (illisible) et j'avais mis une image de fond qui du coup se répète en hauteur. Je dois précisé que mon footer est composé d'un tableau d'une ligne x 3 colonnes. J'ai cherché sur le net mais je n'ai rien trouvé qui fonctionne. Sauriez-vous quel @media il faut utiliser et comment ?

Merci d'avance pour vos réponses !

[BruceHarper]

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

Bonjour,

Pour tous ceux qui ont du mal avec le css et la mise en place des polices google (comme moi), j'ai trouvé comment faire en lisant plusieurs tutos et notamment celui-ci : http://www.html5-css3.fr/css3/police...ce-google-font et regardé directement la partie "Les Web Fonts avec Google Font" en milieu de page. Cela devrait régler votre problème. Pensez à tester si ça fonctionne avec une police suffisamment différente de celle d'origine comme l'a indiqué Rajoz.
En substance, après la balise <head>, vous mettez/remplacé par exemple avec la police Open Sans :

<?php if ($this->params->get('googleFont')) : ?>		
		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:600">
		<style type="text/css">
			h1,h2,h3,h4,h5,h6,.site-title? nav a {
			font-family: 'Open Sans', serif;			
    }
		</style>

Pensez à changer la police à utiliser dans le template

[BruceHarper]

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

Bonjour,

Serait-il possible d'avoir les réponses à ces trois questions :

1) est-il possible d'appliqué un style spécifique pour FF tout en gardant un style différent par défaut pour les autres navigateurs? et si oui, comment? (j'ai cru comprendre qu'en utilisant php c'est possible mais les codes que j'ai trouvé sont moches et ne fonctionnent pas)

2) un morceau de titre passe à la ligne suivante mais toujours groupé avec le reste du titre. C'est assez étrange vu qu'il reste de la place en bout de menu. Comment cela se fait et comment arranger cela?

3) mon footer ne s'adapte pas correctement. En effet, l'espace du module en lui-même s'adapte mais les écrits s'empilent les uns sur les autres et dépassent du footer (illisible) et j'avais mis une image de fond qui du coup se répète en hauteur. Sauriez-vous quel @media il faut utiliser et comment ?

Merci beaucoup par avance !