Modifier un menu horizontal en tête de page
zipang Membre non connecté
-
Booster Bazooka
- Voir le profil du membre zipang
- Inscrit le : 25/11/2007
- Site internet
- Groupes :
je suis en trin de créer un thème pour un site (en local pour l'instant) et j'aurai besoin de supprimer des espaces indésirables pour mon menu horizontal qui se trouve en tête de page qui s'affiche mal à cause de ces espaces.
J'aurai donc voulu savoir si vous pouviez me dire ou se trouvait le fichier à modifier (un fichier tpl je suppose ? ) ?
Je dispose de la V4.1 de PhpBoost.
Merci d'avance.
babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
tu aurais un screen du probleme ?
Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site
zipang Membre non connecté
-
Booster Bazooka
- Voir le profil du membre zipang
- Inscrit le : 25/11/2007
- Site internet
- Groupes :
Ce qui est en bleu, c'est ce qui s'affiche avec le :hover sur les liens. Je voudrais supprimer les 2 espaces au niveau de test et test2 (d'ailleurs, étrange qu'il n'y en ait pas pour rapport de bug). J'aimerai également supprimer le premier élément de la liste qui est vide, j'imagine qu'il s'agit du même fichier ?
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
en général, cela vient de marge sur les élements li.
Est-ce que tu aurais le code tpl que tu vois dans ton navigateur pour être certain des ajustement à faire ?
ElenWii
babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
Il est préférable de mettre le background sur le ul
il y a un hack en mettant un margin négatif sur le li mais ce n'est pas toujours la meilleure solution.
dans le global.css de ton theme tu dois avoir un
Code CSS :
nav.menu-horizontal ul li { display: inline; margin: 8px; }
essaye avec
Code CSS :
nav.menu-horizontal ul li { display: inline; margin: 0 -4px 0 0; }
A vérifier sur plusieurs navigateur
Je ne me suis jamais vraiment penché sur ce problème, si d'autres ont des solutions, je suis aussi preneur
Pour le premier item, je pense que tu dois utiliser le menu horizontal qui affiche le titre du menu dans un premier li , même si celui-ci n'est pas renseigné
soit tu passes en menu horizontal déroulant, qui, lui n'affiche pas le titre du menu, soit tu caches le premier item du niveau 1
à la suite ajouter
Code CSS :
nav.menu-horizontal > ul > li:first-child { display: none; }
sans ton code ce n'est pas évident mais ça te donne quelques pistes
Édité par babsolune Le 26/10/2014 à 19h31
Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site
zipang Membre non connecté
-
Booster Bazooka
- Voir le profil du membre zipang
- Inscrit le : 25/11/2007
- Site internet
- Groupes :
Pour les marges, j'ai testé sur firefox et sa fonctionnement plus ou moins : les marges ne sont plus là mais par contre le dernier élément du menu est passé juste en dessous rapport de bug.
Concernant le code tpl, non, je ne l'ai pas sachant que je ne trouve pas le fichier et j'aurai justement voulu savoir ou je pouvais le trouver car selon moi, le problème des marges à l'air de venir d'espaces indésirables dans le code html quand je regarde la source (j'ai testé en supprimant les espaces avec firebug dans le html et quand je les supprimes, les "marges" ou plutôt espaces en l’occurrence, disparaissent).
babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
tu utilises ton propre theme ou le theme base ?
Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site
zipang Membre non connecté
-
Booster Bazooka
- Voir le profil du membre zipang
- Inscrit le : 25/11/2007
- Site internet
- Groupes :
.Voici le code html du menu copié depuis firebug :
Code HTML :
<div id="top-header"> <div id="site-infos"> <div id="site-logo"><a href="http://www.guiuml.com"><img alt="guiuml" src="/GuiUML_nouveauSite/templates/base/theme/images/logo.png"></a></div> <!--<div id="site-name-container"> <a id="site-name" href="/GuiUML_nouveauSite/">GuiUML</a> <span id="site-slogan"></span> </div>--> </div> <!-- Menu --> <!-- Title --> <nav class="menu-horizontal"> <ul> <li> <span></span> </li> <!-- Simple Menu Link --> <li><a title="Rapport de bug" href="">Rapport de bug</a></li> <!-- Simple Menu Link --> <li><a title="test" href="">test</a></li> <!-- Simple Menu Link --> <li><a title="test2" href="">test2</a></li> </ul> </nav> <script> <!-- function check_search_mini_form_post() { var textSearched = document.getElementById('TxTMiniSearched').value; if (textSearched.length > 3) { textSearched = escape_xmlhttprequest(textSearched); return true; } else { alert('La chaine recherchée doit faire au moins 4 caractères !'); return false; } } --> </script> <form method="post" onsubmit="return check_search_mini_form_post();" action="/GuiUML_nouveauSite/search/search.php#results"> <div class="input-element-button" id="mini-search-form"> <input type="text" placeholder="Recherche..." value="" name="q" id="TxTMiniSearched"> <input type="hidden" value="Recherche" name="search_submit"> <button name="search_submit" type="submit"><i class="fa fa-search"></i></button> </div> </form> </div>
babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
zipang :J'utilise le thème de base que je suis en trin de modifier pour créer un nouveau thème pour être exact
C'est mieux de creer un nouveau theme (copie du theme base) et de le modifier, rapport aux mises à jour qui pourraient annuler tes modif sur le theme base
zipang :
Voici le code html du menu copié depuis firebug :
Code HTML :<div id="top-header"> <div id="site-infos"> <div id="site-logo"><a href="http://www.guiuml.com"><img alt="guiuml" src="/GuiUML_nouveauSite/templates/base/theme/images/logo.png"></a></div> <!--<div id="site-name-container"> <a id="site-name" href="/GuiUML_nouveauSite/">GuiUML</a> <span id="site-slogan"></span> </div>--> </div> <!-- Menu --> <!-- Title --> <nav class="menu-horizontal"> <ul> <li> <span></span> </li> <!-- Simple Menu Link --> <li><a title="Rapport de bug" href="">Rapport de bug</a></li> <!-- Simple Menu Link --> <li><a title="test" href="">test</a></li> <!-- Simple Menu Link --> <li><a title="test2" href="">test2</a></li> </ul> </nav> </div>
il est bizarre ton code, niveau indentation on devrait par défaut avoir
Code HTML :
tu es à jour niveau navigateur ?
Tu as remanié le code avant de le publier ?
sinon, les tpl des menus sont dans templates/default/framework/menus/links
pour les porter dans ton theme il faut copier le dossier framework dans ton theme
-- base
-- default
-- NOMDUNOUVEAUTHEME
-- -- framework
-- -- -- menus
-- -- -- -- links
-- -- -- -- -- contenu de links
-- -- images
...
tu dois vider le cache site (admin/outils/cache => vider) si tu veux voir tes modifs apparaitre
mais à mon avis la vérité est ailleurs ...
Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site
zipang Membre non connecté
-
Booster Bazooka
- Voir le profil du membre zipang
- Inscrit le : 25/11/2007
- Site internet
- Groupes :
J'ai un peu modifier le fichier body.tpl et les fichiers css mais c'est tout. Sa ne devrait pas avoir d'impact sur cette partie du code normalement.
Par contre dans le fichier tpl concernant le menu, tout me semble correct...
Sa ne pourrait pas venir d'un bug de PHPBoost (j'en doute mais on sait jamais) ?
babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
zipang Membre non connecté
-
Booster Bazooka
- Voir le profil du membre zipang
- Inscrit le : 25/11/2007
- Site internet
- Groupes :
Voici le tpl du menu :
Code HTML :
# IF C_MENU # <!-- Menu --> # IF C_FIRST_MENU # <!-- Title --> <nav class="menu-horizontal"> <ul> <li> # IF RELATIVE_URL # <a href="{REL_URL}" title="{TITLE}"># IF C_IMG #<img src="{REL_IMG}" alt="" /># ENDIF #{TITLE}</a> # ELSE # <span># IF C_IMG #<img src="{REL_IMG}" alt="" /># ENDIF #{TITLE}</span> # ENDIF # </li> # START elements #{elements.DISPLAY}# END elements # </ul> </nav> # ENDIF # # IF C_NEXT_MENU # <!-- Children --> <li> # IF RELATIVE_URL # <a href="{REL_URL}" title="{TITLE}"># IF C_IMG #<img src="{REL_IMG}" alt="{TITLE}" /> # ENDIF #{TITLE}</a> # ELSE # <span># IF C_IMG #<img src="{REL_IMG}" alt="" /># ENDIF #{TITLE}</span> # ENDIF # </li> # START elements #{elements.DISPLAY}# END elements # # ENDIF # # ELSE # <!-- Simple Menu Link --> <li><a href="{REL_URL}" title="{TITLE}"># IF C_IMG #<img src="{REL_IMG}" alt="" /># ENDIF #{TITLE}</a></li># ENDIF #
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie