K2 - Présentation par liste de catégories

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

  • [Problème] K2 - Présentation par liste de catégories

    Bonjour,

    J'utilise K2 pour présenter une série d'articles, 1 en en-tête, les suivants 2 par ligne.

    J'ai pu mettre une petite ligne de séparation vers le bas (border-bottom), mais j'aimerais mettre une ligne de séparation au milieu, entre 2 articles.

    Si je mets un border-right, il apparaît aux deux articles... Mon besoin est que la ligne apparaisse uniquement au milieu, ou soit sur le border right sur l'article de gauche...

    Si quelqu'un à une idée, j'ai le sentiment que cela doit être plus "profond" qu'un simple border- .... ?

    Merci

  • #2
    Re : K2 - Présentation par liste de catégories

    tu la met sur quelle classe ta bordure?

    la c est tout depend du template, donc dur de repondre sans lien vers le site...
    Un site pour comparer des solutions : https://comparatifs-informaticien51.joomla.com
    un site personnel, sur Joomla, linux, windows et Powershell : https://informaticien51.joomla.com/

    Commentaire


    • #3
      Re : K2 - Présentation par liste de catégories

      Bonjour, avec la pseudo classe CSS first-child tu devrais pouvoir régler cela :
      http://www.w3schools.com/cssref/sel_firstchild.asp
      Il faut juste pouvoir s'appuyer sur ton code et voir comme le dit lefabdu51 avec ta Template.
      I love overrides
      -------
      UX/UI Designer - Grenoble - greendog.fr

      Commentaire


      • #4
        Re : K2 - Présentation par liste de catégories

        Merci pour vos réponses. Je met le site en ligne pour la journée. Le template est LimaLifestyle.

        La page en question est : http://www.fitperformance.ch/index.p...ences-athletes
        (Aussi les 3 pages références média)

        Merci de l'aide. J'ai beaucoup cherché, et je pense que c'est une question qui peut être récurrente pour bcp de monde.

        N'y a t'il pas sur le marché des "modèles", hors templates de mise en page d'articles K2 ?¿

        Merci d'avance et bonne journée

        Commentaire


        • #5
          Re : K2 - Présentation par liste de catégories

          Une piste serait comme de faire ceci :
          Code:
          div.catItemView {
              background: #f3f3f3 none repeat scroll 0 0;
              color: #333;
              margin: 10px;
              padding: 10px;
          }
          Cela a le mérite de séparer les articles comme des fiches, mais dans l'article "Et tous les autres" ta liste est à modifier car elle n'a pas de padding, donc elle va coller au bloc gris :
          Code:
          div.catItemView ul {
              padding-right: 40px;
          }
          I love overrides
          -------
          UX/UI Designer - Grenoble - greendog.fr

          Commentaire


          • #6
            Re : K2 - Présentation par liste de catégories

            Je vais essayer cela. Sauf que c'est pas un background que je cherche mais un border solid gris au milieu.... Je pense que la piste est bonne.

            Logiquement, je met cela dans k2.css ?

            Merci en tout les cas!

            Commentaire


            • #7
              Re : K2 - Présentation par liste de catégories

              Oui, c'est vrai que j'ai habilement détournée ta question pour y répondre par autre choses
              Tu dois pouvoir y arriver car le dernier article de chaque rangée a une classe .itemContainerLast ce qui te permet dans le principe de n'appliquer ta border-left: 1px solid #e6e6e6; qu'aux articles de droite.
              Mais il y a plus de travail niveau CSS...
              I love overrides
              -------
              UX/UI Designer - Grenoble - greendog.fr

              Commentaire


              • #8
                Re : K2 - Présentation par liste de catégories

                Ok, si je comprend bien .itemContainerLast est forcément le dernier de la ligne, que j'en affiche, 2, 3, 4 ... sur une ligne...

                Et donc .itemContainer tout court est forcément celui de devant. C'est bien cela ?

                Commentaire


                • #9
                  Re : K2 - Présentation par liste de catégories

                  En fait une ligne est constituée de deux DIV, les deux avec la classe .itemContainer, et le dernier de chaque ligne a en plus la classe .itemContainerLast.

                  Code HTML:
                  <div style="width:50.0%;" class="itemContainer">
                  <div style="width:50.0%;" class="itemContainer itemContainerLast">
                  Mais ton article d'intro a aussi les deux classes :
                  Code HTML:
                  <div class="itemContainer itemContainerLast">
                  Donc, avec .itemContainer tous tes blocs seront atteints, et avec .itemContainerLast le dernier de chaque ligne sera atteint (même s'il est seul sur la ligne.)

                  Inspectes le code avec FireBug sur Firefox ou avec l’inspecteur dans chrome et tu verra la structure de ta page. Cela te permettra de voir comment c'est construit et avec un peu ou pas mal de CSS tu arriveras à tes fins.
                  I love overrides
                  -------
                  UX/UI Designer - Grenoble - greendog.fr

                  Commentaire


                  • #10
                    Re : K2 - Présentation par liste de catégories

                    Je regarderai tout à l'heure, mais jai bien compris Et comme le dernier de chaque liste est atteint avec _last, j'y colle un border-left, ainsi la séparation se trouve au milieu...

                    Je test et redis.

                    Merci

                    Commentaire


                    • #11
                      Re : K2 - Présentation par liste de catégories

                      Pas mal, ca marche bien, le border right est bien là, 1 article sur 2, mais il ne sont plus en ligne... Tout en hauteur ?? Une histoire de padding ?

                      J'a essayé de rajouter

                      <div style="width:40.0%;" class="itemContainer">
                      <div style="width:40.0%;" class="itemContainer itemContainerLast">

                      Pour voir si c'est question de place, mais non... Que faire ? Et merci du temps consacré

                      Commentaire


                      • #12
                        Re : K2 - Présentation par liste de catégories

                        Oui c'est le souci, tes articles n'ont pas la même hauteur et du coup décalage... J'en reviens a mon background-color qui fait le job d'une,manière assez propre.��
                        I love overrides
                        -------
                        UX/UI Designer - Grenoble - greendog.fr

                        Commentaire


                        • #13
                          Re : K2 - Présentation par liste de catégories

                          Oki, je comprend. Oui j'avais testé la solution comme des "fiches" j'aime assez, j'y revient.

                          Du coup je savais pas faire du vrais gris "light", le eeeeew me paraissait trop foncé, j'ai appris à le nuancé.

                          Là c'est top je trouve.

                          Merci beaucoup et bonne continuation....

                          NB : Comment je met le post en résolu ??

                          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