AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Petits soucis : code navigation

Petits soucis : code navigation  posté le :
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 :

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
NowSprings
avatar
Codeur actif
Messages : 18
Coda'Points : 43
Date d'inscription : 24/10/2016

Re: Petits soucis : code navigation  posté le :
Salut Smile

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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/fa/empty.gif" border="0" hspace="2" alt="Connexion" title="Connexion">Connexion
                  </a> &nbsp;
               </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 !
Eluknow
avatar
Administrateur
Messages : 2183
Coda'Points : 3892
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Petits soucis : code navigation  posté le :
Coucou !

Merci pour ta réponse, mais je comprends où je modifie tout ça ?
NowSprings
avatar
Codeur actif
Messages : 18
Coda'Points : 43
Date d'inscription : 24/10/2016

Re: Petits soucis : code navigation  posté le :
Je pense que tu as mis ce code dans le template overall_header.
Eluknow
avatar
Administrateur
Messages : 2183
Coda'Points : 3892
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Petits soucis : code navigation  posté le :
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;
}
NowSprings
avatar
Codeur actif
Messages : 18
Coda'Points : 43
Date d'inscription : 24/10/2016

Re: Petits soucis : code navigation  posté le :
Il faut que tu remplaces {generated_nav_bar} par :
Code:
<ul>
              <li>
                  <a class="mainmenu" href="/">
                    <img id="i_icon_mini_index" src="https://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/fa/empty.gif" border="0" hspace="2" alt="Connexion" title="Connexion">Connexion
                  </a> &nbsp;
              </li>
            </ul>
Eluknow
avatar
Administrateur
Messages : 2183
Coda'Points : 3892
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Petits soucis : code navigation  posté le :
Le bouton connexion ne marche plus

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

NowSprings
avatar
Codeur actif
Messages : 18
Coda'Points : 43
Date d'inscription : 24/10/2016

Re: Petits soucis : code navigation  posté le :
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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/fa/empty.gif" border="0" hspace="2" alt="Groupes" title="Groupes">Groupes
                  </a> 
              </li>
              <!-- BEGIN switch_user_logged_in -->
                <li>
                  <a class="mainmenu" href="/profile?mode=editprofile">
                    <img id="i_icon_mini_profile" src="https://illiweb.com/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://illiweb.com/fa/empty.gif" border="0" hspace="2" alt="Messagerie" title="Messagerie">Messagerie
                  </a>
                </li>
                <li>
                  <a class="mainmenu" href="/login?logout">
                    <img src="https://illiweb.com/fa/empty.gif" border="0" hspace="2" alt="Messagerie" title="Messagerie">Déconnexion
                  </a>
                </li>
              <!-- END switch_user_logged_in -->
              <!-- BEGIN switch_user_logged_out -->
                <li>
                  <a class="mainmenu" href="/register">
                    <img id="i_icon_mini_register" src="https://illiweb.com/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://illiweb.com/fa/empty.gif" border="0" hspace="2" alt="Connexion" title="Connexion">Connexion
                    </a> &nbsp;
                </li>
              <!-- END switch_user_logged_out -->
            </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
Eluknow
avatar
Administrateur
Messages : 2183
Coda'Points : 3892
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Petits soucis : code navigation  posté le :
Coucou Smile

Tu as réussi ?
Eluknow
avatar
Administrateur
Messages : 2183
Coda'Points : 3892
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
A Toi de Coder - Forum de codage :: L'entraide dans cet univers :: Besoin d'aide ? :: SOS - code-
Sauter vers: