Probleme de menu avec Elastica

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Probleme de menu avec Elastica

    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

    Cliquez sur l'image pour l'afficher en taille normale

Nom : Capture.jpg 
Affichages : 1 
Taille : 36,2 Ko 
ID : 1816643
    Cliquez sur l'image pour l'afficher en taille normale

Nom : Capture-1.jpg 
Affichages : 1 
Taille : 34,4 Ko 
ID : 1816644
    Dernière édition par jerome74210 à 22/02/2013, 08h17

  • #2
    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 */
    }

    Commentaire


    • #3
      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

      Commentaire


      • #4
        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

        Commentaire


        • #5
          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 !

          Commentaire


          • #6
            Re : Probleme de menu avec Elastica

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

            Commentaire


            • #7
              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

              Commentaire


              • #8
                Re : Probleme de menu avec Elastica

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

                Commentaire


                • #9
                  Re : Probleme de menu avec Elastica

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

                  Quelqu'un peut m'aider ???

                  Commentaire


                  • #10
                    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

                    Commentaire

                    Annonce

                    Réduire
                    Aucune annonce pour le moment.

                    Partenaire de l'association

                    Réduire

                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X