La Navigation

La navigation est un élément qui a été longtemps délicat à mettre en forme et qui l'est toujours un peu. La mode était, il y a quelques années, de réaliser une navigation en images, qui se plaçaient alors les unes à côté des autres. Bien fait, ça pouvait être joli, mais si c'était mal fait on avait droit à des "coupures" entre chaque bouton et l'ensemble n'avait pas de continuité. Par ailleurs, le problème de se principe là c'est que les boutons doivent être placé dans un certain ordre, si vous avez des décorations. Si vous intervertissez deux boutons cela peut "casser" l'unité de la navigation.
Quoi qu'il en soit, c'est un élément délicat mais essentiel. Plus les années avancent, plus on réalise qu'une navigation simple et souvent plus jolie et plus efficace qu'une navigation comportant trop de fioritures. En effet, cet élément ne doit pas juste être bien intégré dans l'ensemble, il doit surtout être pratique, visible, efficace.

Généralement, on met beaucoup d'énergie dans la bannière sans penser qu'il faudra placer la navigation quelque part, ce qui nous donne un résultat classique : une bannière très grande, qui claque, et puis une navigation en dessous qui est là "parce qu'elle doit être là" mais qui n'est que fonctionnelle, qui n'a rien d'esthétique.

La difficulté de cette partie va donc reposer sur la capacité à prévoir l'emplacement d'une navigation dès que vous commencez votre thème. Je vais donc vous expliquer divers moyen de mettre en place cette navigation, de sorte que, au moment de réaliser votre thème, ou plutôt votre schéma de thème (ce qui est encore mieux) vous ayez en tête ces possibilités pour choisir celle qui va le mieux avec vos idées.

Mise en forme simple par CSS

Nous pourrions commencer par une navigation image qui serait le plus tentant, mais je préfère démarrer par une mise en forme css car même si le fait d'aller directement dans la feuille CSS pour mettre en forme quelque chose peut faire peur à certains, c'est sincèrement la façon la plus simple de procéder pour avoir ensuite une navigation légère, discrète, et sans se prendre la tête avec du découpage d'images.

Prenez tout d'abord en compte que ForumActif vous propose d'entrée deux manières d'afficher la navigation :

Panneau d'admin > Affichage > Page d'accueil > En-tête & Navigation

Vous pouvez choisir d'aligner la navigation à droite, à gauche, ou la centrer (= "Position du menu"), vous pouvez également choisir de la forcer à rester sur une même ligne au lieu de retourner à la ligne, mais ce qui vous servira le plus c'est très certainement son affichage à proprement parlé, à savoir "afficher seulement des images dans la barre de liens".
Il ne faut pas s'y tromper cependant, il y a une image dans les deux cas, ou plutôt un espace pour une image, qui sera vide ou pas selon si vous avez effectivement mis une image.

Puisque nous allons commencer par une mise en forme CSS il ne nous faut pas d'images, nous allons donc cocher "non" dans cette dernière donnée.
Si vous n'avez pas d'images attribuées à la navigation dans votre panneau d'administration à la partie "Images", vous devriez avoir quelque chose un peu comme ceci :



J'ai encadré la navigation en rouge, le cadre rouge n'est évidemment pas sur mon forum. La mise en forme actuelle est faite par un css très simple avec des couleurs, un peu comme lorsque j'ai identifié mes éléments dans la partie précédente.

Essayons de mettre une image dans la navigation, sans changer l'affichage sélectionné juste avant : je vais mettre la petite image manga qui sert d'illustration de catégorie et que vous pouvez voir en bas de mon screen ci-dessus pour mon lien "Accueil", juste afin de visualiser ce qui se passe, si elle apparait et comment. Je mets donc son adresse dans le PA comme vous pouvez le voir ici :



Vous constaterez que l'image est de 100*100px et qu'elle s'affiche à cette taille dans la prévisualisation sur la ligne image de mon tableau.

Voyons ce qu'il en est sur le forum :



Oups... Elle est toute petite. En fait elle a été redimensionnée pour être placée en temps que "puce" ou icône devant mon texte. Voilà donc ce que ForumActif nous propose pour la barre d'accueil lorsque nous affichons le texte.

Le problème c'est que dans la mise en forme que je prévois, cet espace image risque de me gêner car si vous regardez bien devant chaque mot/lien de la navigation il y a l'espace pour cette image, or si je n'en mets pas il va tout de même persister un "vide".
Mais nous trouverons bien un moment d'arranger cela le moment venu ! x)

Repérage des éléments html de la navigation

Si nous voulons les modifier, nous devons les repérer et savoir comment ces bêtes-là s'appellent. Voici le super pouvoir de "Firebug" dont je vous ai parlé avant pour trouver cette information :



Pour obtenir cela, j'ai simplement cliqué sur la navigation avec le clic droit et j'ai choisi "Inspecter l'élément". Je peux donc voir que tout les liens de la navigation portent le même nom, à savoir "mainmenu" (soit "menu principal" en anglais, logique^^). Il s'agit d'une "class" puisque plusieurs éléments portent ce nom, et pour l'utiliser dans le css il faudra donc que je mette un point devant le nom, comme ceci : ".mainmenu".

