Compter le nombre d'éléments d'une liste ul / Mise en page CSS

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

  • #16
    Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

    Je ne sais pas à l'avance combien d'éléments il peut y avoir. Comment ferais-tu ?
    Oui mais pour faire quoi exactement ? Les répartir équitablement sur une ligne ou autre ?

    Commentaire


    • #17
      Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

      Afin de les répartir équitablement verticalement et d'équilibrer leurs tailles par rapport à l'espace disponible (margin, height, font-size...). Actuellement ce ul est en float:right, et je gère cet équilibre avec notamment le margin d'ul, des li.

      Commentaire


      • #18
        Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

        Afin de les répartir équitablement verticalement et d'équilibrer leurs tailles par rapport à l'espace disponible (margin, height, font-size...). Actuellement ce ul est en float:right, et je gère cet équilibre avec notamment le margin d'ul, des li.
        Je pense que tu t'y prends mal. L'équilibre vertical est sensé être automatique (tout comme l'horizontal avec un peu plus de technique), "l'espace disponible" n'a pas de sens en vertical et height et font-size sont de toute façon sensés être toujours les mêmes quel que soit ton but sous peine d'un gros manque de cohérence.

        Avec un schéma on pourrait plus t'aider.

        Commentaire


        • #19
          Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

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

Nom : exemple-3li.jpg 
Affichages : 1 
Taille : 9,5 Ko 
ID : 1800996
          Voilà un exemple avec un cadre image flottant à gauche et le menu flottant à droite avec 3 éléments non centrés.

          Commentaire


          • #20
            Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

            Tu devrais plutôt chercher à centrer verticalement ton ensemble d'items. Sinon que se passe-t-il si tu n'as qu'un item ? Un gros paté..

            #menu {
            display: table;
            }

            #menu li {
            display: table-row; vertical-align: middle;
            }
            Non ?

            Ou autres : http://www.vanseodesign.com/css/vertical-centering/

            Commentaire


            • #21
              Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

              La première solution crée trois blocs occupant toute la hauteur et ne tient donc pas compte des marges. J'essaierai celles présentées dans ton lien.

              Commentaire


              • #22
                Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

                Les marges sont les cellules en elle-mêmes... Pour tes styles utilise les <a>.

                Commentaire


                • #23
                  Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

                  Envoyé par kursus Voir le message
                  Code:
                  #menu {
                  display: table;
                  }
                  
                  #menu li {
                  display: table-row; vertical-align: middle; 
                  }
                  Envoyé par kursus Voir le message
                  Les marges sont les cellules en elle-mêmes... Pour tes styles utilise les <a>.
                  Cette solution est pas mal mais si j'ai pas la même quantité de texte dans chaque menu, la taille des cellules n'est pas la même (retour à la ligne).

                  Edit: Ca et le fait que j'arrive pas à centrer verticalement les a contenus dans les li.
                  Dernière édition par Jeremylgx à 06/04/2012, 14h47

                  Commentaire


                  • #24
                    Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

                    J'ai bien regardé le lien mais je n'ai pas encore trouvé de solution totalement satisfaisante.

                    Je résume ma problématique : équilibrer des liens en li (tailles, marges entre ceux ci, centrage vertical) à l'intérieur d'un menu en ul à hauteur fixe en fonction du nombre de li, que je ne connais pas à l'avance. Et, comme complication, certains libellés de liens occupent plus d'une ligne.

                    Est ce que vous avez une piste ?

                    Commentaire


                    • #25
                      Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

                      Pour illustration voilà ce que ça donne avec la solution table et table-row Cliquez sur l'image pour l'afficher en taille normale

