Joomladay francophone 2018 à Paris 18 et 19 mai

modifier la position de mon menu

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

  • modifier la position de mon menu

    Bonjour A tous,

    J'aimerais positionner le top menu comme sur la piece jointe.
    j'ai essayé de trifouillé dans le css mais je n'arrive à le deplacer seulement au sein de mon "cadre blanc"
    pour info j'ai fais la template avec artisteer et je n' ai pas eu le choix de position.

    http://www.jardindoz.com/oz/OZ.jpg

    voici mon idex.php :

    <?php
    defined('_JEXEC') or die('Restricted access'); // no direct access
    require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . 'functions.php';
    $document = isset($this) ? $this : null;
    $baseUrl = $this->baseurl;
    $templateUrl = $this->baseurl . '/templates/' . $this->template;
    artxComponentWrapper($document);
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/general.css" type="text/css" />

    <link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/template.css" />
    <!--[if IE 6]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie6.css" type="text/css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" type="text/css" media="screen" /><![endif]-->
    <script type="text/javascript" src="<?php echo $templateUrl; ?>/script.js"></script>
    </head>
    <body>
    <div id="art-page-background-simple-gradient">
    <div id="art-page-background-gradient"></div>
    </div>
    <div id="art-main">
    <div class="art-Sheet">
    <div class="art-Sheet-tl"></div>
    <div class="art-Sheet-tr"></div>
    <div class="art-Sheet-bl"></div>
    <div class="art-Sheet-br"></div>
    <div class="art-Sheet-tc"></div>
    <div class="art-Sheet-bc"></div>
    <div class="art-Sheet-cl"></div>
    <div class="art-Sheet-cr"></div>
    <div class="art-Sheet-cc"></div>
    <div class="art-Sheet-body">
    <jdoc:include type="modules" name="user3" />
    <jdoc:include type="modules" name="banner1" style="artstyle" artstyle="art-nostyle" />
    <?php echo artxPositions($document, array('top1', 'top2', 'top3'), 'art-block'); ?>
    <div class="art-contentLayout">
    <?php if (artxCountModules($document, 'left')) : ?>
    <div class="art-sidebar1"><?php echo artxModules($document, 'left', 'art-block'); ?>
    </div>
    <?php endif; ?>
    <div class="art-<?php echo artxCountModules($document, 'left') ? 'content' : 'content-wide'; ?>">

    <?php
    echo artxModules($document, 'banner2', 'art-nostyle');
    if (artxCountModules($document, 'breadcrumb'))
    echo artxPost(null, artxModules($document, 'breadcrumb'));
    echo artxPositions($document, array('user1', 'user2'), 'art-article');
    echo artxModules($document, 'banner3', 'art-nostyle');
    ?>
    <?php if (artxHasMessages()) : ?><div class="art-Post">
    <div class="art-Post-tl"></div>
    <div class="art-Post-tr"></div>
    <div class="art-Post-bl"></div>
    <div class="art-Post-br"></div>
    <div class="art-Post-tc"></div>
    <div class="art-Post-bc"></div>
    <div class="art-Post-cl"></div>
    <div class="art-Post-cr"></div>
    <div class="art-Post-cc"></div>
    <div class="art-Post-body">
    <div class="art-Post-inner">
    <div class="art-PostContent">

    <jdoc:include type="message" />

    </div>
    <div class="cleared"></div>

    </div>

    </div>
    </div>
    <?php endif; ?>
    <jdoc:include type="component" />

    <?php echo artxModules($document, 'banner4', 'art-nostyle'); ?>
    <?php echo artxPositions($document, array('user4', 'user5'), 'art-article'); ?>
    <?php echo artxModules($document, 'banner5', 'art-nostyle'); ?>
    </div>

    </div>
    <div class="cleared"></div>

    <?php echo artxPositions($document, array('bottom1', 'bottom2', 'bottom3'), 'art-block'); ?>
    <jdoc:include type="modules" name="banner6" style="artstyle" artstyle="art-nostyle" />
    <div class="art-Footer">
    <div class="art-Footer-inner">
    <?php echo artxModules($document, 'syndicate'); ?>
    <div class="art-Footer-text">
    <?php if (artxCountModules($document, 'copyright') == 0): ?>
    <p>Copyright &copy; 2009 ---.<br/>
    All Rights Reserved.</p>

    <?php else: ?>
    <?php echo artxModules($document, 'copyright', 'art-nostyle'); ?>
    <?php endif; ?>
    </div>
    </div>
    <div class="art-Footer-background"></div>
    </div>

    </div>
    </div>
    <div class="cleared"></div>
    <p class="art-page-footer"><a href="http://www.artisteer.com/?p=joomla_templates">Joomla template</a> created with Artisteer.</p>
    </div>

    </body>
    </html>
    Dernière édition par galhal à 28/08/2009, 16h29

  • #2
    Bonjour galhal,
    Juste une petite remarque, ton template est super bien harminisé, si tu déplaces ton menu, tu risques de "gacher" le design.

    Bon, si tu veux le faire quand même, il faut que tu crée une position dans le fichier index.php de ton template à l'endroit oùtu veux placer ton menu.
    Ensuite, tu édites le module menu et tu lui affecte la position que tu viens de créer.

    A+
    Eric
    Plein de template Joomla: http://www.kitsgraphiques-de-fred.co...la.html?s=f1-1
    Comment installer un template Joomla: http://www.kitsgraphiques-de-fred.co...es.html?s=f1-2

    Commentaire


    • #3
      MErci Eric,

      mais heu comment dire.. comment créer cette position ? peux tu me détailler ?

      Commentaire


      • #4
        Bon, tu es décidé, tu veux gacher ce beau design ?

        Alors, pour créer une position pour un module, tu dois écrire la balise suivante:
        Code HTML:
        <jdoc:include type="modules" name="nom_position" />
        avec nom_position = le nom que tu veux.

        Cette balise, tu dois l'insérer dans la balise qui gère le haut de ton template.
        Avec le code que tu as fourni, j'essaierai de l'insérer comme ça:

        Code HTML:
        <div id="art-page-background-simple-gradient">
        <jdoc:include type="modules" name="nom_position" />
        <div id="art-page-background-gradient"></div>
        </div>
        A+
        Eric
        Plein de template Joomla: http://www.kitsgraphiques-de-fred.co...la.html?s=f1-1
        Comment installer un template Joomla: http://www.kitsgraphiques-de-fred.co...es.html?s=f1-2

        Commentaire


        • #5
          merci Eric,

          alors j aifias ce que tu as dit, puis je sui allé dans la gestion des modules eta topmenu j ai affecté la position que jai crée.. lorsque je visualise sur ma page le dit menu a disparu...

          Commentaire


          • #6
            Est ce que tu peux fournir le fichier que tu as modifié ainsi que le fichier css du template et on verra ce qui se passe ?
            Plein de template Joomla: http://www.kitsgraphiques-de-fred.co...la.html?s=f1-1
            Comment installer un template Joomla: http://www.kitsgraphiques-de-fred.co...es.html?s=f1-2

            Commentaire


            • #7
              Alors oui sans probleme voici les 2 :

              css de ma template :

              http://www.jardindoz.com/oz/

              et voilà donc l index.php de la template que jai modifié suivant tes instructions :

              <?php
              defined('_JEXEC') or die('Restricted access'); // no direct access
              require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . 'functions.php';
              $document = isset($this) ? $this : null;
              $baseUrl = $this->baseurl;
              $templateUrl = $this->baseurl . '/templates/' . $this->template;
              artxComponentWrapper($document);
              ?>
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
              <head>
              <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
              <jdoc:include type="head" />
              <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/system.css" type="text/css" />
              <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/general.css" type="text/css" />

              <link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/template.css" />
              <!--[if IE 6]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie6.css" type="text/css" media="screen" /><![endif]-->
              <!--[if IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" type="text/css" media="screen" /><![endif]-->
              <script type="text/javascript" src="<?php echo $templateUrl; ?>/script.js"></script>
              </head>
              <body>
              <div id="art-page-background-simple-gradient">
              <jdoc:include type="modules" name="enhaut" />

              <div id="art-page-background-gradient"></div>
              </div>
              <div id="art-main">
              <div class="art-Sheet">
              <div class="art-Sheet-tl"></div>
              <div class="art-Sheet-tr"></div>
              <div class="art-Sheet-bl"></div>
              <div class="art-Sheet-br"></div>
              <div class="art-Sheet-tc"></div>
              <div class="art-Sheet-bc"></div>
              <div class="art-Sheet-cl"></div>
              <div class="art-Sheet-cr"></div>
              <div class="art-Sheet-cc"></div>
              <div class="art-Sheet-body">
              <jdoc:include type="modules" name="user3" />
              <jdoc:include type="modules" name="banner1" style="artstyle" artstyle="art-nostyle" />
              <?php echo artxPositions($document, array('top1', 'top2', 'top3'), 'art-block'); ?>
              <div class="art-contentLayout">
              <?php if (artxCountModules($document, 'left')) : ?>
              <div class="art-sidebar1"><?php echo artxModules($document, 'left', 'art-block'); ?>
              </div>
              <?php endif; ?>
              <div class="art-<?php echo artxCountModules($document, 'left') ? 'content' : 'content-wide'; ?>">

              <?php
              echo artxModules($document, 'banner2', 'art-nostyle');
              if (artxCountModules($document, 'breadcrumb'))
              echo artxPost(null, artxModules($document, 'breadcrumb'));
              echo artxPositions($document, array('user1', 'user2'), 'art-article');
              echo artxModules($document, 'banner3', 'art-nostyle');
              ?>
              <?php if (artxHasMessages()) : ?><div class="art-Post">
              <div class="art-Post-tl"></div>
              <div class="art-Post-tr"></div>
              <div class="art-Post-bl"></div>
              <div class="art-Post-br"></div>
              <div class="art-Post-tc"></div>
              <div class="art-Post-bc"></div>
              <div class="art-Post-cl"></div>
              <div class="art-Post-cr"></div>
              <div class="art-Post-cc"></div>
              <div class="art-Post-body">
              <div class="art-Post-inner">
              <div class="art-PostContent">

              <jdoc:include type="message" />

              </div>
              <div class="cleared"></div>

              </div>

              </div>
              </div>
              <?php endif; ?>
              <jdoc:include type="component" />

              <?php echo artxModules($document, 'banner4', 'art-nostyle'); ?>
              <?php echo artxPositions($document, array('user4', 'user5'), 'art-article'); ?>
              <?php echo artxModules($document, 'banner5', 'art-nostyle'); ?>
              </div>

              </div>
              <div class="cleared"></div>

              <?php echo artxPositions($document, array('bottom1', 'bottom2', 'bottom3'), 'art-block'); ?>
              <jdoc:include type="modules" name="banner6" style="artstyle" artstyle="art-nostyle" />
              <div class="art-Footer">
              <div class="art-Footer-inner">
              <?php echo artxModules($document, 'syndicate'); ?>
              <div class="art-Footer-text">
              <?php if (artxCountModules($document, 'copyright') == 0): ?>
              <p>Copyright &copy; 2009 ---.<br/>
              All Rights Reserved.</p>

              <?php else: ?>
              <?php echo artxModules($document, 'copyright', 'art-nostyle'); ?>
              <?php endif; ?>
              </div>
              </div>
              <div class="art-Footer-background"></div>
              </div>

              </div>
              </div>
              <div class="cleared"></div>

              </div>

              </body>
              </html>
              voila désolé si ce message est long. je peux fournir en lien si jamais ..

              Commentaire


              • #8
                Oui, c'est vrai qu'il faudrait englober ce module dans une div qu'on va positionner à l'endroit qu'il faut.

                Ajoutes ça dans le code html:

                Code HTML:
                <div id="art-page-background-simple-gradient">
                <div id="enhaut"><jdoc:include type="modules" name="enhaut" /></div>
                <div id="art-page-background-gradient"></div>
                </div>
                Maintenant il faut ajouter une classe dans le fichier css:

                Code HTML:
                #enhaut {
                position:absolute;
                top: 30px;
                right: 100px;
                }
                Les valeurs de top et right sont à ajuster pour positioner le menu au bon endroit.

                A+
                Eric
                Plein de template Joomla: http://www.kitsgraphiques-de-fred.co...la.html?s=f1-1
                Comment installer un template Joomla: http://www.kitsgraphiques-de-fred.co...es.html?s=f1-2

                Commentaire


                • #9
                  Eric ,

                  je te remercie pour le temps que tu prends, mais malheureusement je n'ai toujours aucun menu qui s'affiche.
                  J'ai fais un test avec le module panier je l'ai mis en position enhaut, mais cela fait pareil il disparait...

                  Commentaire


                  • #10
                    Bon ben on va essayer autre chose, essaie de placer ta <div id="enhaut"... juste après la balise <body> et avant la <div id="art-page-background-simple-gradient">...

                    A+
                    Eric
                    Plein de template Joomla: http://www.kitsgraphiques-de-fred.co...la.html?s=f1-1
                    Comment installer un template Joomla: http://www.kitsgraphiques-de-fred.co...es.html?s=f1-2

                    Commentaire


                    • #11
                      bon ca marche toujours pas... mais .... j'ai trouvé ou cela se passe dans le css . ce que j'ai changé est en vert. maintennt le menu est bien en haut mais les titres sont les uns sur les autres... et j'ai toujours l espace laissé par le menu( voir ici) ..

                      /* menu structure */

                      .art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
                      {
                      text-align:left;
                      text-decoration:none;
                      outline:none;
                      letter-spacing:normal;
                      word-spacing:normal;
                      }

                      .art-menu, .art-menu ul
                      {
                      margin: 0;
                      padding: 0;
                      border: 0;
                      list-style-type: none;
                      display: block;
                      }

                      .art-menu li
                      {
                      margin: 0;
                      padding: 0;
                      border: 0;
                      display: block;
                      float: left;
                      Position: Absolute;
                      Top: -4.3cm; Right: 0cm;

                      z-index: 5;
                      background:none;
                      }

                      .art-menu li:hover
                      {
                      z-index: 10000;
                      white-space: normal;
                      }

                      .art-menu li li
                      {
                      float: none;
                      }

                      .art-menu ul
                      {
                      visibility: hidden;
                      position: absolute;
                      z-index: 10;
                      left: 0;
                      top: 0;
                      background:none;
                      }

                      .art-menu li:hover>ul
                      {
                      visibility: visible;
                      top: 100%;
                      }

                      .art-menu li li:hover>ul
                      {
                      top: 0;
                      left: 100%;
                      }

                      .art-menu:after, .art-menu ul:after
                      {
                      content: ".";
                      height: 0;
                      display: block;
                      visibility: hidden;
                      overflow: hidden;
                      clear: both;
                      }
                      .art-menu, .art-menu ul
                      {
                      min-height: 0;
                      }

                      .art-menu ul
                      {
                      background-image: url(../images/spacer.gif);
                      padding: 10px 30px 30px 30px;
                      margin: -10px 0 0 -30px;
                      }

                      .art-menu ul ul
                      {
                      padding: 30px 30px 30px 10px;
                      margin: -30px 0 0 -10px;
                      }


                      ul.art-menu
                      {
                      float:right;
                      }



                      /* menu structure */

                      .art-menu
                      {
                      padding: 0px 5px 0px 5px;
                      }

                      .art-nav
                      {
                      position: relative;
                      height: 26px;
                      z-index: 100;
                      }

                      Commentaire


                      • #12
                        Bonjour galhal,
                        C'est normal que tes items de menu soient les uns sur les autres car tu définis la position en absolu des éléments <li> (Chaque item menu est un élément li) au même endroit.

                        Apparemment tu n'utilises plus #enhaut ?

                        Mets plutôt ton texte en vert au niveau de .art-menu, .art-menu ul

                        A+
                        Eric
                        Plein de template Joomla: http://www.kitsgraphiques-de-fred.co...la.html?s=f1-1
                        Comment installer un template Joomla: http://www.kitsgraphiques-de-fred.co...es.html?s=f1-2

                        Commentaire


                        • #13
                          YEs !!!!!!!!

                          Oh merci Eric !!! ca marche.

                          Et pour l espace qui reste ?

                          Commentaire


                          • #14
                            c est bon j ai trouvé
                            Et encore merci Eric !!

                            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