Exercice de CSS

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

  • Exercice de CSS

    Bonjour,


    J'ai essayé plusieurs choses, et ai regardé un peu à droite à gauche sur des sites spécial Css, mais là je crois que je commence à me mélanger les pinceaux.
    En plus c'est un exercice de css propore à joomla, donc me voici.

    J'ai ceci pour les menus verticaux et horizontaux:
    a.mainlevel:link, a.mainlevel:visited {
    font-size: 10px;
    background: url(../images/sc_menu.png) no-repeat;
    font-weight: bold;
    color: #535657;text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: left;
    padding-left: 15px;
    width: 194px;
    }

    a.mainlevel:hover {
    text-decoration: none;
    font-weight: bold;
    background-position: 0px -22px;
    color: #ff6600;
    }


    a.mainlevel#active_menu {
    background-position: 0px -48px;
    color: #000;
    }

    a.mainlevel#active_menu:hover {
    color: #333;
    }


    Et je voudrais,à partir de ça, créer un deuxieme style uniquement pour un menu horizontal.
    Et je sais que je dois rajouter un suffixe dans la feuille css et la faire correspondre dans la gestion des modules, jusque là tout va bien.
    Mais là j'ai deux questions:
    -sous la barre paramétre dans le gestionnaire de module du menu en question, on a "Suffixe CSS de menu" et "Suffixe CSS de module"...
    quel est la différence entre les deux??

    - Disons que mon suffixe soit "_prin" et quand on a des chose dans le genre
    a.mainlevel#active_menu:hover
    ou encore
    a.mainlevel:link, a.mainlevel:visited
    où est-ce qu'on le mets le suffixe??

    Merci pour votre courage...
    A la Sainte Véronique, avec l'ânesse l'âne pique et nique...Âne qui pète à la Sainte Colette, Sainte Félicité sous la gelée...et-c

  • #2
    sufixxe

    Salut,

    Pour ta question le suffixe se place comme suit :

    a.mainlevel_prin:link

    @+
    Nouveau design => www.aphoris.com | graphiste DA | Design Print & web | Template Joomla exclusifs

    Exemple de webdesign : www.winassistance.com

    Commentaire


    • #3
      Merci,

      c'est marrant en bidouillant un peu c'est ce que je venais de trouver ..
      mais merci quand même..

      Par contre... une question subsiste
      ça marche pas sur cette partie du style:
      a.mainlevel_prin#active_menu {
      background-position: 0px -48px;
      color: #000;
      }

      a.mainlevel_prin#active_menu:hover {
      color: #333;
      }

      si j'utilise le style de départ (sans le suffixe _prin)
      les boutons actifs s'affichent comme tel....rrrh! why?

      je viens de tomber sur ce post (en bas de page)
      http://forum.joomla.fr/showthread.ph...zontal+suffixe
      et je crois c'est un peu ce que je souhaite.

      Je viens d'ouvrir le modules/mod_mainmenu.php
      bon...c'est pas gagné!

      Quelqu'un peu nous indiquez comment attribuer l'id:"active_menu" à plusieurs menus?

      (c'est plus de la curiosité c'est de la rage!! )
      Dernière édition par ZerGood! à 20/11/2006, 18h27
      A la Sainte Véronique, avec l'ânesse l'âne pique et nique...Âne qui pète à la Sainte Colette, Sainte Félicité sous la gelée...et-c

      Commentaire


      • #4
        du coup j'aurai mieux fait d'appeler ce tread exercice de php...
        A la Sainte Véronique, avec l'ânesse l'âne pique et nique...Âne qui pète à la Sainte Colette, Sainte Félicité sous la gelée...et-c

        Commentaire


        • #5
          Envoyé par ZerGood! Voir le message
          Merci,

          Quelqu'un peu nous indiquez comment attribuer l'id:"active_menu" à plusieurs menus?

          (c'est plus de la curiosité c'est de la rage!! )
          Regardes simplement le code source de la page avec ton navigateur.

          Exemple avec -menu dans les suffixes module et menu :
          Code PHP:
          <tr align="left"><td><a href="http://www.machinchose.com/index.php?option=com_frontpage&amp;Itemid=1" class="mainlevel-menu" id="active_menu-menu">Accueil</a></td></tr
          Code PHP:
          /* STYLES DES MENUS DE TYPE BOUTONS */
          #active_menu-menu { ... }
          #active_menu-menu:hover { ... }  
          a.mainlevel-menu { ... }
          a.mainlevel-menu:linka.mainlevel-menu:visited { ... }
          a.mainlevel-menu:hovera.sublevel-menu:hover { ... } 
          Papounet
          PS : Le suffixe du module s'applique au container du menu, c'est à dire au module.
          Le suffixe du menu s'applique au menu.
          I'am happy for you !
          Dernière réalisation : http://www.pierrickservais.com/

          Commentaire


          • #6
            Merci Papounet,
            (j'adore ton pseudo)

            En fait c'était surtout, un petit souci de synthaxe, j'avais besoin de:
            #active_menu-menu { ... }
            #active_menu-menu:hover { ... }

            Par contre pour étre plus précis, et ça m'aiderait aussi...
            dans ce cas le suffixe module n'a rien à voir, n'est-ce pas ? (ça marche également sans)

            Le suffixe module me serait utile si le module en question était justifié à gauche et que je voulais le centrer alors je l'utiliserai (ex: -prin)
            ainsi dans la CSS ??

            table.moduletable-prin {
            width: 100%;
            float: center
            }

            Ai-je bon??
            A la Sainte Véronique, avec l'ânesse l'âne pique et nique...Âne qui pète à la Sainte Colette, Sainte Félicité sous la gelée...et-c

            Commentaire


            • #7
              Ce n'est pas très compliqué.
              Il faut simplement distinguer le container du module et les liens de menu.
              On peut ne pas mettre de suffixe ou utiliser les suffixes indifféremment pour l'un ou l'autre ou les deux.
              En fait, joomla! génère la page avec ce que tu as décidé.
              Les suffixes permettent de faire des présentations différentes.
              Bien souvent, il est plus simple de mettre aussi un suffixe avec le module quand on en colle un au menu.
              Si tu as qu'un style de menu, tu ne devrait pas avoir besoin de suffixe pour le menu. Sauf que si tu as du padding dans les module qui te gêne pour le menu alors les suffixes sont une solution rapide.

              Ton table.moduletable-prin est une bonne solution si tu obtiens le résultat escompté.
              Cependant, il faudra certainement le retirer si tu changes de template.

              Papounet
              I'am happy for you !
              Dernière réalisation : http://www.pierrickservais.com/

              Commentaire


              • #8
                float

                le positionnement flottant center n existe pas

                pour float tu as :

                left
                right
                none
                inherit
                par contre tu peux le passer en position: relative avec un margin-right: auto; margin-left: auto;

                Ce qui te positionera le module au centre de la div dont il depend. si tu voulais juste aligner le contenu, passe plutôt par text-align.

                @+
                Nouveau design => www.aphoris.com | graphiste DA | Design Print & web | Template Joomla exclusifs

                Exemple de webdesign : www.winassistance.com

                Commentaire


                • #9
                  Non, concrétement je n'obtiens pas le résultat escompté....

                  Mais je vais y arrivé

                  En résumé, j'ai 2 styles de menu, donc un suffixe qui est -prin.
                  Dans les paramétres, j'ai mis le même pour le menu et le module.

                  Le menu en question est collé sur la gauche de la page et je souhaite qu'il soit centré.
                  Voilà ce que j'ai mis dans ma CSS:
                  table.moduletable-prin {
                  position: relative
                  margin-right: auto;
                  margin-left: auto;
                  width: 100%;
                  margin: 0px 0px 15px 0px;
                  }

                  table.moduletable_prin td {
                  position: relative
                  margin-right: auto;
                  margin-left: auto;

                  padding: 4px;
                  }

                  Les parties en rouge sont ce qu'ils y a en plus par rapport au style de base (sans le suffixe).
                  Mais ça ne fonctionne pas. Pourtant table.modutable est, je crois ,la class CSS du module??
                  Dernière édition par ZerGood! à 21/11/2006, 13h45
                  A la Sainte Véronique, avec l'ânesse l'âne pique et nique...Âne qui pète à la Sainte Colette, Sainte Félicité sous la gelée...et-c

                  Commentaire


                  • #10
                    table ou div

                    le probleme vient du fait qu il s agit d une class oui mais d un tableau, que tu ne pourras pas centrer comme cela.

                    Essaie plutot avec un text-align: center.

                    s agissant d un tableau les elements ne sont pas flottant comme des div donc le margin auto ne peut fonctionner. Je l avais donne pour info en specifiant que cela centrait dans la div parent.

                    De plus tu as rempli 2 fois le margin sur table.moduletable-prin et tu lui donne une largeur a 100% ce qui fait que le centrage auto n'est plus necessaire puisqu il fera 100% de la largeur du parent.



                    @+
                    Dernière édition par aphoris à 21/11/2006, 13h55
                    Nouveau design => www.aphoris.com | graphiste DA | Design Print & web | Template Joomla exclusifs

                    Exemple de webdesign : www.winassistance.com

                    Commentaire


                    • #11
                      Merci de vouloir m'aider

                      table.moduletable-nav {
                      text-align: center;
                      margin: 0px 0px 0px 0px;
                      }

                      table.moduletable-nav td {
                      text-align: center;
                      padding: 0px;
                      }

                      ça ne fonctionne pas... et c'est trés étrange parce depuis tout à l'heure j'ai essayé énormément de chose et rien ne bouge!!

                      Comment étre sûr que c'est bien table.moduletable la classe de ce module?

                      Ce menu doit apparaitre en position user3, et dans mon index.php, le user3 est dans une <div id="tabbar">

                      Voici son css
                      #tabbar {
                      float: left;
                      width: 100%;
                      margin-top: 0px;
                      padding-top: 0px;
                      height: 25px !important;
                      height: 29px;
                      background: url(../images/sc_tabbar_bg.png) repeat-x;
                      }

                      Mais même en virant float: left, rien n'y fait.

                      Je commence à devenir fou, en plus à cause de cette histoire je n'ai pas encore mangé....rhrh!!
                      A la Sainte Véronique, avec l'ânesse l'âne pique et nique...Âne qui pète à la Sainte Colette, Sainte Félicité sous la gelée...et-c

                      Commentaire


                      • #12
                        sinon donnes moi l'adresse du site que je zieute directement
                        Nouveau design => www.aphoris.com | graphiste DA | Design Print & web | Template Joomla exclusifs

                        Exemple de webdesign : www.winassistance.com

                        Commentaire


                        • #13
                          Lé encore en local....

                          Mais ya les pieces jointes
                          Fichiers joints
                          A la Sainte Véronique, avec l'ânesse l'âne pique et nique...Âne qui pète à la Sainte Colette, Sainte Félicité sous la gelée...et-c

                          Commentaire


                          • #14
                            argh

                            reprenons lol

                            (comme je fais autre chose c'est pas simple de rester concentrer)

                            Tu veux placer un menu horizontale a l'interieur d'une div et qu'il soit centré?

                            C est bien ca ou c est encore plus profond?

                            Si c'est ca il te faudra connaitre la taille exacte de ton menu en largeur (je parle du menu entier et non pas de chaque element li)

                            par exemple

                            <div id="conteneurdumenu">
                            <div id="tabbar">
                            <?php mosLoadModules('user3', -1); ?>
                            </div>
                            </div>

                            avec pour css

                            #conteneurdumenu {
                            position:relative
                            width:100%
                            }

                            #tabbar {
                            position: relative
                            width:500px /*par exemple*/
                            margin-left:auto
                            margin-right:auto
                            }

                            apres pour definir les elements de ton menu tu peux aussi utiliser

                            #tabbar a.mainlevel-tonsufixe
                            #tabbar .moduletable-nav

                            etc....

                            @+ et bonne chance
                            Nouveau design => www.aphoris.com | graphiste DA | Design Print & web | Template Joomla exclusifs

                            Exemple de webdesign : www.winassistance.com

                            Commentaire


                            • #15
                              Je te remercie Aphoris.

                              Javais déjà essayé
                              #tabbar {
                              position: relative
                              width:500px /*par exemple*/
                              margin-left:auto
                              margin-right:auto
                              }

                              ça ne fonctionne pas, c'est décourageant...jai envie de pleurer

                              je sais plus quoi faire, c'est pas possible que ce menu reste collé à gauche comme ça!!!!
                              Il est bientôt minuit et je suis encore sur ce truc......

                              Ya une chose que je n'explique pas, c'est qu'en regardant avec la barre WebDevelopper on voit un cadre TD
                              à l'intérieur de la div tabbar
                              Mais ya rien dans le code..!!! c'est grave ça
                              Dernière édition par ZerGood! à 21/11/2006, 23h18
                              A la Sainte Véronique, avec l'ânesse l'âne pique et nique...Âne qui pète à la Sainte Colette, Sainte Félicité sous la gelée...et-c

                              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