Essayons de leur mettre une couleur de fond :

Code:

.mainmenu
{
  background: #ffffff;
}

Bah... mince alors ! Qu'est-ce que c'est que ce rectangle blanc en dessous ? Et bien c'est la zone de publicité (qui apparait vide chez moi car j'ai le pluggin "Adblock", gentil petit x) ). Et le problème que l'on va souvent rencontrer pointe ici le bout de son nez : certains éléments ont le même nom ! Il n'y a pas que les liens de la navigation qui portent le nom de "mainmenu", mais le cadre pub le porte aussi, du coup on a un vilain fond blanc qui débarque de nullepart et qui nous gêne.
Comment faire ? Et bien il nous faut trouver le moyen de mieux cibler le lien de navigation et non le bloc de pub. Pour cela, on va préciser dans notre css qu'il s'agit bien du LIEN portant le nom "mainmenu" qui nous intéresse, et non tout ce qui porte ce nom, bloc compris. On va simplement ajouter un petit "a" devant le nom de la class, comme ceci :

Code:

a.mainmenu
{
  background: #ffffff;
}

Aha !! Winner ! x)
Ca fonctionne, le cadre de pub est désormais de la même couleur que mon corps de page. C'est une bonne chose de faite, mais l'on peut maintenant encore mieux voir l'espace vide qu'il y a avant le texte-lien de notre navigation...



C'est dû comme on l'a vu à l'espace image prévu par ForumActif pour des éventuelles icônes, seulement nous, nous n'en voulons pas, et nous préfèrerions que cet espace ne soit pas là. Pour cela, nous allons imposer que l'image contenue dans le "mainmenu" ne s'affiche pas.

Code:

.mainmenu img
{
  display: none;
}

Et voilà ! C'est quand même mieux pour pouvoir peaufiner notre mise en forme, non ? Remarquez que l'image que j'avais mise et que je n'ai pas enlevée exprès pour vous montrer n'est plus là.

Essayons maintenant d'appliquer un css un peu plus élaboré...

Code:

a.mainmenu
{
  background: #e7eff0;
  border: 1px solid #778485;
  box-shadow: 0px 0px 3px #161616;
  -o-box-shadow: 0px 0px 3px #161616;
  -htm-box-shadow: 0px 0px 3px #161616;
  -webkit-box-shadow: 0px 0px 3px #161616;
  -moz-box-shadow: 0px 0px 3px #161616;
  padding: 3px;
  font-size: 11px;
  font-family: impact;
  letter-spacing: 1px;
  font-weight: normal;
  color: #778485;
  text-decoration: none !important;
}

Ce qui donne :



Vous pouvez bien sûr ajouter ou retirer des propriétés comme bon vous semble, ou les modifier. Il est possible d'arrondir les bordures, d'augmenter les marges intérieures, de changer la police...
Vous pouvez également mettre un fond image sous vos liens, une texture par exemple.

Maintenant nous allons profiter de cette mise en forme avec css pour faire un effet au survol qu'il serait plus complexe de faire avec des images.

Code:

a.mainmenu
{
  background: #e7eff0;
  border: 1px solid #778485;
  box-shadow: 0px 0px 3px #161616;
  -o-box-shadow: 0px 0px 3px #161616;
  -htm-box-shadow: 0px 0px 3px #161616;
  -webkit-box-shadow: 0px 0px 3px #161616;
  -moz-box-shadow: 0px 0px 3px #161616;
  padding: 3px;
  font-size: 11px;
  font-family: impact;
  letter-spacing: 1px;
  font-weight: normal;
  color: #778485;
  text-decoration: none !important;
}
a.mainmenu:hover
{
  border: 1px solid #437DB0;
  background: #ffffff;
}

J'ai donc utilisé l'attribut "hover" permettant d'indiquer une imse en forme au survol de l'élément par le curseur. Cela nous donne désormais ceci (le lien "membre" est celui en survol) :



Et l'on peut ici appliquer ce que l'on veut aussi de la même façon que pour l'élément en "non-survol". Nous allons d'ailleurs ajouter un peu de CSS3 pour que cette transition soit douce, ce qui est plus joli :

Code:

a.mainmenu
{
  background: #e7eff0;
  border: 1px solid #778485;
  box-shadow: 0px 0px 3px #161616;
  -o-box-shadow: 0px 0px 3px #161616;
  -htm-box-shadow: 0px 0px 3px #161616;
  -webkit-box-shadow: 0px 0px 3px #161616;
  -moz-box-shadow: 0px 0px 3px #161616;
  padding: 3px;
  font-size: 11px;
  font-family: impact;
  letter-spacing: 1px;
  font-weight: normal;
  color: #778485;
  text-decoration: none !important;
  transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
}
a.mainmenu:hover
{
  border: 1px solid #437DB0;
  background: #ffffff;
  transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
}

