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, 07h17

  • #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
                    1 sur 2 < >

                    C'est [Réglé] et on n'en parle plus ?

                    A quoi ça sert ?
                    La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                    Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                    Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                    Comment ajouter la mention [Réglé] à votre discussion ?
                    1 - Aller sur votre discussion et éditer votre premier message :


                    2 - Cliquer sur la liste déroulante Préfixe.

                    3 - Choisir le préfixe [Réglé].


                    4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                    2 sur 2 < >

                    Assistance au forum - Outil de publication d'infos de votre site

                    Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                    Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                    Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                    UTILISER À VOS PROPRES RISQUES :
                    L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                    Problèmes connus :
                    FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                    Installation :

                    1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                    Archive zip : https://github.com/AFUJ/FPA/zipball/master

                    2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                    3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                    4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                    5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                    6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                    et remplacer www. votresite .com par votre nom de domaine


                    Exemples:
                    Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                    Télécharger le script fpa-fr.php dans: /public_html/
                    Pour executer le script: http://www..com/fpa-fr.php

                    Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                    Télécharger le script fpa-fr.php dans: /public_html/cms/
                    Pour executer le script: http://www..com/cms/fpa-fr.php

                    En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                    Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                    Voir plus
                    Voir moins
                    Travaille ...
                    X