[Resolu] Problème emplacement avec Menu horizontal de Julien Breux

[lolymeupy]

Bonjour,
j'utilise le super module de Julien Breux qui permet d'avoir un menu horizontal.
Par contre, j'ai un problème.
J'ai sur mon site (en local, donc pas d'url) :
la bannière du site (qui prend la largeur de l'écran)
puis les 3 "parties : "bienvenue, identifiez-vous" - "votre compte" - "panier(vide)"
puis le menu horizontal.

Et ce que j'aimerais donc, c'est passer le menu au dessus des 3 parties citées ci-dessus.
Et je ne vois pas du tout où ni comment faire ça...

J'ai bidouillé un peu du côté du
fichier blockuserinfo.tpl du module blockuserinfo
et du fichier header.tpl de mon thème

Mais sans succès...
Donc si quelqu'un pouvait me donner un petit coup de main la dessus.
Merci d'avance.
(j'ai PS v1.3.1 et Menu v 2.0)

[lolymeupy]

Autant pour moi :red:
J'avais bien sur joué avec la position dans modules >positions...
...mais seulement dans le Hook Header !
En fait, j'avais pas vu que le menu était aussi dans le Hook Top (situé un peu plus bas).
Donc quand j'ai vu ça, j'ai modifié dans le BO sa position dans le Hook Top et c'était bon.

Par contre, je ne sais pas comment clore le sujet...

Et en fait, j'ai autre problème avec ce menu. Cf + bas.

[Gaz]

Suffit d'éditer ton premier article et de changer le titre en mettant devant [Resolu]

[lolymeupy]

Ok. Merci Gaz.
Par contre, j'ai un nouveau problème avec ce menu.
C'est que je n'arrive pas à décaler les titres vers la droite sans décaler la search-box.
Les titres sont à gauche, et j'aimerais les ramener plus au centre du menu.
J'ai essayé de jouer avec les "padding" des ul et li dans le fichier superfish-modifier.css, mais ça me décale la search-box en même temps !
(je précise que je suis en local, donc malheureusement pas d'URL dispo)
Merci d'avance pour votre aide.

[Gaz]

donne un id à tes éléments au 1er niveau de ton menu! Comme ça tu les cibles et ça évitera d'avoir un css trop général qui ferait bouger ton champs de recherche!

[lolymeupy]

Merci de ta réponse Gaz.
Par contre, je n'arrive pas à gerer ça.
Voici mon code :

Et donc, j'ai testé ça dans mon CSS (1 est l'id du premier li) :

#1
{
   padding-left:50px;
   /*margin-left:50px; essayé avec ça aussi*/
}

Mais sans succès. Rien ne se passe ?!
J'ai testé aussi :

.sf-menu
{
   padding-left:50px;
   /*margin-left:50px;*/
}

mais evidement ça me décale tout.

Si quelqu'un a une idée ?

 Accueil
 Mon compte
 Contactez-nous
 Guideinstallation

<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="" autocomplete="off" />
<input type="submit" value="ok" class="search_button" />
</form>

[Gaz]

C'est quoi le css que tu as sur .sf-contener et .sf-menu !?

[lolymeupy]

Je te fais suivre ts le fichier CSS car c'est pas en une seule declaration pour chacune des 2 Class

/*** ESSENTIAL STYLES ***/
.sf-contener {
 clear: both;
 margin: 0px 0;
 height: 30px;
 line-height: 30px;
 padding-left: 0px;
 background: transparent url(../gfx/menu/menu.gif) no-repeat left center;
}
.sf-menu, .sf-menu * {
   margin:            0;
   padding:        0;
   list-style:        none;
}
.sf-menu {
 float: left;
 width: 960px;
   line-height:    1.2;
   /*background: transparent url(../img/blocktopmenu.gif) repeat-x;*/
}
.sf-menu ul {
   position:        absolute;
   top:            -999em;
   width:            20em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
   width:            60%;
}
.sf-menu img {

}
.sf-menu span {
 vertical-align: 7px;
}
.sf-menu li:hover {
   visibility:        inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
   float:            left;
   position:        relative;
}
.sf-menu a {
   display:        block;
   position:        relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
   left:            0;
   top:            2.7em; /* match top ul list item height */
   z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
   top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
   left:            20em; /* match ul width */
   top:            0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
   top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
   left:            20em; /* match ul width */
   top:            0;
}

/*** DEMO SKIN ***/
.sf-menu {
   float:            left;
/*    margin-bottom:    1em;*/
}
.sf-menu a {
 border: 0;
/*    border-left:    1px solid #fff;
   border-top:        1px solid #CFDEFF; */
/*    padding:         .75em 1em;*/
   padding:         .75em 1em;
   text-decoration:none;
}

#1
{
   padding-left:50px;
}

.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
   color:            #374853;
}
.sf-menu li li {
   background:        #ebebed;/*#AABDE6;*/
}
.sf-menu li li li {
   background:        #ebebed;/*#9AAEDB;*/
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu li.sfHoverForce,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
 background: transparent url(../gfx/menu/hover.gif) repeat-x;
}
.sf-menu li.noBack:hover, .sf-menu li.sfHover.noBack, .sf-menu li.sfHoverForce.noBack,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
 background: inherit;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
   background:        #d0d3d8;
   outline:        0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
   padding-right:     2.25em;
   min-width:        2px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
   position:        absolute;
   display:        block;
   right:            .75em;
   top:            1.05em; /* IE6 only */
   width:            10px;
   height:            10px;
   text-indent:     -999em;
   overflow:        hidden;
   background:        url(../gfx/menu/arrows-ffffff.png) no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
   top:            .8em;
   background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
   background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
   background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
   background:    url(../gfx/menu/shadow.png) no-repeat bottom right;
   padding: 0 8px 9px 0;
   -moz-border-radius-bottomleft: 17px;
   -moz-border-radius-topright: 17px;
   -webkit-border-top-right-radius: 17px;
   -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
   background: transparent;
}
li.sf-search {
 background: inherit;
 float: right;
 line-height: 25px;
 margin-right: 8px;
}
li.sf-search input.search {
 -moz-border-radius: 0 5px 5px 0;
 padding: 3px 0;
 padding-left: 20px;
 margin-top: 4px;
 background: #fff url(../gfx/menu/search.gif) no-repeat left center;
}
li.sf-search input.search_button {
 background-color: #fff;
 height: 20px;
 line-height: 20px;
 -moz-border-radius: 5px;
 margin-top: 5px;
 cursor: pointer;
}
/*Only 4 the betest browser*/
li.sf-search input.search_button:hover {
 background-color: #000;
 color: #fff;
}

