[RESOLU] Modifier élément accueil du menu et ajuster les éléments

[nini1505]

Bonjour,

Je suis sous presta 3.7.1 et j'ai le menu de Julien Breux V 2.7.1

1/ Je souhaiterais modifier le titre accueil de mon menu par une image tout en conservant le lien.


2 /Par ailleurs comme vous pourrez voir, j'ai mis mes éléments sur 2 lignes mais je ne parviens pas à les placer dans ma barre de menu correctement.
J'ai essayé plusieurs solutions mais il y a toujours un problème.
J'ai essayé de mettre

display: -moz-groupbox

, mais du coup, mon sous menu dans cartes postales n'est plus centré...

Que pensez vous d'un selecteur? Comment devrais je le rédiger?

Merci par avance pour toutes vos réponses et votre aide!

[Broceliande]

Bonjour,
Pour l'image il suffirait d'ajouter en dur un li personnalisé dans le tpl du module

Pour les lignes , si tu regarde superfish-modified.css , autour de la ligne 112 , le padding-top n'est pas spécifié , il est donc hérité . Si tu l'ajoutes tu récupère l'espace perdu :

.sf-menu a.sf-with-ul {
padding-right: 2.25em;
height: 14px;
line-height: 14px;
min-width: 2px;
padding-top: 0px;
}

[nini1505]

Merci pour ta réponse

1/ pour l'image: je pense que c'est ici que je dois l'insérer li mais de quelle façon?

{if $menu.items|@count > 0}
   {if $menu.hook == 'top'}{/if}
   <!-- MODULE JBX_MENU -->


         {foreach from=$menu.items item=item name=menuTree}
             {include file=$menu_tpl_tree}
         {/foreach}
         {if $menu.searchable_active}

             <form id="searchbox" action="search.php" method="get">
                 <input type="hidden" value="position" name="orderby" />
                 <input type="hidden" value="desc" name="orderway" />
                 <input type="text" name="search_query" id="search_query_menu" class="search" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query}{/if}" autocomplete="off" />
                 {if $menu.searchable_button}
                     <input type="submit" value="ok" class="search_button" />
                 {/if}
             </form>

         {/if}

       <!-- /MODULE JBX_MENU -->
{/if}
{if $menu.hook == 'menu' && $menu.items|@count > 0}{/if}

2/ J'avais fait le padding top mais ça décale le sous menu Europe...

Merci @ toi

[Broceliande]

2/ J’avais fait le padding top mais ça décale le sous menu Europe…

Merci @ toi

Tu peux compenser ça par un margin top du li de sous menu , en ajoutant
.sf-menu li li, .sf-menu li li li {
margin-top:xxpx;
}

sachant que ta barre de menu fait 30px , et que ton line-height est de 14px , 14*2 = 28 , le sous menu est décalé de 2px en principe

[Broceliande]

et donc , pour le home personnalisé, un truc dans le genre , juste après

• :
  

{if $menu.items|@count > 0}
   {if $menu.hook == 'top'}{/if}
   <!-- MODULE JBX_MENU -->





         {foreach from=$menu.items item=item name=menuTree}
             {include file=$menu_tpl_tree}
         {/foreach}
         {if $menu.searchable_active}

             <form id="searchbox" action="search.php" method="get">
                 <input type="hidden" value="position" name="orderby" />
                 <input type="hidden" value="desc" name="orderway" />
                 <input type="text" name="search_query" id="search_query_menu" class="search" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query}{/if}" autocomplete="off" />
                 {if $menu.searchable_button}
                     <input type="submit" value="ok" class="search_button" />
                 {/if}
             </form>

         {/if}

       <!-- /MODULE JBX_MENU -->
{/if}
{if $menu.hook == 'menu' && $menu.items|@count > 0}{/if}

seulement tu devras probablement définir quelques propriétés css pour la classe home-item ...

[nini1505]

Merci beaucoup pour ton aide.
Je vais essayer tout cela et je te tiens informé.
Merci encore

[nini1505]

Je n'ai pas encore essayé mais voici ce que j'ai fait pour le menu (pas l'image accueil) et ça fonctionne au poil

LIGNE 45

.sf-menu a {
   display:block;
   position:relative;
=>    width: 5em


LIGNE  80
.sf-menu a {
 border: 0;
/*    border-left:    1px solid #fff;
   border-top:        1px solid #CFDEFF; */
/*    padding:         .75em 1em;*/
   padding:         0 1em;
   text-decoration:none;
=>    display:table-cell;
=>    height:30px;
=>    vertical-align:middle;
}

LIGNE 115

.sf-menu a.sf-with-ul {
       padding-right:     2.25em;
=>modifier    height:30px;
=>        line-height:14px;
       vertical-align:middle
       *padding-top:2px;
       *height:19px;
       min-width:        2px; /* trigger IE7 hasLayout so spans position accurately */

J'essaierai quand même ta proposition pour avoir le choix du roi!

[Broceliande]

ligne 115 tu as une erreur css :

vertical-align: middle *padding-top:2px;

les commentaires en css sont à placer entre /* commentaire */
* ne suffit pas donc ta propriété vertical-align n'est en principe pas prise en compte

[Broceliande]

un petit détail , il te reste toujours un décalage d'1 ou 2 pixels dans ton sous-menu

[nini1505]

Je viens de mettre 29 px au lieu de 30.

avec ou sans *padding-top" ça ne me change rien, étrange
c'est vrai que vertical-align à l'air de ne pas être prise en compte car ça ne s'affiche pas dans Firebug. Je dois mettre quoi exactement car je ne connais pas trop les *
mon soucis est IE8 mon sf-sub-indicator d'Europe est aligné sous celui de France mais pas au bout comme dans FF.
As tu une idée stp?

Merci ;-)