Vous pouvez maintenant voir qu'une navigation de la sorte est facile à faire et nous vous bloquera pas dans votre design. Certes elle n'est pas toujours bien intégrée, mais elle a le mérite d'être claire et de ne pas alourdir la page.



Il y a cependant un problème que je vais vous signaler mais que vous auriez fini par trouver tout seul. On parlait tout à l'heure des éléments qui portent le même nom... eh bien j'ai le regret de vous annoncer qu'il n'y a pas que le bloc de pub qui porte le nom "mainmenu"...



Parce que les éléments qui ont un nom commun avec la navigation ne gênent pas vraiment, la mise en forme de la navigation qu'ils prennent du coup eu aussi ne choque pas. Ces éléments, ce sont les liens de navigation du profil. Allez à la page profil, vous verrez !



Et voilà. Même nom. Et ça lorsqu'on commence à modifier les forum en utilisant les class ou id des éléments déjà présents c'est parfois un vrai casse tête, je vous l'accorde. Mais il y a toujours un moyen de contourner le problème, et je vais vous l'expliquer dans la partie suivante.

En attendant, comme je vous le disais, la mise en forme sur ces liens de profil n'est pas réellement choquante, tout dépend quelle mise en forme vous appliquez en fait. Elle peut le devenir, mais le plus souvent elle passe bien.

Mise en forme CSS avec création d'un bloc "navigation"

Changer l'appellation des liens de navigation

Si cependant vous êtes comme moi et que vous vous dites "non ! Toi petit élément tu n'échapperas pas à mon contrôle !!" (phrase à prononcer avec une une voix forte, un ton dramatique et accompagnée d'un rire diabolique)... et que vous refusez qu'un autre élément prenne une mise en forme alors que vous ne le voulez pas, il y a la solution d'aller directement dans le template pour ajouter un bloc qui nous permettra de mieux désigner notre élément "lien de navigation".
... Je vous ai perdu ? Ok ok, revenez, on se calme, on prend une grande inspiration et on lit tranquillement : si j'enferme la navigation dans un bloc que j'appelle par exemple "navigation", peu importe que les liens se nomment "mainmenu", je peux aussi les désigner par "liens de mon bloc navigation", et de cette manière leur mise en forme n'affectera pas les liens du profil x).

Alors oui, il va falloir aller dans un template et changer quelque chose... mais n'ayez pas peur c'est un endroit bien plus sûr qu'on ne le pense au premier abord. Courage ! Allons ouvrir un template !



Allez dans "Affichage" > "Templates" > Général.

Vous avez une liste de template, il s'agit des codes des pages de votre forum que le staff de ForumActif a gentiment séparé et nommé afin que l'on puisse les modifier plus simplement. Celui qui nous intéresse s'appelle "overall_header", ou "Haut de page". Pour le modifier on clique sur l'image qui se trouve à droite. Là, on arrive nez à nez avec un code qui peut paraitre totalement barbare, mais ForumActif a tout de même fait beaucoup d'efforts pour nous faciliter la vie. La première grande aide est d'avoir mis des couleurs ! C'est très utile, vous verrez. La seconde c'est d'avoir indiquer les lignes... car dès que je vous dirais d'aller modifier quelque chose je vous donnerais la ligne où se situe l'élément, et ça ira beaucoup plus vite, vous ne passerez pas 20 min' à laisser glisser votre regard sur des codes que vous ne comprenez pas forcément pour trouver un bout de code et en ressortir avec les yeux qui piquent et une migraine.

Je ne vais pas vous expliquer le template, d'autres tutoriels le feront très bien. Allons tout de suite repérer où se trouve notre navigation. Elle est de la ligne 273 à 277. Il s'agit d'une "table" autrement dit un "tableau", et il faudra prendre votre mal en patience car la version phpBB2 (sur laquelle on se trouve dans ce tutoriel) est farcie de tableaux.

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>

Ces "trucs entre accolades" sont des variables. Ca vous avance pas vrai ? x) En fait, pour tenter de faire simple, ces éléments font appels à d'autres informations auxquelles nous n'avons pas accès pour les afficher sur le forum. Le {MENU_POSITION} va changer selon la position que vous avez donné à votre navigation dans le panneau. Selon les cas la propriété d'alignement sera "right", "left" ou "center". C'est donc une information qui VARIE selon ce que vous avez choisi et fait référence à une programmation PHP (langage informatique plus complexe) auquel nous n'avons pas accès. Du coup, ce qui permet l'affichage de la navigation c'est {GENERATED_NAV_BAR}.



Et bien justement, ce n'est pas dans le template, tout cela est contenu dans la variable...et nous n'avons qu'elle sous la main. C'est la raison pour laquelle certaines choses sont "bloquées". Par exemple si je voulais afficher mon lien accueil en haut de page et mon lien déconnexion en bas de page, je ne pourrais pas le faire en utilisant la navigation de ForumActif, parce que les éléments contenus dans cette variable ne peuvent pas être modifiés ou séparés.
J'aurais pas contre la possibilité de créer moi-même les liens, à la main, mais je ne parlerais pas de cette solution ici.

Ce que nous allons faire là c'est "détruire" cette table de navigation (j'aime pas les tables, donc je les casse souvent, je préviens^^) pour la remplacer par un bloc tout simplement, donc une "div".

Remplacez donc le code que j'ai cité plus haut par celui-ci :

Code:

<div id="navigation">{GENERATED_NAV_BAR}</div>

Enregistrez et n'oubliez pas de publier votre template (c'est à dire rendre les modifications effectives) en cliquant sur l'icône .





Concrètement, peu de choses ont changés. La seule différence est que notre navigation n'est plus centrée, et c'est bien normal puisque nous avons enlevé la variable de positionnement. Ce n'est pas un souci, nous pouvons la centrer facilement. Et nous allons en profiter pour changer l'appellation de notre élément css pour que la mise en forme ne s'applique QUE à la navigation et pas aux liens du profil.

Code:

#navigation
{
  text-align: center;
}
#navigation a
{
  background: #e7eff0;
  border: 1px solid #778485;
  box-shadow: 0px 0px 3px #161616;
  -o-box-shadow: 0px 0px 3px #161616;
  -htm-box-shadow: 0px 0px 3px #161616;
  -webkit-box-shadow: 0px 0px 3px #161616;
  -moz-box-shadow: 0px 0px 3px #161616;
  padding: 3px;
  font-size: 11px;
  font-family: impact;
  letter-spacing: 1px;
  font-weight: normal;
  color: #778485;
  text-decoration: none !important;
  transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
}
#navigation a:hover
{
  border: 1px solid #437DB0;
  background: #ffffff;
  transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
}

Customisation du nouveau bloc de navigation

Mais alors... pourquoi nous arrêter là ? Hum ? Nous venons de créer un bloc après tout, pourquoi ne pas le mettre en forme lui aussi ?? Au lieu d'avoir juste des boutons séparés, on pourrait créer une vraie "barre" de navigation.

Essayons de donner un peu de style à notre bloc.

Code:

#navigation
{
  width: 900px;
  padding: 5px 0;
  background: #161616;
  text-align: center;
}

Par contre notre mise en forme de bouton est du coup trop "lourde" pour la barre, essayons de rendre tout ça plus discret... et pourquoi pas, tiens, faire un fond en dégradé pour la navigation, le tout en css bien sûr x). Ce sera l'occasion de voir comment on s'y prend.

Code:

