Personnalisation barre de navigation à partir d'un tuto de Fangs

Bonjour à tous !

Je suis entrain d'installer une barre de navigation totalement personnalisé en suivant ce tuto : Menu Déroulant Moderne.

Je suis parvenu à installer tout ce que je voulais, à un détail prés ! Les liens "Déconnexion", "connexion" et "s'enregistrer". Le fond du problème, c'est que je ne sais pas comment faire pour qu’apparaisse seulement le lien "déconnexion" lorsqu'un membre et déconnecté et un menu "Entrer" affichant en déroulé les lien "connexion" et "s'enregistrer" lorsque le membre n'est pas connecté.

Voilà le CSS associé :

Code:

/******************************************************
BARRE NAVIGATION
*******************************************************/
.nav_txt {
  text-align: center;
  font-variant: small-caps;
  font-family:'Audiowide', cursive;
  color: #ffffff;
  background: #000000;
  font-size: 12px;
  height: 25px;
  text-shadow:1px 1px 2px #000000;
  box-shadow: 0px 0px 3px #000000;
}
.barre_nav a{
  text-align: center;
  font-variant: small-caps;
  font-family:'Audiowide', cursive;
  color: #ffffff;
  font-size: 12px;
  margin-left: 5px;
  text-decoration: none !important;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:  0.2s all;
  transition:  0.2s all;
}
.barre_nav a:hover {
  text-decoration: none !important;
  letter-spacing: 2px;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:    0.2s all;
  transition:    0.2s all;
}
.barre_nav {
  width:900px; /* à adapter selon la largeur de votre forum */
  height:175px;
  margin-left: 194px;
  margin-right: auto;
  position: fixed;
  top: 0px; /* à adapter selon les éléments présents au dessus de votre barre */
  overflow: hidden;
  z-index: 10;
}
.nav_1 {
  width:90px;
  height:25px;
  background: rgba(0, 0, 0, 0.6);
  float: left;
  border: 1px solid #33332B;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_2 {
  width:90px;
  height:25px;
  background: rgba(0, 0, 0, 0.6);
  float: left;
  border: 1px solid #33332B;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_3 {
  width:90px;
  height:25px;
  background: rgba(0, 0, 0, 0.6);
  float: left;
  border: 1px solid #33332B;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_4 {
  width:90px;
  height:25px;
  background: rgba(0, 0, 0, 0.6);
  float: left;
  border: 1px solid #33332B;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_5 {
  width:90px;
  height:25px;
  background: rgba(0, 0, 0, 0.6);
  float: left;
  border: 1px solid #33332B;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_6 {
  width:90px;
  height:25px;
  background: rgba(0, 0, 0, 0.6);
  float: left;
  border: 1px solid #33332B;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_7 {
  width:90px;
  height:25px;
  background: rgba(0, 0, 0, 0.6);
  float: left;
  border: 1px solid #33332B;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_8 {
  width:90px;
  height:25px;
  background: rgba(0, 0, 0, 0.6);
  float: left;
  border: 1px solid #33332B;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_9 {
  width:90px;
  height:25px;
  background: rgba(0, 0, 0, 0.6);
  float: left;
  border: 1px solid #33332B;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_10 {
  width:90px;
  height:25px;
  background: rgba(0, 0, 0, 0.6);
  float: left;
  border: 1px solid #33332B;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_1:hover {
  width:190px;
  height:auto;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_2:hover {
  width:190px;
  height:auto;  
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_3:hover {
  width:105px;
  height:auto;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_4:hover {
  width:105px;
  height:auto;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_5:hover {
  width:190px;
  height:400px;  
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_6:hover {
  width:190px;
  height:auto;  
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_7:hover {
  width:190px;
  height:auto;  
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_8:hover {
  width:190px;
  height:auto;  
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_9:hover {
  width:190px;
  height:auto;  
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_10:hover {
  width:190px;
  height:auto;  
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
/******************************************************
FIN NAVIGATION
*******************************************************/

Et le HTML

Code:

  <div class="barre_nav">
                
      <div class="nav_1">
                          
         <div class="nav_txt">
           <a href="http://post-apo.forumactif.org/">Index</a><br /><br /></div><br />
        <a href="http://post-apo.forumactif.org/c1-dossiers-administratifs">  Dossiers Administratifs</a><br />
        <a href="http://post-apo.forumactif.org/c2-registres">  Registres</a><br />
        <a href="http://post-apo.forumactif.org/c3-neo-genesis">  Neo-Genesis</a><br />
        <a href="http://post-apo.forumactif.org/c5-cites-etat">  Cités Etat</a><br />
        <a href="http://post-apo.forumactif.org/c6-terres-desolees">  Terres Désolées</a><br />
        <a href="http://post-apo.forumactif.org/c8-flood">  Flood</a><br /><br />
      </div>
                
      <div class="nav_2">
                          
         <div class="nav_txt">
                    F.A.Q<br /><br />        
         </div><br /><a href="http://post-apo.forumactif.org/faq">  F.A.Q FdF</a><br />
        <a href="http://post-apo.forumactif.org/f8-faq">  F.A.Q ED</a><br /><br />  
      </div>
                
      <div class="nav_3">
                          
         <div class="nav_txt">
           <a href="http://post-apo.forumactif.org/search">Recherche</a><br /><br />        
         </div>
      </div>
                
      <div class="nav_4">
                          
         <div class="nav_txt">
           <a href="http://post-apo.forumactif.org/memberlist">Citoyens</a><br /><br />        
         </div>
      </div>
    
          <div class="nav_8">
                          
         <div class="nav_txt">
                    Fichiers<br /><br />        
         </div><br /><a href="http://post-apo.forumactif.org/search?search_id=newposts"> Nouveaux Fichiers</a><br />
        <a href="http://post-apo.forumactif.org/search?search_id=activetopics">  Fichiers actifs du jour</a><br />
        <a href="http://post-apo.forumactif.org/search?search_id=unanswered">  Fichiers sans réponses</a><br />
        <a href="http://post-apo.forumactif.org/search?search_id=egosearch">  Mes Fichiers</a><br /><br />
      </div>
    
          <div class="nav_7">
                          
         <div class="nav_txt">
                    Stats<br /><br />        
         </div><br /><a href="http://post-apo.forumactif.org/memberlist?mode=today_posters"> Top 20 du Jour</a><br />
        <a href="http://post-apo.forumactif.org/privmsg?folder=sentbox">  Top 20 du forum</a><br />
        <a href="http://post-apo.forumactif.org/memberlist?mode=overall_posters">  Boite d'envoi</a><br />
        <a href="http://post-apo.forumactif.org/?mode=delete_cookies">  Supprimer les cookies</a><br /><br />
      </div>
    
     <div class="nav_9">
              <div class="nav_txt">
                    Réseaux<br /><br />        
         </div><br /><a href="http://post-apo.forumactif.org/memberlist?mode=today_posters">Facebook</a><br />
        <a href="http://post-apo.forumactif.org/privmsg?folder=sentbox">  Tweeter</a><br />
        <a href="http://post-apo.forumactif.org/memberlist?mode=overall_posters">  Tumblr</a><br />
        <a href="http://post-apo.forumactif.org/?mode=delete_cookies">  Pinterest</a><br /><br />
      </div>
                
      <div class="nav_5">
                          
         <div class="nav_txt">
                    Profil<br /><br />        
         </div><br /><a href="http://post-apo.forumactif.org/profile?mode=editprofile">  Informations</a><br />
        <a href="http://post-apo.forumactif.org/profile?mode=editprofile&page_profil=preferences">  Préférences</a><br />
        <a href="http://post-apo.forumactif.org/profile?mode=editprofile&page_profil=signature">  Signature</a><br />
        <a href="http://post-apo.forumactif.org/profile?mode=editprofile&page_profil=avatars">  Avatar</a><br />
        <a href="http://post-apo.forumactif.org/profile?mode=editprofile&page_profil=notifications">  Notifications</a><br />
        <a href="http://post-apo.forumactif.org/search?search_id=watchsearch">  Sujets Surveillés</a><br />
        <a href="http://post-apo.forumactif.org/search?search_id=draftsearch">  Brouillons</a><br />
        <a href="http://post-apo.forumactif.org/rpg_sheet_edit?u=1">  Qui suis-je ?</a><br /><br />
      </div>
    
           <div class="nav_10">
                          
         <div class="nav_txt">
                    Messagerie<br /><br />        
         </div><br /><a href="http://post-apo.forumactif.org/privmsg?folder=inbox">  Boite de Reception</a><br />
        <a href="http://post-apo.forumactif.org/privmsg?folder=sentbox">  Messages Envoyés</a><br />
        <a href="http://post-apo.forumactif.org/privmsg?folder=outbox">  Boite d'envoi</a><br />
             <a href="http://post-apo.forumactif.org/privmsg?folder=savebox">  Archives</a><br /><br />
      </div>
    
     <div class="nav_10">
     <div class="nav_txt">
                    <a href="http://post-apo.forumactif.org//login.forum?logout=true">Out {USERNAME}<br /><br />        
         </div>
      </div>
            
   </div>

Et enfin, l'adresse du forum : Eternal Drowiness

Vilà, je crois que j'oublie rien ! Merci à ceux qui pourront me donner un petit coup de main ^^

Edit : En furetant sur le forum, j'ai trouvé comment faire apparaitre un lien pour "Déconnexion", il apparait et il fonctionne, le soucis, c'est qu'il apparait même quand on est pas co au forum. Dans l'idéal, j'aimerais qu'un lien "On" se substitut au lien "Out" ... si possible ! Je vous remplace les codes ^^

Je me permet un petit up !

Coucou !

Pour faire ce que tu veux je te conseille de jeter un oeil à ce tuto : [Template, CSS, Javascript] Créer sa propre barre de navigation
La partie qui t'intéresse commence au texte "Vous avez tous vos liens ? Parfait ! ", ensuite Eraendil explique comment afficher ces liens seulement quand on est co / déco !

Merci Nihil !! Je n'avais pas du tout pensé pouvoir user d'un autre tuto ><
Petit boulet du jour !

Par contre, je ne comprend pas bien la partie concernant les nouveau MP.

Code:

<a href="URL/privmsg?folder=inbox" alt="M.P."><img src="URL" id="mp"/></a>

Je ne sais pas trop quoi faire de ce lien ><

Si je comprends bien, ce lien correspond à ce que tu as déjà dans ton code ici :

Code:

<div class="nav_txt">
            Messagerie<br /><br />       
</div><br /><a href="http://post-apo.forumactif.org/privmsg?folder=inbox">  Boite de Reception</a><br />

Dans le tuto, il est expliqué comment changer l'image quand on a un nouveau MP, mais tu voudrais plutôt changer de couleur / de style quand on a un nouveau MP, non ? C'est ça que te pose problème ? ^____^

Enfaite, je continue de faire le boulet XD J'avais pas lu correctement le lien XD
Du coup, si je comprend bien mon JS :

Mais du coup, le JS s'applique seulement si on met une image pour les Nouveau MP, c'est bien ça ?
Donc oui, effectivement, il me faudrait plus la solution pour changer... la couleur et la police du lien ^^

Edit : Au final, je tente avec une image, mais ça donne rien ><
Mon code JS :

Code:

jQuery().ready(function(){
        var newmp = $("#i_icon_mini_new_message");
        if(!newmp.length) return;
        $("#mp").attr('src','http://img15.hostingpics.net/pics/448414mailwebtreatsetc1.png');
});

Alors en fait, si tu lis bien le tuto il y a écrit :

Faites bien attention à la dernière ligne : $("#mp") correspond à l'id que vous avez mis dans votre balise img du bouton MP et attr('src', 'URL DE L'IMAGE') va vous permettre de remplacer l'image par celle correspondant au Nouveau MP.

Il faut avoir dans ton code de base une image avec l'id mp ! ^^

Don comme ceci :

Code:

<a href="http://post-apo.forumactif.org/privmsg?folder=inbox"><img src="URL_IMAGE_NORMALE" id="mp" />  Boite de Reception</a>

---

Sinon, si tu veux changer le style, ce que tu veux peux faire c'est mettre dans ton template l'id MP à la div avec tous les liens pour MP :

Code:

<div class="nav_txt" id="mp">
            Messagerie<br /><br />

Et ensuite dans le JS, on remplace

Code:

$("#mp").attr('src','http://img15.hostingpics.net/pics/448414mailwebtreatsetc1.png');

Par :

Code:

$("#mp").addClass('nouveau_mp');

Plus qu'à mettre dans le CSS le style de ton choix, par exemple, cette petite horreur :

Code:

.nouveau_mp {
    background: red;
    color: blue;
}

Ok, je vois, à peu prés @.@ <-- a passé son dimanche à coder !

MAis admettons que je sois vraiment une chieuse de base XD J'aimerais avoir simplement le mots "messagerie" dans ma barre et une image qui prend la place du mot quand il y a un nouveau message ... Qu'est ce que je dois mettre du coup, dans mon HTML, puisque là :

Code:

<a href="http://post-apo.forumactif.org/privmsg?folder=inbox"><img src="URL_IMAGE_NORMALE" id="mp" />  Boite de Reception</a>

Je peux pas mettre d'url d'image...a moins de la refaire, mais si il y a une autre solution, j'suis preneuse !

Autre petit détails concernant cette barre ... J'ai un soucis pour la centrer ! En faite, su mon écran, elle apparaît nickel, mais sur l'écran plus grand de mon chéri, elle est décalé... J'ai bien tenté l'utilisation des médiaquerries, sans grand succés ><

Pas de soucis :3

Dans ce cas là je te conseille d'opter pour la seconde solution (dans mon message précédent) et jouer avec le CSS !

Dans mon précédent message, je te proposais ceci :

Code:

<div class="nav_txt" id="mp">
            Messagerie<br /><br />

Là, ce qu'on va faire, c'est ajouter directement notre image et mettre une span autour de "Messagerie" :

Code:

<div class="nav_txt" id="mp">
<img src="URL_IMAGE" class="image_new_mp" />  <span>Messagerie</span><br /><br />

Et cette image dans le CSS, on va la masquer par défaut !

Code:

.image_new_mp {
    display: none;
}

Normalement ça ne devrait rien changer une fois la modif faite (car l'image est cachée) !

Ensuite, grâce à la modification du JS (dans le précédent message), quand on a un nouveau message, on a la classe "nouveau_mp" qui s'ajoute au bloc qui contient toute la partie messagerie (le bloc avec l'id mp).

On peut donc faire réapparaitre l'image :

Code:

.nouveau_mp .image_new_mp {
    display: block;
}

Et faire disparaitre le texte "Messagerie" :

Code:

.nouveau_mp .image_new_mp + span {
    display: none;
}

J'ai utilisé des sélecteurs CSS que tu peux retrouver dans ce tuto là : Principe du CSS : Les sélecteurs (Partie 1 : CSS2)

EDIT :

Sinon, pour centrer ta barre il va falloir faire plusieurs modifications pour centrer ta barre :
Actuellement, elle est placée grâce à ceci :

Code:

.barre_nav {
  height: 168px;
  margin-left: 255px;
  margin-right: auto;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 900px;
  z-index: 10;
}

On va remplacer ce code par ceci :

Code:

.barre_nav {
  height: 168px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.barre_nav > div {
  text-align: left;
  display: inline-block;
  float: none;
  vertical-align: top;
}

Est ce que ça fonctionne bien ?

Alurs !

Concernant l'image pour les nouveau message ... Il y a bien quelque chose qui se passe, mais l'image n'apparaît pas. Le mot passe en rouge et un espace entre le bloc "messagerie" et le bloc "profil" à sa gauche se créer ><

Concernant la barre à centrer. Ca fonctionne bien ! Sauf qu'il y a à présent un léger décalage !
Mais je pense qu'il est du à l'espace qui se créer entre "profil" et "messagerie" ><

Je me suis créé un compte test, je te laisse le supprimer quand la personnalisation sera finie <3

Pour le décalage, c'est lié à une petite particularité d'inline block. Le moyen le plus rapide de le régler c'est de mettre au CSS de ".barre_nav" cette petite ligne :

Code:

font-size: 0; /* règle soucis inline-block */

Par contre, quand je test sur ton forum, le soucis vient du JS qui n'a pas été modifié o:
Il faut remplacer :

Code:

$("#mp").attr('src','http://img15.hostingpics.net/pics/448414mailwebtreatsetc1.png');

Par :

Code:

$("#mp").addClass('nouveau_mp');

Ah, mais tu peux rester aussi <3
Blague à part ! Pour les nouveau messages, ça fonctionne !!!! Faut juste que je règle l'image.
L'espace à également disparu ! Top donc !

Par contre, le léger décalage de la barre sur la gauche persiste. Ca se joue à quelque pixel ><

Chez moi, le décalage vient de ceci tout à la fin de la barre de nav o:

Code:

<a href="http://post-apo.forumactif.org//login.forum?logout=true">          </a>

Si on l'enlève, je crois que c'est bon <3

Hey ^^ Désolée pour la réponse dix ans après la guerre... Me suis écroulé chaque soir après le boulot sans avoir la foi d'allumer l'ordi ><

Je viens de tenter ton astuce, mais ça fonctionne pas, j'ai toujours un décalage très léger de la barre ><

Est ce que tu as bien validé et publié le template ? En effet quand je regarde sur ton forum, il est toujours présent dans le code source ><

Yep ^^ Mais si j'enlève se lien ... j'ai plus de lien de déco ><

Je te met la template ^^

Code:

<link href='https://fonts.googleapis.com/css?family=Megrim' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
  <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
  <meta http-equiv="content-script-type" content="text/javascript" />
  <meta http-equiv="content-style-type" content="text/css" />
  <!-- BEGIN switch_compat_meta -->
  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
  <!-- END switch_compat_meta -->
  <!-- BEGIN switch_canonical_url -->
  <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
  <!-- END switch_canonical_url -->
  {META_FAVICO}
  {META}
  {META_FB_LIKE}
  <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
  {T_HEAD_STYLESHEET}
  {CSS}
  <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
  <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
  <script src="{JQUERY_PATH}" type="text/javascript"></script>
  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

  <!-- BEGIN switch_fb_login -->
  <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
  <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
  <!-- END switch_fb_login -->

  <!-- BEGIN switch_ticker -->
  <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
  <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
  <!-- END switch_ticker -->

  <!-- BEGIN switch_ticker_new -->
  <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
  <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
        case 'top' :
            slid_vert = true;
            break;

        case 'left':
            break;

        case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

        case 'right':
            auto_dir = 'prev';
            break;

        default:
            slid_vert = true;
      }

      $(document).ready(function() {
        var w_cont = $('#fa_ticker_container').width();

        if (w_cont > 0)
        {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
              if ($(this).height() > height_max)
              {
                  height_max = $(this).height();
              }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
              if ($(this).width() > width_item)
              {
              var ratio      = $(this).width() / width_item;
              var new_height = Math.round($(this).height() / ratio);
              $(this).height(new_height).width(width_item);
              }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
              $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
              wrap: 'circular',
              auto: {switch_ticker.STOP_TIME},
              auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
        }
        else
        {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
        }
      });
  //]]>
  </script>
  <!-- END switch_ticker_new -->

  <script type="text/javascript">//<![CDATA[
  $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
        pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
        pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
        report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
        report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
        ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
  });

  <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
  <!-- END switch_login_popup -->

  <!-- BEGIN switch_login_popup -->
  $(document).ready( function() {
      $(window).resize(function() {
        var windowWidth = document.documentElement.clientWidth;
        var popupWidth = $("#login_popup").width();
        var mypopup = $("#login_popup");

        $("#login_popup").css({
        "left": windowWidth/2 - popupWidth/2
            });
      });
  });
  <!-- END switch_login_popup -->
  //]]>
  </script>
  {GREETING_POPUP}
  <!-- BEGIN switch_ticker_new -->
  <style>
  .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
  }

  .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
  }

  .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
  }
  </style>
  <!-- END switch_ticker_new -->
  {HOSTING_JS}
  <!-- BEGIN google_analytics_code -->
  <script type="text/javascript">
  //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
  _gaq.push(['_trackPageLoadTime']);

  <!-- BEGIN google_analytics_code_bis -->
  _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
  _gaq.push(['b._trackPageview']);
  <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  //]]>
  </script>
  <!-- END google_analytics_code -->
</head>
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>       
  <div class="barre_nav">
               
      <div class="nav_1">
                         
        <div class="nav_txt">
          <a href="http://post-apo.forumactif.org/">Index</a><br /><br /></div><br />
        <a href="http://post-apo.forumactif.org/c1-dossiers-administratifs">  Dossiers Administratifs</a><br />
        <a href="http://post-apo.forumactif.org/c2-registres">  Registres</a><br />
        <a href="http://post-apo.forumactif.org/c3-neo-genesis">  Neo-Genesis</a><br />
        <a href="http://post-apo.forumactif.org/c5-cites-etat">  Cités Etat</a><br />
        <a href="http://post-apo.forumactif.org/c6-terres-desolees">  Terres Désolées</a><br />
        <a href="http://post-apo.forumactif.org/c8-flood">  Flood</a><br /><br />
      </div>
               
      <div class="nav_2">
                         
        <div class="nav_txt">
                    F.A.Q<br /><br />       
        </div><br /><a href="http://post-apo.forumactif.org/faq">  F.A.Q FdF</a><br />
        <a href="http://post-apo.forumactif.org/f8-faq">  F.A.Q ED</a><br /><br /> 
      </div>
               
      <div class="nav_3">
                         
        <div class="nav_txt">
          <a href="http://post-apo.forumactif.org/search">Recherche</a><br /><br />       
        </div>
      </div>
               
      <div class="nav_4">
                         
        <div class="nav_txt">
          <a href="http://post-apo.forumactif.org/memberlist">Citoyens</a><br /><br />       
        </div>
      </div>
   
          <div class="nav_5">
                         
        <div class="nav_txt">
                    Fichiers<br /><br />       
        </div><br /><a href="http://post-apo.forumactif.org/search?search_id=newposts"> Nouveaux Fichiers</a><br />
        <a href="http://post-apo.forumactif.org/search?search_id=activetopics">  Fichiers actifs du jour</a><br />
        <a href="http://post-apo.forumactif.org/search?search_id=unanswered">  Fichiers sans réponses</a><br />
        <!-- BEGIN switch_user_logged_in -->
        <a href="http://post-apo.forumactif.org/search?search_id=egosearch">  Mes Fichiers</a><br /><br />
        <!-- END switch_user_logged_in -->
      </div>
   
          <div class="nav_6">
                         
        <div class="nav_txt">
                    Stats<br /><br />       
        </div><br /><a href="http://post-apo.forumactif.org/memberlist?mode=today_posters"> Top 20 du Jour</a><br />
        <a href="http://post-apo.forumactif.org/privmsg?folder=sentbox">  Top 20 du forum</a><br />
        <a href="http://post-apo.forumactif.org/memberlist?mode=overall_posters">  Boite d'envoi</a><br />
        <a href="http://post-apo.forumactif.org/?mode=delete_cookies">  Supprimer les cookies</a><br /><br />
      </div>
   
    <div class="nav_7">
              <div class="nav_txt">
                    Réseaux<br /><br />       
        </div><br /><a href="...">Facebook</a><br />
        <a href="...">  Tweeter</a><br />
        <a href="...">  Tumblr</a><br />
        <a href="...">  Pinterest</a><br /><br />
      </div>
   
          <div class="nav_8">
              <div class="nav_txt">
                <a href="http://post-apo.forumactif.org/h2-music-is-life" target="_blank">Music</a><br /><br />       
        </div>
      </div>
<!-- BEGIN switch_user_logged_in -->               
      <div class="nav_9">
                         
        <div class="nav_txt">
                    Profil<br /><br />       
        </div><br /><a href="http://post-apo.forumactif.org/profile?mode=editprofile">  Informations</a><br />
        <a href="http://post-apo.forumactif.org/profile?mode=editprofile&page_profil=preferences">  Préférences</a><br />
        <a href="http://post-apo.forumactif.org/profile?mode=editprofile&page_profil=signature">  Signature</a><br />
        <a href="http://post-apo.forumactif.org/profile?mode=editprofile&page_profil=avatars">  Avatar</a><br />
        <a href="http://post-apo.forumactif.org/profile?mode=editprofile&page_profil=notifications">  Notifications</a><br />
        <a href="http://post-apo.forumactif.org/search?search_id=watchsearch">  Sujets Surveillés</a><br />
        <a href="http://post-apo.forumactif.org/search?search_id=draftsearch">  Brouillons</a><br />
        <a href="http://post-apo.forumactif.org/rpg_sheet_edit?u=1">  Qui suis-je ?</a><br /><br />
      </div>
   
          <div class="nav_10">
                         
        <div class="nav_txt" id="mp">
          <center><img src="http://img15.hostingpics.net/pics/448414mailwebtreatsetc1.png" class="image_new_mp" width="25px" /></center>  <span>Messagerie</span><br /><br />     
            </div><br />
        <a href="http://post-apo.forumactif.org/privmsg?folder=inbox">Boite de Reception</a>
        <a href="http://post-apo.forumactif.org/privmsg?folder=sentbox">  Messages Envoyés</a><br />
        <a href="http://post-apo.forumactif.org/privmsg?folder=outbox">  Boite d'envoi</a><br />
            <a href="http://post-apo.forumactif.org/privmsg?folder=savebox">  Archives</a><br /><br />
      </div>
   
    <div class="nav_11">
    <div class="nav_txt">
                    <a href="http://post-apo.forumactif.org/login?logout">Out<br /><br />       
        </div>
      </div>
 <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_user_logged_out -->
      <div class="nav_12">
    <div class="nav_txt">
                    <a href="http://post-apo.forumactif.org/login">On<br /><br />       
        </div>
      </div>
       
                <div class="nav_13">
    <div class="nav_txt">
                    <a href="http://post-apo.forumactif.org/register">S'inscrire<br /><br />       
        </div>
      </div>
 <!-- END switch_user_logged_out -->         
  </div>
 
  <div id="menu">
    <div id="menu1">
      <span style="font-family:Megrim;font-size:48px;color:white">E</span>
      <span style="font-family:Megrim;font-size:26px;color:white">ternal</span><br />
      <div style="margin-top:-15px;">
      <span style="font-family:Megrim;font-size:48px;color:white">D</span>
        <span style="font-family:Megrim;font-size:26px;color:white">rowiness</span>
      </div>
      <div class="top_site">
      <a href="..."><img src="http://i86.servimg.com/u/f86/19/29/96/07/topsit12.png" width="25px"/></a>
      <a href="..."><img src="http://i86.servimg.com/u/f86/19/29/96/07/topsit13.png" width="25px"/></a>
      <a href="..."><img src="http://i86.servimg.com/u/f86/19/29/96/07/topsit14.png" width="25px"/></a> 
        <a href="..."><img src="http://i86.servimg.com/u/f86/19/29/96/07/topsit10.png" width="25px"/></a></div>
      <center><span style="font-family:arial;font-size:10px;color:white;font-style: italic;">Un ptit vote toute les 2h !</center>
   
      <div class="navigation"> 
      <div class="lien_important"><a href="...">Réglement</a></div>
      <div class="lien_important"><a href="...">Groupe</a></div>
      <div class="lien_important"><a href="...">Corporation</a></div>
      <div class="lien_important"><a href="...">Pouvoirs</a></div>
      <div class="lien_important"><a href="...">Créatures incarnées</a></div>
        <div class="lien_important"><a href="...">Bottin d'Avatar</a></div></div>
      <br />
   
      <div class="titre-PA1"> _EFFECTIFS : </div>
      <span style="font-family:Megrim;font-size:14px;color:white">WGFP  : </span><br />
      <span style="font-family:Megrim;font-size:14px;color:white">WLFC  : </span><br />
      <span style="font-family:Megrim;font-size:14px;color:white">WMFD  : </span><br />
      <span style="font-family:Megrim;font-size:14px;color:white">MOB  : </span><br />
      <span style="font-family:Megrim;font-size:14px;color:white">IKN  : </span><br />
   
      <div class="titre-PA">&nbsp;INFLUECE_ :  </div>
      <span style="font-family:Megrim;font-size:14px;color:white">WGFP  : </span><br />
      <span style="font-family:Megrim;font-size:14px;color:white">WLFC  : </span><br />
      <span style="font-family:Megrim;font-size:14px;color:white">WMFD  : </span><br />
      <span style="font-family:Megrim;font-size:14px;color:white">MOB  : </span><br />
      <span style="font-family:Megrim;font-size:14px;color:white">IKN  : </span><br />
    </div>
    <div id="menu2">
      <div class="boutons" id="onglet_ouvrir" onclick="nav_ouvrir()">
        Ouvrir
      </div>
      <div class="boutons" id="onglet_fermer" onclick="nav_fermer()">
        Fermer
      </div>
    </div>
    <div style="clear: both;"></div>
  </div>
  <script>
    $("#onglet_ouvrir").css('display', 'none');
    function nav_ouvrir() {
      $("#onglet_ouvrir").css('display', 'none'); /*Fait disparaître le bouton ouvrir*/
      $("#onglet_fermer").css('display', 'block'); /*Fait apparaître le bouton fermer*/
      $("#menu").css('left', '0px');} /*Fait apparaître la navigation*/
    function nav_fermer() {
      $("#onglet_fermer").css('display', 'none'); /*Fait disparaître le bouton fermer*/
      $("#onglet_ouvrir").css('display', 'block'); /*Fait apparaître le bouton ouvrir*/
      $("#menu").css('left', '-172px');} /*Fait disparaître la navigation*/
  </script>
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
 
<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 -->
  <!-- BEGIN switch_login_popup -->
  <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
        <tr height="25">
            <td class="catLeft">
              <span class="genmed module-title">{SITENAME}</span>
            </td>
        </tr>
        <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
              <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                    <input type="submit" class="mainoption" value="{L_LOGIN}" />
                    <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                    <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
              </div>
              <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
        </tr>
      </table>
  </div>
  <!-- END switch_login_popup -->

  <a name="top"></a>
  {JAVASCRIPT}

  <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
        <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
              <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                    <!-- BEGIN switch_logo_center -->
                    <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                    <br />
                    <!-- END switch_logo_center -->
                    <div class="maintitle">{MAIN_SITENAME}</div>
                    <br />
                    <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
              </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
              <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                    <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                          <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                          </ul>
                        </div>
                    </td>
                  </tr>
              </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
              <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                    <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                          <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                <!-- BEGIN ticker_row -->
                                <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                <!-- END ticker_row -->
                              </div>
                          </div>
                        </div>
                    </td>
                  </tr>
              </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
              <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                    <tbody>
                        <tr>
                          <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                <!-- BEGIN giefmod_index1 -->
                                {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                <!-- END giefmod_index1 -->
                              </div>
                          </td>
                          <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                          </td>
                        </tr>
                    </tbody>
                  </table>
              </div>
            </div>
        </td>
      </tr>
  </table>
</body>
</html>
<!-- END html_validation -->
   


Aaah, je vois, c'est une erreur dans le HTML je crois !

Ici :

Code:

<div class="nav_txt">
                    <a href="http://post-apo.forumactif.org/login?logout">Out<br /><br />       
        </div>

La balise a n'est pas fermée
C'est peut-être pour ça que le navigateur en crée une seconde vide juste après.

BINGO !!!!!!
Même si j'ai du relire trois fois pour voir de quelle balise il s'agissait XD Boulet du jour !!!
Juste une dernière chose, j'ai voulu mettre un Invité après "Out", mais il ne fonctionne pas ><

Les username ne fonctionnent pas dans les templates T_T

Ce tuto pourra peut-être t'aider Utiliser les variables {USER...} et {FORUM...} autre part sur le forum

Nickel, ça fonctionne bien !!!

Une dernière question qui n'a rien à voir avec mon problème, mais comme tu t'es créer un compte ...
Est-ce que tu as des soucis sur les liens actifs ? pour cliquer au accés rapide du dernier message, ouvrir un sous forum, ou même citer ? Je n'arrive pas à savoir si c'est le forum, ou mon ordi, voir ma souris qui déconne ><

Le click sur les liens fonctionnent bien chez moi

Bon, bah, ça doit venir de chez moi alors !
Du coup, tout est bon pour moi ! Merci beaucoup ^^