Nom : menu.jpg 
Affichages : 1 
Taille : 11,5 Ko 
ID : 1801010

                      Commentaire


                      • #26
                        Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

                        J'ai trouvé une solution correspondant à ma première idée (compter le nombre de li et ajouter une classe au parent ul) ici : http://stackoverflow.com/questions/2...s-to-parent-ul
                        Le fichier source fonctionne parfaitement mais je n'arrive pas encore à l'appliquer à ma page.
                        Je mets cette ligne de code dans le header
                        Code:
                        <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
                        et ce script en ayant changé le nom de la classe par la mienne avant la fermeture de <body>
                        Code:
                        <script>jQuery(document).ready(function(){
                          $(".taglib-ratings").each(function(){
                           
                            if ($(this).children('li').size() == 2 )
                            {
                              $(this).addClass('Two');
                               $(this).append('Two');
                              }
                            else if ($(this).children('li').size() == 1 )
                          
                                {
                              $(this).addClass('one');
                               $(this).append('One');
                              }
                          });
                        });</script>
                        Je sais pas s'il me manque quelque chose.

                        Commentaire


                        • #27
                          Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

                          Salut,
                          ta soluce n'est pas top parce qu'elle est basée sur la librairie jQuery, alors que Joomla utilise la lib Mootools.
                          Je te propose l'équivalent en Mootools, tu auras moins de pb.

                          http://jsfiddle.net/ghazal/pe79E/

                          En revanche, il faut placer ce code (dans <script> et </script>) juste avant la fin de </head> et corriger le nom de la class.
                          Cela dit, dans les 2 cas, la solution n'est pas très "dynamique", si tu utilises la mienne, je re-réfléchirai sur la question.
                          Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                          Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                          Commentaire


                          • #28
                            Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

                            Merci de ta réponse ghazal. Je savais qu'il devait y avoir un rapport avec Joomla.
                            J'ai mis le script Javascript entre les balises <script></script> juste avant la fermeture de </head> en changeant bien le nom de la classe par la mienne.
                            Code:
                            <script>
                                window.addEvent('domready', function() {
                                
                            var list = $$('.menuthematiques');
                            
                            list.getChildren('li').each(function(el, index){
                            var count = el.length;
                            
                                if (count == 1 )
                                {
                                  el.getParent().addClass('un');
                                  }
                                else if (count == 2 )
                                    {
                                   el.getParent().addClass('deux');
                                  }   
                                else if (count == 3 )
                                    {
                                   el.getParent().addClass('trois');
                                  }
                                    else if (count == 4 )
                                    {
                                   el.getParent().addClass('quatre');
                                  }
                                else if (count == 5 )
                                    {
                                   el.getParent().addClass('cinq');
                                  }   
                                else if (count == 6 )
                                    {
                                   el.getParent().addClass('six');
                                  }
                              });
                            
                            
                                });​
                            </script>
                            J'ai téléchargé le fichier Mootools ici (http://mootools.net/download) et je l'ai mis dans mon répertoire. J'ai ajouté un lien vers le fichier mootools juste après l'ouverture de <head>.
                            Code:
                            <script type='text/javascript' src='<?php echo
                            $this->baseurl ?>/templates/<?php echo $this->template ?>/js/lib/mootools-core-1.4.5-full-nocompat.js'></script>
                            Mais il n'ajoute toujours rien à mon nom de classe.

                            Commentaire


                            • #29
                              Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

                              Bon.
                              1- tu n'as pas à recharger la librairie mootools en front-end. A moins que le template que tu utilises aies supprimé son chargement, ce qui est très rare, elle est chargée par défaut, tu n'as pas à t'en occuper.
                              NB: pourrais-tu préciser quel est ton template ?
                              ----------> Vire ce fichier mootools que tu as rajouté.

                              2 - INdispensable quand on travaille avec du JS :
                              * installer l'extension Firebug pour Firefox, pour débugger
                              * installer l'extension Webdeveloper pour Firefox, pour voir la source (entre autres)
                              Web Developer :: Add-ons for Firefox

                              https://addons.mozilla.org/en-US/fir...web-developer/

                              3 - Code
                              var list = $$('.menuthematiques');
                              Cette classe CSS doit déjà être affectée/exister au ul AVANT le démarrage de mon code.
                              Ce qui est ajouté JavaScriptement (sic) , ce sont les classes "un", "deux', "trois", etc ..., en fonction du nombre de "li" comme tu l'as demandé.
                              Elles ne se voient qu'en allant sur l'onglet "View Source" (de l'extension webdeveloper), puis "View Generated Source" et en créant les styles ".un", ".deux', ".trois", pour les UL (cf les CSS dans mon exemple)

                              Quand tu auras réglé tout ceci, on verra si tu peux coller ce script directement dans le module menu ou l'intégrer joomlaesquement.
                              Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                              Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                              Commentaire


                              • #30
                                Re : Compter le nombre d'éléments d'une liste ul / Mise en page CSS

                                C'est un template que j'ai créé de zéro. J'avais essayé sans le chargement de ce fichier sans succès et c'est pour ça que j'ai ensuite essayé en le chargeant. Je vais donc l'enlever.

                                J'ai déjà installé ces extensions avec lesquelles j'inspecte le code source généré.

                                Cette classe CSS n'existe pas avant le démarrage du code puisque ce ul est généré par un module menu joomla auquel j'ai ajouté le suffixe de classe thematiques, ce qui engendre une classe menuthematiques au ul.
                                Dernière édition par Jeremylgx à 13/04/2012, 09h55

                                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

                                Partenaire de l'association

                                Réduire

                                Hébergeur Web PlanetHoster
                                Travaille ...
                                X