#navigation
{
  width: 900px;
  padding: 5px 0;
  background: -moz-linear-gradient(bottom, #161616, #343b3f);
  background: -o-linear-gradient(bottom, #161616, #343b3f);
  background: -webkit-linear-gradient(bottom, #161616, #343b3f);
  background: -ms-linear-gradient(bottom, #161616, #343b3f);
  background: linear-gradient(bottom, #161616, #343b3f);
  text-align: center;
  border-top: 1px solid #161616;
  border-bottom: 1px solid #343b3f;
}
#navigation a
{
  border-right: 1px solid #343b3f;
  padding: 3px;
  font-size: 11px;
  font-family: impact;
  letter-spacing: 1px;
  font-weight: normal;
  color: #778485;
  text-shadow: 1px 1px 0px #000000;
  text-decoration: none !important;
  transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
}
#navigation a:hover
{
  border-right: 1px solid #778485;
  color: #ffffff;
  transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
}

Le résultat est simple mais déjà plus esthétique. Comme vous pouvez le voir, sans image il est possible de réaliser une barre de navigation convenable et même agréable. Ainsi placée, elle termine bien l'espace bannière et offre une transition naturelle vers l'espace forum.

Déplacement du bloc de navigation

Puisque nous avons crée un bloc de navigation, pourquoi ne pas tenter de le déplacer ? Il serait par exemple amusant de le mettre au dessus de la bannière. Nous pourrions réaliser cela avec des marges et des changement de positionnement via le css mais ça sera un peu du bricolage et selon la taille de la bannière il faudrait tout ré-adapter. Nous allons plutôt tenter de changer l'emplacement de la variable de navigation et de notre bloc dans le template "Haut de page" où nous étions tout à l'heure.

Allez donc dans le template "overall_header" ou "haut de page" et retrouvez votre bloc de navigation (aux alentours de la ligne 273) :

Code:

<div id="navigation">{GENERATED_NAV_BAR}</div>

Sélectionnez-le et faites "couper", puis collez-le après cette partie là :

Code:

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
 <tr>
 <td class="bodyline">

Que vous trouverez à partir de la ligne 250. Il s'agit bien de le mettre à la suite hein, pas de le remplacer. Validez et publiez, puis actualisez votre forum.



Aha ! Voilà donc notre navigation au dessus de la bannière^^

Cela vous laisse déjà quelques choix, pas mal de choix à vrai dire, sur la manière de faire votre navigation, et nous n'avons fait aucune image ! N'oubliez pas que vous pouvez aussi :
créer un espace dans votre bannière pour la navigation puis la faire remonter ou descendre afin de placer la navigation par dessus cet endroit
mettre des images de fond dans vos boutons ou dans le bloc de navigation que l'on a créé
placer la navigation avant ou après la bannière

Fixer la navigation

Vous avez peut-être déjà vu des forum ou des sites qui bloquent la navigation afin qu'elle soit présente en permanence sur la page. On a alors un bloc fixe qui ne bouge pas malgré le scroll de page. C'est ce que nous allons faire avec notre navigation. En gardant déjà le code que nous avons, il suffit d'ajouter une seule ligne de code pour que la navigation ne bouge plus ! Il s'agit de "position: fixed", que voici, dans notre  #navigation :

Code:

#navigation
{
  position: fixed;
  width: 900px;
  padding: 5px 0;
  background: -moz-linear-gradient(bottom, #161616, #343b3f);
  background: -o-linear-gradient(bottom, #161616, #343b3f);
  background: -webkit-linear-gradient(bottom, #161616, #343b3f);
  background: -ms-linear-gradient(bottom, #161616, #343b3f);
  background: linear-gradient(bottom, #161616, #343b3f);
  text-align: center;
  border-top: 1px solid #161616;
  border-bottom: 1px solid #343b3f;
}

Regardez, la page descend mais la barre de navigation reste en haut de la page ! Par contre, vous avez probablement dû le voir en actualisant la page, mais la bannière est légèrement remontée, passant sous la barre. Donc la hauteur de la barre masque un peu le haut de la bannière. Pour remédier à cela nous allons juste descendre le #i_logo (espace bannière) de quelques dizaines de pixel :

Code:

#i_logo
{
  width: 900px;
  height: 300px;
  background: #e7eff0;
  margin-top: 28px;
}

Et voilà, le résultat est totalement similaire à celui de tout à l'heure, mais la navigation ne bougera pas lorsque le visiteur descendra le long de la page.



Mais alors... Et en cas de design "ouvert", c'est à dire avec une bannière fond par exemple, il serait bizarre d'avoir une barre de navigation coupée comme ça, qui fait la largeur du corps. Il serait plus harmonieux qu'elle fasse la largeur de la page... et c'est ce que nous allons faire là. Nous allons commencer par déplacer (encore) notre bloc de navigation dans le template, afin de carrément le sortir du corps, pour être tranquille et pouvoir le placer où on veut sans problème.
Retourner donc dans votre template "overall_header" (Haut de page) et retrouvez votre code :

Code:

<div id="navigation">{GENERATED_NAV_BAR}</div>

Coupez-le et re-collez le après ceci :

Code:

<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
 <!-- BEGIN hitskin_preview -->
 <div id="hitskin_preview" style="display: block;">
 <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
 <div class="content">
 <p>
 {hitskin_preview.L_THEME_SITE_PREVIEW}
 <br />
 <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
 </p>
 </div>
 </div>
 <!-- END hitskin_preview -->

(Ce code se termine à la ligne 221).

Nous sommes donc dans le "body", donc le corps de page, mais nous sommes sortis du "bodyline" et du "forumline".

Voyons voir ce que ça donne.



Ah. Et oui, nous avons sorti notre code du corps du forum, donc il se balade^^ La première chose à faire est de s'assurer qu'il ne va laisser aucune marge sur les côtés (à cause des padding du body sur le code de FA), et pour cela on va lui imposer les choses clairement dès le début : il doit se placer contre le haut et la gauche, au coin de page. On va en profiter pour lui donner une largeur couvrant la totalité de la page, soit "100%".

Code:

#navigation
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  background: -moz-linear-gradient(bottom, #161616, #343b3f);
  background: -o-linear-gradient(bottom, #161616, #343b3f);
  background: -webkit-linear-gradient(bottom, #161616, #343b3f);
  background: -ms-linear-gradient(bottom, #161616, #343b3f);
  background: linear-gradient(bottom, #161616, #343b3f);
  text-align: center;
  border-top: 1px solid #161616;
  border-bottom: 1px solid #343b3f;
}

Et voilà, notre navigation prend maintenant la largeur de la page et on peut placer en dessous une bannière fond sans que cela soit choquant.





Et bien... essayons ! x)



Oui Elle est toujours fixe bien sûr, mais cette fois collée en bas de la page, ce qui peut être votre choix pour un design évidemment ! Never-Utopia l'a eu placée là pour les 6 ans du forum d'ailleurs.



Voilà, nous avons fait un petit tour d'horizon des placements et mise en forme de la navigation juste avec le css, vous pourrez bien évidemment trouver autre chose, d'ailleurs je reviendrais là-dessus dans mon dernier point pour vous montrer une dernière chose en codage avec cette navigation.
Constatez déjà que la mise en forme de la navigation n'apparait plus comme un casse-tête ni comme la problématique esthétique que l'on peut avoir au départ avec ces méthodes simples.

Mise en forme avec image-texte"

Vous pourrez être limités par le codage seul, peut-être que vous préfèrerez remplacer les termes présents dans la navigation, mettre "Hiboux" à la place de "Messagerie" si vous créez un forum Harry Potter, ou mettre juste un "Quitter" à la place du long texte de la déconnexion comportant le pseudo. Vous pourrez aussi vouloir mettre le texte un peu plus en forme, avec un dégradé sur les lettres, la première lettre d'une couleur différente, ou une texture métalique... que sais-je.

Eh bien pour cela il y a une solution qui s'appelle une image Oui bon je ne vous apprend rien, certes, mais il ne faut pas oublier qu'entre l'image totale (avec texte, fond, décorations) il y a aussi l'image-texte, c'est à dire une image ne contenant que le texte voulu. C'est plus léger visuellement qu'un bouton avec un fond et cela permet d'ajouter du codage pour un mélange pouvant être très sympathique.

Commençons par la réalisation de ces fameuses image-textes. Vous avez deux solutions :
▬ la première est de créer un document de la largeur d'un bouton à peu près, disons 30*80px par exemple, et d'y mettre votre premier texte, d'enregistrer, puis de changer le texte pour écrire celui du second lien, etc.
▬ la seconde est de faire un document faisant la largeur de votre navigation (attention il ne faut pas qu'elle soit plus large que votre corps de page, dans mon cas elle ne devra pas dépasser les 900px), de la remplir avec tout le texte de navigation, puis de la découper de la même manière que nous avons vu le découpage de notre skin dans "Les fonds"

Le problème de la première solution est que la largeur de votre bloc ne variera pas, à moins que vous fassiez un bloc pour chaque texte, séparément, de la bonne largeur, afin qu'il n'y ait pas de vide sur les côtés pour un texte court genre "FAQ"... mais c'est pénible et inutile car la seconde solution résout parfaitement cela. C'est elle que nous allons appliquer.

Créons un document de 800px de large, et de disons 30px de haut. C'est fin mais suffisant. Là, je vous laisse choisir votre police et votre mise en forme. Pour bien trancher avec la mise en forme css, je vais opter pour un style "or".





Voici donc ma barre terminée sous mon logiciel, mais pas encore enregistrée puisque je vais devoir la découper :



Maintenant, le découpage : le principe est exactement le même que pour le skin. Nous allons prendre l'outil "tranche" et créer des cadres autour de chaque mot de notre navigation, comme ceci :



Il ne reste plus qu'à demander au logiciel d'enregistrer chacune de ces images, au format PNG bien sûr pour avoir notre transparence. Pour cela faites "Fichier" > "Enregistrer pour le Web". Vérifiez que vous avez bien le format "PNG-24" sélectionné en haut à droite de la fenêtre, et ce pour CHAQUE image (sélectionnez-les toutes avec l'outil de sélection, le deuxième dans la colonne de gauche de la fenêtre, afin de le vérifier).
Cliquez sur "save", puis vérifiez que vous avez bien "All slices" en bas de la fenêtre, sinon il n'enregistrera pas toutes les images. Choisissez la destination puis enregistrez.

Vous avez maintenant vos images, mais avant d'aller les placer nous allons modifier l'affichage de la barre de navigation dans le panneau d'admin' afin que le forum n'affiche que les images. Souvenez-vous que nous avions mis cet affichage pour avoir le texte. Par ailleurs, il faut ABSOLUMENT penser à enlever le morceau de code qui masque l'affichage des images, que nous avions mis pour enlever l'espace "vide" à gauche des liens ! Sinon vous allez chercher longtemps dans votre PA la raison d'un affichage vide..
Voici ce que je vais faire :
▬ je supprime le code suivant de mon css :

Code:

.mainmenu img
{
  display: none;
}

▬ je remet la navigation sous la bannière, là où elle était au départ, donc ligne 273-274 environ, après la fermeture de la "table" ligne 272
▬ je vais dans Affichage > Page d'accueil > En-tête et Navigation pour sélectionner "oui" dans "afficher seulement les images dans la barre de liens"
▬ j'héberge ensuite mes images pour mettre les liens dans le PA, dans "Affichage" > Images
▬ j'enlève également le "position: fixed" ainsi que les top/bottom: 0 et left: 0 de mon CSS, je remets la largeur de la navigation à 900px
▬ j'enlève tout le css que j'avais pour "#navigation a" afin de repartir de zéro

Voici mon nouveau code de mise en forme pour la barre #navigation afin d'avoir une couleur de fond sympa pour mon texte en or :

Code:

#navigation
{
  width: 900px;
  background: -moz-linear-gradient(bottom, #270a0a, #522424);
  background: -o-linear-gradient(bottom, #270a0a, #522424);
  background: -webkit-linear-gradient(bottom, #270a0a, #522424);
  background: -ms-linear-gradient(bottom, #270a0a, #522424);
  background: linear-gradient(bottom, #270a0a, #522424);
  text-align: center;
  border-top: 1px solid #270a0a;
  border-bottom: 1px solid #522424;
}

Et voici ce que ça donne :



Du coup mon texte possède un effet plus poussé qu'avec juste du css, mais l'ensemble reste léger : une barre avec un dégradé et les mots par dessus.

Nous avons mis des images transparentes n'est-ce pas ? Alors pourquoi ne pas essayer de créer un effet au survol sur les boutons individuellement ?
Tentons :

Code:

#navigation img:hover
{
  background: -moz-linear-gradient(bottom, #5f1818, #861818);
  background: -o-linear-gradient(bottom, #5f1818, #861818);
  background: -webkit-linear-gradient(bottom, #5f1818, #861818);
  background: -ms-linear-gradient(bottom, #5f1818, #861818);
  background: linear-gradient(bottom, #5f1818, #861818);
}

Nous aurions pu tout aussi bien ne pas mettre en forme la barre (donc le bloc #navigation) mais mettre en forme seulement les images de ce bloc (donc #navigation img, et #navigation img:hover). Nous aurions alors eu des boutons séparés comme lors de notre mise en forme simple en fullCSS.


Aller plus loin :
N'oubliez pas que la combinaison image + CSS est un monde ouvert à énormément de possibilités. Vous pouvez créer votre image puis ajouter des effets CSS très variés : une opacité changeante, faire pivoter les boutons au survol, les faire grossir, changer le fond ou l'image de fond, ajouter une bordure, faire grossir la bordure au survol...etc.


Exemple : je souhaite faire grossir une bordure sous mon image au survol. Si je n'indique aucune bordure dans le #navigation img puis que je mets une bordure de 5px dans le #navigation img:hover, la bordure sera là mais elle n'apparaitra pas lentement, elle viendra d'un coup. Si je veux une transition lente, il faut que je renseigne la bordure aussi dans le #navigation img, quitte à mettre une épaisseur de bordure de 0 !

Mise en forme avec images "pleines"

Lorsque l'on a un dessin précis en tête, il est parfois plus logique de passer par les images. Après tout, il y a des choses que le CSS ne fait pas et lorsque l'on aime créer avec son logiciel de retouche on prend plaisir à mettre des images partout x).
Nous allons donc voir maintenant la mise en place d'images dans la navigation, et simplement d'images. Tout d'abord il faut prendre conscience que 2 choix majeurs s'offrent à nous :
créer une barre de navigation avec des boutons séparés
créer une barre de navigation avec des liens attachés (donc dans une barre pleine).

Voici quelques exemples de navigation en boutons séparés :



(il manque des boutons car l'hébergement utilisé fait défaut)

Voici quelques exemples de navigation en barre (boutons reliés) :




Il y a des choses auxquelles il faut faire attention dans les deux cas. Pour les boutons séparés, comme je vous l'ai dit plus haut, si vous réalisez un document fixe pour chaque mot en ayant la même taille vous allez avoir des "trous" ou espaces vides dans la navigation et vous boutons risquent de se mettre sur deux lignes car côte à côte ils seront trop grands. Il est donc préférable d'adopter la même façon de faire que ce soit pour les boutons séparés ou liés : faire la totalité de la barre puis la découper avec la méthode vue plus haut.
Le problème d'une barre liée est relative à la complexité de votre barre. Pour vous donner un exemple, vous allez avoir les barres simples (comme dans les exemples donnés ci-dessus) où la possition des boutons ne va pas changer grand chose, du moment que le "Accueil" est au début et le "On/Off" à la fin.
Par contre, si vous faites une barre plus complexe, avec des petits personnages, des objets, des motifs, etc... et que l'on interverti ou supprime des liens de la barre, ça risque de poser problème.

Un exemple concret :



Pas mal de souci ici... Pourtant lorsque la barre est bien placée, dans le bon ordre, avec les bons liens, elle est très jolie, avec des petits brushs partout (c'était la mode à l'époque^^). Mais là, la barre est trop longue et  les liens "membres" et "groupes" ne vont pas avec le reste, ils sont coupés.
C'est simplement dû à une évolution de ForumActif qui au début ne mettait pas les liens "membres" et "groupes" par défaut pour les invités. On arrivait sur le forum, et de base nous avions tout les liens sauf "membres", "groupes", "profil" et "messagerie", qui étaient tous remplacés par "s'enregistrer". Mais maintenant que les liens "membres" et "groupes" sont présents par défaut, on a l'impression que toutes mes vieilles barres de navigation on été faites n'importe comment xD. En réalité, il est possible de corriger cela bien sûr, il suffit d'enlever de l'affichage les liens gênant, directement dans le panneau d'admin.

Allez voir dans "Affichage" > "Page d'accueil" > "En-tête et navigation"

Vous avez là la possibilité de changer l'ordre des boutons de navigation, et même d'en ajouter.

De plus, si vous allez à "Utilisateurs & Groupes" > "Permissions spéciales" vous pourrez changer les accès de vos membres aux boutons de navigation. Si par exemple vous mettez "membres" pour les boutons "membres" et "groupes", votre barre de navigation ne comportera pas ces boutons si le visiteur n'est pas identifié, ce qui règle notre souci de coupure dans le cas présent.

Tout cela pour vous dire qu'il faut se méfier avec les barres pleines et trop chargées car elles ne sont pas malléables, il est compliqué voire impossible d'ajouter un lien après coup dans la navigation sans avoir à la refaire, et si vous décidez d'ajouter un Portail à votre forum, vous serez bien content d'avoir une mise en forme CSS plutôt qu'une barre en image pleine et chargée. Cela étant, elles peuvent être parfois très sympa, et s'il s'agit de votre propre forum vous savez théoriquement quels boutons il vous faut, donc les inconvénients ne se poseront peut-être pas.

Les animations

Il est souvent plus visuel d'avoir une animation sur les boutons "nouveaux messages" et "s'inscrire", mais est-ce toujours possible de les réaliser ? En fait la réponse est simple : si vous avez une barre rectangulaire entièrement remplie, cette image sera en jpg, et il sera possible de la passer en gif pour ajouter une animation (apparition-disparition du texte par exemple). Si par contre vous avez des éléments arrondis ou des élements sortant de votre cadre, vous devrez utiliser la transparence et donc le png. Inutile alors de chercher à animer quoi que ce soit avec ça... MAIS ! Comme souvent, on peut tricher.

Regardez cet exemple :



La barre est arrondie et comporte une ombre orangée, pourtant, même si évidemment ça ne se voit pas sur le screen, le texte "s'inscrire" clignote, ce bouton est donc en gif. Y'a-t-il une transparence ? Eh bien non, et d'ailleurs cela se voit un peu si on fait attention, regardez :



On voit que les diagonales ne tombent pas juste car j'ai mis un fond à la navigation, c'est simplement le même que celui de la page, voilà tout. Alors évidemment c'est plus facile lorsqu'il s'agit d'une simple couleur de fond, ou à la limite d'une légère, plus fine que celle-ci. Mais néanmoins ça passe, ça ne choque pas.
Dans la mesure où vous avez un fond, vous pouvez faire vos animations sans problème.

Je ne vais pas réaliser un tutoriel sur la création d'une barre de navigation en image car il y a énormément de possibilité et très peu de change pour que le résultat du tutoriel vous convienne, ne serait-ce qu'à un d'entre vous. En fonction de la couleur, de l'ambiance, du type de police... le choix et grand et il faudra surtout privilégier l'harmonie avec votre design ou début de design.
L'idée est de réaliser quelque chose d'utile et d'efficace, il ne faut pas oublier que la navigation doit être pratique, et que finalement dans un forum les utilisateurs ne l'emploient pas tant que ça, en comparaison d'un site par exemple. L'essentiel se fait en cliquant sur la bannière pour revenir à l'accueil, et les deux liens utilisés sont la messagerie et le profil.
Il faut néanmoins qu'elle soit présente, visible et facilement accessible car n'oubliez pas que c'est là aussi que vos invités trouveront le bouton "s'inscrire" afin de prendre part à votre communauté.

Pensez-y : Tout comme avec la mise en forme CSS, il est tout à fait possible de déplacer le bloc navigation et de le mettre où vous voulez, collé en haut ou en bas de page, fixe ou pas.

Aller plus loin...

Pour réaliser un effet de changement au survol autre que par du CSS et ainsi faire changer l'image de la navigation il y a une méthode. Celle-ci faisant l'objet d'un tutoriel déjà présent je ne vais pas le reproduire mais simplement vous en donner le lien si vous souhaitez l'appliquer :

Rollover sur la navigation

Par ailleurs, il est aussi possible de placer la navigation verticalement ! Et pour cela, de la même façon, je vous linke un tutoriel expliquant déjà ce procédé x).

Navigation en colonne



Pour conclure cette partie, je rappellerais simplement que parfois une barre de navigation codée simplement passera mieux dans votre design qu'un bloc massif au design grossier. Cependant, puisqu'il est toujours possible de combiner graphisme et codage, et que c'est même là tout le but de ce cursus, pourquoi ne pas le faire et utiliser une partie des éléments en images, et le reste en code x).

Quoi qu'il en soit, j'espère que cet élément sera moins pénible pour vous à personnaliser. Il est vrai que, personnellement, ce n'était vraiment pas celui que je préférais, surtout à mes débuts, car dès que j'avais fini une jolie bannière j'avais toujours cette sensation désagréable que la navigation allait tout gâcher...
Si vous ne savez pas quoi faire comme type de navigation, vous avez toujours le choix de rester très simple, et généralement ça passe toujours mieux.

N'hésitez pas à faire des essais x)


Partie précédente

Salut ! Je ne sais pas si je peux poster à la suite, mais j'avais une question pour le ".mainmenu"

Pourquoi le "text-decoration: none" à une mention "!importante" juste à côté ? Je n'ai peut être pas bien vu si c'était expliqué, mais cela m'intrigue