Petits soucis : code navigation

Heyhey les gens,

je viens poster ici pour vous exposer mes petits soucis concernant la barre de navigation de mon forum.

Lien de votre forum : http://entraide-youtube.forumactif.com/
Explicitez votre problème :
Petits soucis : code navigation Aide_n10

Petits soucis : code navigation Aide_n10

Vous voyez les petites puces devant les boutons ? Elle n'y est pas devant accueil et bien j'aimerai les enlever pour les autres.
Ensuite deuxième petit soucis, c'est que mon pseudo dépasse du bouton c'est pour cela que j'aimerai qu'ils n'affichent pas le pseudo en fait :3
Code posant problème : Et bien je sais pas si c'est une question de code CSS ou des templates mais évidemment rien n'affiche les petites puces ... Oo

Je suis sûre que ça doit être un truc tout con mais bon... Personnellement j'en ai aucune idée.
Merci d'avance Petits soucis : code navigation 1388886843

Petits soucis : code navigation 1388886843

Salut

Alors, pour ton problème de puces, en fait, c'est que tu as un problème de codage.
Ta liste de liens est contenue dans ce tableau :

Code:: <table cellspacing="0" cellpadding="0" border="0" align="center" id="navSIT"><tbody><tr><td align="center"><a class="mainmenu" href="/"><img id="i_icon_mini_index" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Accueil" title="Accueil">Accueil</a> <li><a class="mainmenu" href="/calendar"><img id="i_icon_mini_calendar" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Calendrier" title="Calendrier">Calendrier</a> </li><li><a class="mainmenu" href="/faq"><img id="i_icon_mini_faq" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="FAQ" title="FAQ">FAQ</a> </li><li><a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;"><img id="i_icon_mini_search" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Rechercher" title="Rechercher">Rechercher</a> <div class="overview row3" id="search_menu" style="display:none;position:absolute;width:350px;z-index:10000"><form action="/search" method="get"><input type="hidden" name="mode" value="searchbox"><p class="title-overview row2">Rechercher</p><p class="center-overview"><input type="text" class="inputbox medium" name="search_keywords"><input type="submit" class="button1" value="Go"><br>Résultats par :<input id="rposts" type="radio" name="show_results" value="posts"> <label for="rposts">Messages</label><input id="rtopics" type="radio" name="show_results" value="topics" checked="checked"> <label for="rtopics">Sujets</label></p><hr class="dashed"><p class="center-overview"><a href="/search" rel="nofollow" title="Recherche avancée"><img src="http://2img.net/i/fa/empty.gif" width="12" height="13" alt="Recherche avancée"> Recherche avancée</a></p></form></div></li><li><a class="mainmenu" href="/memberlist"><img id="i_icon_mini_members" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Membres" title="Membres">Membres</a> </li><li><a class="mainmenu" href="/groups"><img id="i_icon_mini_groups" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Groupes" title="Groupes">Groupes</a> </li><li><a class="mainmenu" href="/register"><img id="i_icon_mini_register" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="S'enregistrer" title="S'enregistrer">S'enregistrer</a> </li><li><a class="mainmenu" href="/login" rel="nofollow"><img id="i_icon_mini_login" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Connexion" title="Connexion">Connexion</a> </li></td></tr></tbody></table>

Ce qui, une fois indenté, donne ça :

Code:: <table cellspacing="0" cellpadding="0" border="0" align="center" id="navSIT">
<tbody>
   <tr>
      <td align="center">
         <a class="mainmenu" href="/">
            <img id="i_icon_mini_index" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Accueil" title="Accueil">Accueil
         </a>
         <li>
            <a class="mainmenu" href="/calendar">
               <img id="i_icon_mini_calendar" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Calendrier" title="Calendrier">Calendrier
            </a>
         </li>
         <li>
            <a class="mainmenu" href="/faq">
               <img id="i_icon_mini_faq" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="FAQ" title="FAQ">FAQ
            </a>
         </li>
         <li>
            <a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">
               <img id="i_icon_mini_search" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Rechercher" title="Rechercher">Rechercher
            </a>
            <div class="overview row3" id="search_menu" style="display:none;position:absolute;width:350px;z-index:10000">
               <form action="/search" method="get">
                  <input type="hidden" name="mode" value="searchbox">
                  <p class="title-overview row2">Rechercher</p>
                  <p class="center-overview">
                     <input type="text" class="inputbox medium" name="search_keywords">
                     <input type="submit" class="button1" value="Go">
                     <br>
                     Résultats par : <input id="rposts" type="radio" name="show_results" value="posts">
                     <label for="rposts">Messages</label>
                     <input id="rtopics" type="radio" name="show_results" value="topics" checked="checked">
                     <label for="rtopics">Sujets</label>
                  </p>
                  <hr class="dashed">
                  <p class="center-overview">
                     <a href="/search" rel="nofollow" title="Recherche avancée">
                        <img src="http://2img.net/i/fa/empty.gif" width="12" height="13" alt="Recherche avancée"> Recherche avancée
                     </a>
                  </p>
               </form>
            </div>
         </li>
         <li>
            <a class="mainmenu" href="/memberlist">
               <img id="i_icon_mini_members" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Membres" title="Membres">Membres
            </a>
         </li>
         <li>
            <a class="mainmenu" href="/groups">
                  <img id="i_icon_mini_groups" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Groupes" title="Groupes">Groupes
            </a>
         </li>
         <li>
            <a class="mainmenu" href="/register">
               <img id="i_icon_mini_register" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="S'enregistrer" title="S'enregistrer">S'enregistrer
            </a>
         </li>
         <li>
            <a class="mainmenu" href="/login" rel="nofollow">
               <img id="i_icon_mini_login" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Connexion" title="Connexion">Connexion
            </a>
         </li>
      </td>
   </tr>
</tbody>
</table>

Au niveau de ton problème de puce, c'est normal du coup :
Le lien qui n'est pas dans une balise li est le seul sans puce, ce qui est normal puisque les balises li rajoutent forcément une puce.
Du coup :
on va mettre ce fameux lien tout seul dans une balise li
on va mettre tous les li dans une balise ul comme ils devraient l'être.
On obtient ça :

Code:: <table cellspacing="0" cellpadding="0" border="0" align="center" id="navSIT">
<tbody>
   <tr>
      <td align="center">
         <ul>
            <li>
               <a class="mainmenu" href="/">
                  <img id="i_icon_mini_index" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Accueil" title="Accueil">Accueil
               </a>
            </li>
            <li>
               <a class="mainmenu" href="/calendar">
                  <img id="i_icon_mini_calendar" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Calendrier" title="Calendrier">Calendrier
               </a>
            </li>
            <li>
               <a class="mainmenu" href="/faq">
                  <img id="i_icon_mini_faq" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="FAQ" title="FAQ">FAQ
               </a>
            </li>
            <li>
               <a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">
                  <img id="i_icon_mini_search" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Rechercher" title="Rechercher">Rechercher
               </a>
               <div class="overview row3" id="search_menu" style="display:none;position:absolute;width:350px;z-index:10000">
                  <form action="/search" method="get">
                     <input type="hidden" name="mode" value="searchbox">
                     <p class="title-overview row2">Rechercher</p>
                     <p class="center-overview">
                        <input type="text" class="inputbox medium" name="search_keywords">
                        <input type="submit" class="button1" value="Go">
                        <br>
                        Résultats par : <input id="rposts" type="radio" name="show_results" value="posts">
                        <label for="rposts">Messages</label>
                        <input id="rtopics" type="radio" name="show_results" value="topics" checked="checked">
                        <label for="rtopics">Sujets</label>
                     </p>
                     <hr class="dashed">
                     <p class="center-overview">
                        <a href="/search" rel="nofollow" title="Recherche avancée">
                           <img src="http://2img.net/i/fa/empty.gif" width="12" height="13" alt="Recherche avancée"> Recherche avancée
                        </a>
                     </p>
                  </form>
               </div>
            </li>
            <li>
               <a class="mainmenu" href="/memberlist">
                  <img id="i_icon_mini_members" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Membres" title="Membres">Membres
               </a>
            </li>
            <li>
               <a class="mainmenu" href="/groups">
                     <img id="i_icon_mini_groups" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Groupes" title="Groupes">Groupes
               </a>
            </li>
            <li>
               <a class="mainmenu" href="/register">
                  <img id="i_icon_mini_register" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="S'enregistrer" title="S'enregistrer">S'enregistrer
               </a>
            </li>
            <li>
               <a class="mainmenu" href="/login" rel="nofollow">
                  <img id="i_icon_mini_login" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Connexion" title="Connexion">Connexion
               </a>  
            </li>
         </ul>
      </td>
   </tr>
</tbody>
</table>

Là, toutes les puces ont disparu car dans ton CSS de ton forum, tu as cette ligne là :

Code:: ul {
list-style-type: none
}

A la ligne 360 si tu veux vérifier.

Ensuite on règle le problème du pseudo qui dépasse, mais d'abord, as-tu toujours le problème ? Est-ce que tu as un compte test à me passer pour que je puisse tester de moi le pb ? (enfin, que le bouton Déconnexion s'affiche au moins, car en tant qu'invité il ne s'affiche pas)

Bisous !

Coucou !

Merci pour ta réponse, mais je comprends où je modifie tout ça ?

Je pense que tu as mis ce code dans le template overall_header.

Moi mon template pour faire la navigation sur le bord j'ai modifié 3 lignes par ça :

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

Et le css c'est ça :

Code:: /* NAVIGATION */
#navSIT {
position:absolute; margin-left: -1026px; /* MODULER SELON LA LARGEUR DE SON FORUM */
line-height:12px;
}
.mainmenu img{
display:none;
}
/* LIEN NAVIGATION */
#navSIT a{
display:block;
width:145px; padding:10px; border-radius:15px 0px 0px 15px;
text-transform:uppercase; text-align:left; font-size:9px;
background:#F7D3D3; color:#D52323; /* MODIFIABLE */
transition:all 0.55s; -webkit-transition:all 0.55s;
}
/* SURVOL LIEN NAVIGATION */
#navSIT a:hover {
background:#FFFFFF; color:#D52323; /* MODIFIABLE */
}
/* MENU DE RECHERCHE */
#search_menu {
position:absolute; left:0 !important;
}
#search_menu a{
background:none !important; color:inherit !important;
}

Il faut que tu remplaces {generated_nav_bar} par :

Code:: <ul>
<li>
<a class="mainmenu" href="/">
<img id="i_icon_mini_index" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Accueil" title="Accueil">Accueil
</a>
</li>
<li>
<a class="mainmenu" href="/calendar">
<img id="i_icon_mini_calendar" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Calendrier" title="Calendrier">Calendrier
</a>
</li>
<li>
<a class="mainmenu" href="/faq">
<img id="i_icon_mini_faq" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="FAQ" title="FAQ">FAQ
</a>
</li>
<li>
<a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">
<img id="i_icon_mini_search" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Rechercher" title="Rechercher">Rechercher
</a>
<div class="overview row3" id="search_menu" style="display:none;position:absolute;width:350px;z-index:10000">
<form action="/search" method="get">
<input type="hidden" name="mode" value="searchbox">
<p class="title-overview row2">Rechercher</p>
<p class="center-overview">
<input type="text" class="inputbox medium" name="search_keywords">
<input type="submit" class="button1" value="Go">
<br>
Résultats par : <input id="rposts" type="radio" name="show_results" value="posts">
<label for="rposts">Messages</label>
<input id="rtopics" type="radio" name="show_results" value="topics" checked="checked">
<label for="rtopics">Sujets</label>
</p>
<hr class="dashed">
<p class="center-overview">
<a href="/search" rel="nofollow" title="Recherche avancée">
<img src="http://2img.net/i/fa/empty.gif" width="12" height="13" alt="Recherche avancée"> Recherche avancée
</a>
</p>
</form>
</div>
</li>
<li>
<a class="mainmenu" href="/memberlist">
<img id="i_icon_mini_members" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Membres" title="Membres">Membres
</a>
</li>
<li>
<a class="mainmenu" href="/groups">
<img id="i_icon_mini_groups" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Groupes" title="Groupes">Groupes
</a>
</li>
<li>
<a class="mainmenu" href="/register">
<img id="i_icon_mini_register" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="S'enregistrer" title="S'enregistrer">S'enregistrer
</a>
</li>
<li>
<a class="mainmenu" href="/login" rel="nofollow">
<img id="i_icon_mini_login" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Connexion" title="Connexion">Connexion
</a>  
</li>
</ul>

Le bouton connexion ne marche plus

et sans avoir changé le css juste de remplacer ça donne ça :

Petits soucis : code navigation Sans_t10

Ah oui excuse-moi, j'avais oublié qu'on était sur FA. Il faut donc rajouter les boutons et les commentaires manquants :

Code:: <ul>
<li>
<a class="mainmenu" href="/">
<img id="i_icon_mini_index" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Accueil" title="Accueil">Accueil
</a>
</li>
<li>
<a class="mainmenu" href="/calendar">
<img id="i_icon_mini_calendar" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Calendrier" title="Calendrier">Calendrier
</a>
</li>
<li>
<a class="mainmenu" href="/faq">
<img id="i_icon_mini_faq" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="FAQ" title="FAQ">FAQ
</a>
</li>
<li>
<a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">
<img id="i_icon_mini_search" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Rechercher" title="Rechercher">Rechercher
</a>
<div class="overview row3" id="search_menu" style="display:none;position:absolute;width:350px;z-index:10000">
<form action="/search" method="get">
<input type="hidden" name="mode" value="searchbox">
<p class="title-overview row2">Rechercher</p>
<p class="center-overview">
<input type="text" class="inputbox medium" name="search_keywords">
<input type="submit" class="button1" value="Go">
<br>
Résultats par : <input id="rposts" type="radio" name="show_results" value="posts">
<label for="rposts">Messages</label>
<input id="rtopics" type="radio" name="show_results" value="topics" checked="checked">
<label for="rtopics">Sujets</label>
</p>
<hr class="dashed">
<p class="center-overview">
<a href="/search" rel="nofollow" title="Recherche avancée">
<img src="http://2img.net/i/fa/empty.gif" width="12" height="13" alt="Recherche avancée"> Recherche avancée
</a>
</p>
</form>
</div>
</li>
<li>
<a class="mainmenu" href="/memberlist">
<img id="i_icon_mini_members" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Membres" title="Membres">Membres
</a>
</li>
<li>
<a class="mainmenu" href="/groups">
<img id="i_icon_mini_groups" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Groupes" title="Groupes">Groupes
</a>
</li>

<li>
<a class="mainmenu" href="/profile?mode=editprofile">
<img id="i_icon_mini_profile" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Profil" title="Profil">Profil
</a>
<li>
<li>
<a class="mainmenu" id="mp" href="/privmsg?folder=inbox">
<img src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Messagerie" title="Messagerie">Messagerie
</a>
</li>
<li>
<a class="mainmenu" href="/login?logout">
<img src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Messagerie" title="Messagerie">Déconnexion
</a>
</li>


<li>
<a class="mainmenu" href="/register">
<img id="i_icon_mini_register" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="S'enregistrer" title="S'enregistrer">S'enregistrer
</a>
</li>
<li>
<a class="mainmenu" href="/login" rel="nofollow">
<img id="i_icon_mini_login" src="https://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Connexion" title="Connexion">Connexion
</a>  
</li>

</ul>

Ok, donc là, tu as ta barre de navigation qui fonctionne selon si l'on est connecté ou pas. On s'occupera du CSS plus tard !
Vu qu'on n'utilise pas la variable {GENERATED_NAV_BAR}, le javascript concernant la messagerie ne marche plus.
Il faut donc le mettre de nous même dans Panneau d'Administration (mode avancé) -> Modules -> HTML & Javascript -> Gestion des codes JS
Et tu dois copier/coller ce code dans un nouveau code JS que tu appelleras "mp" et que tu mettras sur Toutes les pages :

Code:: jQuery().ready(function(){

/* on prend l'élément du menu de base de nouveau message */
var e= $("#i_icon_mini_new_message");

/* si il y en a pas, c'est qu'il y a pas de nouveau message donc on termine là */
if(!e.length){
return;
}else{

/* sinon */
/* on prend le nombre de nouveau message */
var n= +e.attr("title").replace(/^([1-9][0-9]*) .*$/,"$1");
if(n > 1)
   {
      $("#mp").attr("id","new_message").text(n+" messages");
}
else
{
   $("#mp").attr("id","new_message").text(n+" message");
}

$("#new_message" ).parent( "li" ).css( "background", "darker" );
}

});

Ensuite on se charge du CSS, tu me dis si ça marche Wink

Coucou

Tu as réussi ?