[RÉGLÉ] Probleme de menu avec Elastica

[jerome74210]

Bonjour

J'ai suivie le tuto de Eric Collot. (Télécharger ici)
Une fois bien avancer je me suis aperçu que quand je réduit ma page mes menus aller trop vers la gauche ! (Voir photos)
Comment faire pour que mes menus s'affiche correctement ?

Merci d'avance

[jerome74210]

Re : Probleme de menu avec Elastica

Voila mon fichier dans www/templates/ja_elastica/themes/mon-theme/css/menu/mega.css

/**
* ------------------------------------------------------------------------
* JA Elastica Template for Joomla 2.5
* ------------------------------------------------------------------------
* Copyright (C) 2004-2011 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
* @license - GNU/GPL, http://www.gnu.org/licenses/gpl.html
* Author: J.O.O.M Solutions Co., Ltd
* Websites: http://www.joomlart.com - http://www.joomlancers.com
* ------------------------------------------------------------------------
*/

.ja-megamenu {
}

.ja-megamenu a.over,
.ja-megamenu a.active {
color:#D062A4 ! important; /* Couleur du menu lorsqu'il est actif */
}

ul.megamenu {
margin: 1em; /* menu's gutter */
}

ul.megamenu li {
}

/* lv - 0
-----------------------------------*/
/* Styling ---*/
.ja-megamenu ul.level0 {
}

.ja-megamenu ul.level0 li.mega {
height: 70px;
}

.ja-megamenu ul.level0 li.mega a.mega {
font-weight: bold;
padding: 0 1em;
color: #7C6F70; /* Couleur menu quand pas selectionne */
text-transform: UPPERCASE;
height: 70px;
overflow: auto; /*Fix Margin Collapse Bug */
}

.ja-megamenu ul.level0 li.mega .has-image {
}

.ja-megamenu ul.level0 li.mega span.menu-title {
font-size: 1.25em;
margin-top: 1.25em;
}

.ja-megamenu ul.level0 li.mega span.menu-desc {
text-transform: none;
font-size: .875em;
opacity: .5;
margin-top: 2px;
color: #fff; /* Modif couleur */
padding-left: 10px; /* Modif padding left */
}

.ja-megamenu ul.level0 li.mega a img {
float: left;
padding-right: 5px;
}

.ja-megamenu ul.level0 li.over,
ul.level0 li.haschild-over {
/*background: #222; Modif couleur arriere plan menu */
background: none;
}

.ja-megamenu ul.level0 li.haschild a.mega span.menu-title,
.ja-megamenu ul.level0 li.haschild-over a.mega span.menu-title {
background: none;
padding-left: 0;
}

.ja-megamenu ul.level0 li.haschild a.mega span.menu-desc,
.ja-megamenu ul.level0 li.haschild-over a.mega span.menu-desc {
/* padding-left: 0; Suppression pading left */
}

.ja-megamenu ul.level0 li.active {
/* background: #F0F0F0; Modif couleur background et ajout couleur caracteres */
background:none;
color:#D062A4;
}

.ja-megamenu ul.level0 li.active a.mega {
/* color: #333; Modif couleur caracteres */
color:#D062A4;
}

/* lv - 1 and below
-----------------------------------*/
/* Layout ---*/
.ja-megamenu li.mega .childcontent {
display: block;
height: auto;
position: absolute;
}

.ja-megamenu li.mega .childcontent,
.ja-megamenu li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.haschild-over li.mega .childcontent ,
.ja-megamenu li.mega li.mega li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.mega li.mega li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .childcontent {
left: -999em; /*hide the menu*/
}

.ja-megamenu li.haschild-over .childcontent,
.ja-megamenu li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .childcontent {
left: auto; /*show on parent:hover*/
}

.ja-megamenu li.mega .right,
.ja-megamenu li.haschild-over li.mega .right,
.ja-megamenu li.mega li.haschild-over li.mega .right ,
.ja-megamenu li.mega li.mega li.haschild-over li.mega .right,
.ja-megamenu li.mega li.mega li.mega li.haschild-over li.mega .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .right {
right: auto; /*hide the menu*/
}

.ja-megamenu li.haschild-over .right {
right: 0; /*show on parent:hover*/
}

.ja-megamenu li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .right {
right: 12em; /*show on parent:hover*/
}

.ja-megamenu ul.level1 li.mega {
float: none;
}

.ja-megamenu ul.level1 .childcontent {
margin: -2em 0 0 160px;
}

/* Columns ---*/
.ja-megamenu .megacol {
float: left;
}