[Gaz]

on va tester un truc barbare! tu vas mettre un padding left à ton .sf-contener pour pousser vers la droite le contenu de ton menu!!

[lolymeupy]

Voilà ce que j'ai modifié (premier bloc tt en haut du fichier CSS :

.sf-contener {
 clear: both;
 margin: 0px 0;
 height: 30px;
 line-height: 30px;
 padding-left: 100px;
 background: transparent url(../gfx/menu/menu.gif) no-repeat left center;
}

Masi ça pousse le menu et la search-box, qui dépasse maintenant du menu sur la droite.
C'est parce que le

est compris dans le

Donc ça pousse tout.
Faudrait juste décaler les 4 premiers mais pas le le

de la search-box...?

[Gaz]

sans site pour voir pas évident de faire des tests!! T'as pas un serveur en ligne qui pourrait permettre ça?

[lolymeupy]

Malheureusement non, je suis uniquement en local.J'ai commandé un serveur mais pas prêt du tout.
Tant pis, je vais continuer à bidouiller tout ça %-P
Je te remercie quand même pour ton aide.

[lolymeupy]

Bon,
j'ai fini par résoudre mon problème Enfin!
A défaut d'y arriver dans le CSS, je me suis lancé dans les .tpl.
Pour ceux qui pourrait en avoir besoin, j'ai rajouté le code suivant:

{if $item.css == 1} style="padding-left:220px;"{/if}

au début du fichier menu_tree.tpl.
Ce qui donne :

{if !$item.logged || ($item.logged && $menu.logged)}

Après, j'ai modifié le fichier superfish-modified.css pour ajuster la distance entre les titres (rajout de la propriété padding-left) :

.sf-menu li {
   float:            left;
   position:        relative;
   padding-left:     15px;
}

C'est pas ce qu'il y a de plus propre, mais à défaut...
(Merci encore pour le coup de main Gaz)