Menu Horizontal décalé - problèmes avec CSS

[qwarkk]

Bonjour,

 

Je viens de démarrer sur Prestashop (1.5.4), j'ai installé un thème gratuit, que l'on peut trouver içi: http://www.freeprest...ileom-thgr-27r/. Une image plus concrète du résultat: http://www.freeprest...om-thgr-27r.jpg.

J'ai un problème avec le menu horizontal ("Menu Haut Horizontal 1.5 par Prestashop"), il est décalé sur la droite , comme si les blocs ne prenaient pas en compte ses propriétés, ils le "chevauche".

Voici ce que la donne de mon coté: http://www.hostingpi...852exemple1.png.

 

Les propriétés de ce menu sont içi: \themes\thgr00027r\css\modules\blocktopmenu\css\superfish-modified.css ; sur la balise ".sf-menu". Je ne suis pas tellement expert en CSS, encore moins sur Prestashop, j'ai testé de modifier quelques propriétés mais il y a un problème de traduction du code css quelque part, je n'ai pas tellement d'idée..;

 

Si quelqu'un pouvait m'éclairer, ça m'aiderait beaucoup... Je peux indiquer tout les renseignements qu'il faut s'il en manque...

 

Merci d'avance

[qwarkk]

J'ai trouvé une solution qui permet d'afficher en premier plan mon menu, quant au placement c'est aussi une paire de manche.

Pour ceux que ça intéresse, voici mon résultat: http://www.hostingpi...010exemple2.png

 

J'ai rajouté

.sf-menu {
float:right;
margin-bottom: 0.5em;;
[b]position:relative;
z-index:2;[/b]
}

pour que le menu soit affiché en premier plan, joué avec les paddings et les marges pour l'emplacement, enfin la balise #column sur global.css, afin de créer un espace entre la barre et le container...

 

Ce n'est pas ce qui est représenté dans la version final, je pense que ma solution n'est pas forcément adéquate... Si quelqu'un a toujours un idée, je suis preneur ; )

[Bondaty and Co]

Difficile à analyser avec une simple capture d'écran.

[qwarkk]

Oui, je comprend, il y a beaucoup d'élément, je suis enfin arrivé au résultat final, en procédant à plusieurs modifications, pour ceux qui pourraient installer ce thème et qui rencontrerait les mêmes soucis voici ce que j'ai fait: (je précise, c'est une solution, il y a surement plus simple et plus propre, mais ça fonctionne sur toutes les résolutions et navigateurs..)

 

Fichier global.css (rép: themes/thgr00027r/css )

**Structure modifiée de**

#page {background:#ececec;}
#header {
 z-index:10;
 width: 100%;
 margin:0 auto;
 height:190px;
 border-top:10px;
 background:url(../img/bg/bgH001.png) repeat-x scroll left top #666;
 box-shadow: 1px 1px 12px #555;}
.header_container {width: 980px;margin:0 auto;}
#columns {padding:0 10px 10px;z-index:1}
 #left_column {}
 #center_column {}
 #right_column {}
#footer {width: 100%;margin:0 auto;}
.footer_container {width: 980px;margin:0 auto;}

 

à

 

#page {}
#header {
z-index:10;
width: 100%;
margin:0 auto;
height:190px;
border-top:10px;
background:url(../img/bg/bgH001.png) repeat-x scroll left top #666;
box-shadow: 1px 1px 12px #555;}
.header_container {width: 980px;margin:0 auto;}
/*#columns {padding:50px 10px 10px;z-index:1; background:#ececec;}*/
#columns {padding:0px 10px 10px;z-index:1;background:#ececec;}
#left_column {}
#center_column {}
#right_column {}
#footer {width: 100%;margin:0 auto;}
.footer_container {width: 980px;margin:0 auto;}

 

Fichier grid_prestashop.css (rép: themes/thgr00027r/css )

Ligne 51 ".container_9 .grid_9 {width:979px;}" à mettre en commentaire, sinon le container se décale..

 

Fichier superfish_modified.css (rép: themes/thgr00027r/css/modules/blocktopmenu/css )

 

.sf-contener {
background:transparent url("../img/page-top.png") repeat-x scroll left bottom;
padding:8px;
height:186px

à

.sf-contener {
background:transparent url("../img/page-top.png") repeat-x scroll left bottom;
padding:14px;
width:952px;

 

.sf-right {
 margin-right: 14px;
 float: right;
 width: 7px;

à

.sf-right {
 float: center;
 width: 980;
 background-color:#ececec;

 

Supprimer les lignes "margin: 10px 0; padding:0 5px;" sur .sf_menu, ligne 22

Changer le float left en right sur sf_menu ligne 80

 

 

Fichier blockuserinfo.css (rép: themes/thgr00027r/css/modules/blockuserinfo )

Première balise "#header_right #header_user {", rajouter: margin-right:35px;

padding-bottom:7px; ET supprimer la marge top

Balise "#header_user #shopping_cart {" modifier le padding right de 43px à 50px;

Balise "#header_user_info {"; supprimer le padding: 0;

 

Fichier blockpermanentlinks.css (rép: themes/thgr00027r/css/modules/blockpermanentlinks )

Balise "ul#header_links {", rajouter margin-top:-95px;

 

 

On obtient: http://www.hostingpi...527228final.png

 

C'est beaucoup de bricolage, je suis sûr qu'il existe plus simple, mais je peux mettre "résolu" sur ma question...

[qwarkk]

euh.. je vais où pour mettre résolu, je ne vois pas d'option sur la question ^^' ........