/* Styling ---*/
.ja-megamenu ul.level1 li.mega {
height: auto;
border-top: 1px solid #333;
padding: 0;
}

.ja-megamenu ul.level1 li.first {
border-top: 0;
}

.ja-megamenu ul.level1 li.mega a.mega {
background: url(../../images/bullet.png) no-repeat left 1.35em;
border: 0;
font-weight: normal;
padding: 1em;
height: auto;
text-transform: none;
color: #CCC;
}

.ja-megamenu ul.level1 li.mega a.mega span.menu-title {
background: none;
padding: 0;
margin-top: 0;
font-size: 1em;
}

.ja-megamenu ul.level1 li.haschild,
.ja-megamenu ul.level1 li.haschild-over {
background-image: url(../../images/arrow.png);
background-position: 95% center;
background-repeat: no-repeat;
padding: 0;
}

.ja-megamenu ul.level1 li.over,
ul.level1 li.haschild-over {
}

.ja-megamenu ul.level1 li.over > a.mega,
ul.level1 li.haschild-over > a.mega {
color: #FFF;
background: url(../../images/bullet-d.png) no-repeat left 1.35em;
}

.ja-megamenu ul.level1 li.active {
background: none;
}

.ja-megamenu ul.level1 li.active a.mega {
color: #FFF;
background: url(../../images/bullet-d.png) no-repeat left 1.35em;
}

.ja-megamenu ul.level1 li.group {
background: none;
}

/* CHILD CONTENT
-----------------------------------*/
.ja-megamenu .childcontent {
z-index: 999;
}

.ja-megamenu .childcontent-inner {
background: #222;
}

.ja-megamenu .level1 .childcontent-inner {
border: 1px solid #444;
}

.ja-megamenu .childcontent .ja-moduletable {
line-height: 1.5;
margin: 0;
padding: 0;
width: auto !important;
}

.ja-megamenu .childcontent .moduletable-inner {
line-height: 1.5;
margin: 1em 0 0;
padding: 0;
width: auto;
background: #222;
color: #CCC;
border-top: 0;
}

.ja-megamenu .childcontent .ja-moduletable h3 {
background: none;
margin-left: 10px;
margin-right: 10px;
text-indent: 5px;
text-transform: none;
}

.ja-megamenu .childcontent .ja-moduletable .ja-box-ct {
padding: 0;
}

.ja-megamenu .childcontent .ja-moduletable a {
text-decoration: none;
}

.ja-megamenu .childcontent .ja-moduletable a:hover,
.ja-megamenu .childcontent .ja-moduletable a:focus,
.ja-megamenu .childcontent .ja-moduletable a:active {
color: #CCC;
text-decoration: none;
}

.ja-megamenu .childcontent .ja-moduletable ul:first-child {
margin-top: 0 !important;
}

.ja-megamenu .childcontent .ja-moduletable li {
margin-bottom: 5px;
}

/* Grouped --- */
.ja-megamenu .group {
}

.ja-megamenu .group-title {
background: #666;
overflow: hidden;
padding: 1em 1em;
}

.ja-megamenu .group-title a.mega {
background-image: none !important;
padding: 0 !important;
color: #FFF !important;
}

.ja-megamenu .group-title .menu-title {
text-transform: uppercase;
font-weight: bold;
}

.ja-megamenu .group-title .menu-desc {
padding-left: 0 !important;
}

.ja-megamenu .group-content .ja-moduletable,
.ja-megamenu .group-content ul.megamenu {
margin: 10px; /* Group-content's gutter*/
}

/* reset --- */
.ja-megamenu .childcontent ul.megamenu .ja-moduletable {
padding: 0;
}

.ja-megamenu .childcontent ul.megamenu .ja-moduletable h3 {
margin-left: 0;
margin-right: 0;
}
.ja-megamenu ul.level0 li.mega {
height: 40px; /* Hauteur des cellules recevant les noms des menus */
}
.ja-megamenu ul.level0 li.mega a.mega {
font-weight: bold;
padding: 0 1em;
color: #000; /* Couleur de la police de caractères */
text-transform: none; /* Pour laisser les caractèrs en Majuscules et Minuscules */
height: 40px; /* Hauteur des cellules recevant les noms des menus */
overflow: auto; /*Fix Margin Collapse Bug */
}

[jerome74210]

Re : Probleme de menu avec Elastica

Et voila la suite !


.ja-megamenu ul.level0 li.over,
ul.level0 li.haschild-over {
background: none; /* Aucun fond */
font-weight: bold; /* Police de caractères en gras */
border-top: 5px solid #A24A91; /* Trait de 5px lors du passage de la souris */
margin-top:-5px; /* Décalage de 5px au dessus de la cellule du lien */
}
.ja-megamenu ul.level0 li.active {
background: none; /* Aucun fond */
border-top: 5px solid #fff; /* Petit trait blanc de 5px lorsque le menu est sélectionné */
margin-top:-5px; /* Décalage de 5px au dessus de la cellule du lien */
}
.ja-megamenu ul.level1 li.mega {
height: auto;
border-top: 1px solid #c3e069; /* Petit trait vert au dessus de chaque lien de menu lorsque celui-ci est au repos */
padding: 0;
}
.ja-megamenu ul.level1 li.mega a.mega { /* Sous menu */
background: url(../../images/bullet.png) no-repeat left 1.35em;
border: 0;
font-weight: bold; /* Police en gras */
padding: 1em;
height: auto;
text-transform: none; /* Couleur de police blanche */
color: #fff;
}
.ja-megamenu .childcontent-inner { /* Couleur de fond des sous menus, la couleur de la bordure et l'ombre */
background: #97BF1D; /* Fond de couleur verte */
border: 3px solid #A24A91; /* Bordure de 3px de couleur violette */
margin-top: 10px; /* Décalage de 10 px entre le menu est le sous-menu */
-webkit-box-shadow: 0px 0px 4px 0px #817f7f; /* Saf3-4, iOS 4.0.2 - 4.2, Android
2.3+ */
box-shadow: 0px 0px 4px 0px #817f7f; /* Opera 10.5, IE9, FF4+, Chrome 6+,
iOS 5 */
}
.ja-megamenu .level1 .childcontent-inner { /* Petite ligne de séparation entre les sous-menus */
border: 1px solid #c3e069;
}
#ja-mainnav { /* Placement des menus a l'endroit désiré */
float: left;
margin-top: 215px; /* Un décalage de 215px depuis le haut */
margin-left:-250px; /* Un décalage de 250px vers la gauche */
border-top: 5px solid #97bf1d; /* Bordure de 5 px de couleur verte, au dessus du menu */
}



Merci d'avance

[Five_Phil]

Re : Probleme de menu avec Elastica

Salut, j'ai aussi suivi son tuto et il est parfaitement fonctionnel, tu a dû faire une erreur, reprend depuis le début. bon courage

[jerome74210]

Re : Probleme de menu avec Elastica

Bonjour

Je reviens sur mon problème que j'ai toujours pas régler !
J'ai recommencer depuis le début et je me suis aperçu que c'est des que je rentre la commande suivante que ça merde !
margin-left:-250px;
Quand je rentre cette ligne il me decale correctement sur la gauche mais quand je réduit mon navigateur en taille résultat j'ai plus de menu !
Avez vous une solution ?
À mon avis il faudrait pouvoir dire qu'il garde le décalage sur la gauche seulement en grande page et laisser la config normal des qu'on réduit ?
Mais je sais pas comment on fait
Help me !

[jerome74210]

Re : Probleme de menu avec Elastica

Up !!!
Quelqu'un peut m'aider ???
Merci

[Five_Phil]

Re : Probleme de menu avec Elastica

alors je sais que j'ai eu un problème de chevauchement avec les tailles réduites . j'avais appliqué une astuce donnée je crois bien sur le forum joomla-support, qui était en relation avec les smartphone et autre tablette. Fait une recherche dans ce sens sur le site.
j'ai laissé tombé ce template suite à la dernière mise à jour, trop de conflit, difficile à modifier etc.. j'ai laissé tomber je perdais trop de temps à régler les problèmes de ce genre. Bon courage

[jerome74210]

Re : Probleme de menu avec Elastica

Ok je vais chercher ça alors !
Tu utilise quoi toi ? Tu as trouver un équivalent plus simple ?

[jerome74210]

Re : Probleme de menu avec Elastica

Bonjour
J'ai toujours pas régler mon problème !

Quelqu'un peut m'aider ???

[jerome74210]

Re : Probleme de menu avec Elastica

Bonjour

J'ai trouver une solution a mon problème qui semble fonctionner !
A la page 57 du Tuto a Eric Collot il a noter ce code:

#ja-mainnav {
float: left;
margin-top: 215px;
margin-left: 250px;
border-top: 5px solid #97bf1d;
}

Moi j'ai mis ceci:

#ja-mainnav {
position: absolute;
float: left;
margin-top: 162px;
margin-left: 10px;
border-top: 5px solid #c9c289;
}

Et ça fonctionne !
Dites moi ce que vous en pensez ?

Merci