Uniformiser hauteur des modules et position d'un bouton

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

  • Uniformiser hauteur des modules et position d'un bouton

    Bonjour à tous,

    Je suis sur un projet où la page d'accueil, au lieu de contenir 6 intros d'articles, affichera à la place deux lignes de 3 modules chacun contenant éventuellement une image, un peu de texte et un bouton "lire l'article".
    En utilisant un "min-height" pour moduletable et moduletable > div dans la feuille de style et en ajoutant une bordure, les modules sont bien uniformisés, mais je ne trouve pas comment forcer le bouton à se positionner en bas du module pour que tous les boutons soient au même niveau.
    Avez-vous une idée de comment faire ?
    Cliquez sur l'image pour l'afficher en taille normale

Nom : user6.jpg 
Affichages : 98 
Taille : 27,7 Ko 
ID : 2012428

    Merci de vos conseils !
    Robert
    "Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes; il n'y a que des solutions" (André Gide).
    MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info - Site pro : www.robertg-conseil.fr chez PHPNET, sites perso chez PlanetHoster + sites gérés chez PHPNET, PlanetHoster, Ionos et OVH

  • #2
    Salut Robert.

    Je pense que si tu déclares un parent du bouton (selon le html) en position relative, tu peux placer le bouton en absolu et gérer son placement par rapport au bottom.
    Cordialement.
    __
    Eddy !!!
    Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

    Commentaire


    • #3
      Merci Eddy,

      Le CSS n'a jamais été ma tasse de thé...
      J'ai réussi avec ce code en fin de contenu (l'ajout est en gras), mais je ne sais pas s'il n'y aurait pas plus simple en ajoutant une classe dans la feuille de style personnalisée (je pense à ceux qui vont gérer le site et auron peut-être à créer d'autres modules :
      <img style="display: block; position: absolute; top: 360px; left: 80px; margin: 15px auto;" src="images/modules/lire.png" alt="Lire l'article" />
      "Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes; il n'y a que des solutions" (André Gide).
      MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info - Site pro : www.robertg-conseil.fr chez PHPNET, sites perso chez PlanetHoster + sites gérés chez PHPNET, PlanetHoster, Ionos et OVH

      Commentaire


      • #4
        Bon, j'avance, mais ce n'est pas encore ça ! Dans le fichier custom.css du template, j'ai ajouté la classe que j'ai ensuite utilisée, manuellement, dans le code du module :
        .btonlire {
        position:absolute;
        top:350px;
        left:95px;
        }
        L'ennui, c'est que ce fichier n'est pas récupéré dans l'éditeur de texte (JCE) et que je ne vois pas comment l'y faire intégrer dans la liste des styles, mais aussi qu'en fonction des écrans, comme sur tablette ou smartphone, le bouton n'est plus correctement centré.
        Je n'ai pas l'expérience des instructions fonction de ces tailles d'écran comme "@media screen and (min-width: 1300px) {"
        "Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes; il n'y a que des solutions" (André Gide).
        MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info - Site pro : www.robertg-conseil.fr chez PHPNET, sites perso chez PlanetHoster + sites gérés chez PHPNET, PlanetHoster, Ionos et OVH

        Commentaire


        • #5
          Bonjour Robert,

          Tu peux utiliser flexbox pour cela (avec ou sans UP).
          Inspire toi de la dernière partie de cette page qui montre plusieurs méthodes de justification verticale : https://up.lomart.fr/liste-css/css-flexgrid
          RobertG aime ceci.
          UP, le plugin universel à découvrir sur https//up.lomart.fr
          bgMax
          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

          Commentaire


          • #6
            Merci Loïc, mais je suis paumé. J'essaierai d'y revenir plus tard.
            "Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes; il n'y a que des solutions" (André Gide).
            MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info - Site pro : www.robertg-conseil.fr chez PHPNET, sites perso chez PlanetHoster + sites gérés chez PHPNET, PlanetHoster, Ionos et OVH

            Commentaire


            • #7
              Encore merci ! Je m'en suis sorti avec flexbox pour le moment.
              Je regarderai avec UP car passer en mode code pour les modifications ne me semble pas l'idéal pour les gestionnaires du site !
              "Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes; il n'y a que des solutions" (André Gide).
              MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info - Site pro : www.robertg-conseil.fr chez PHPNET, sites perso chez PlanetHoster + sites gérés chez PHPNET, PlanetHoster, Ionos et OVH

              Commentaire


              • #8
                Pour tes tests avec UP, voici un shortcode pour démarrer. Il peut être saisi ave un éditeur wysiwyg

                Code:
                <p>{up flexauto=3 | mobile=1 | class=fg-gap fg-vspace-between-1 m-child-raz-1 | css-head=#id > * [border:1px grey solid]}</p>
                <h3>titre</h3>
                <p>texte</p>
                <p>texte</p>
                <button>Le bouton</button>
                <p>{============}</p>
                <h3>titre</h3>
                <p>texte</p>
                <button>Le bouton</button>
                <p>{============}</p>
                <h3>titre</h3>
                <p>texte</p>
                <p>texte</p>
                <p>texte</p>
                <p>texte</p>
                <button>Le bouton</button>
                <p>{/up flexauto}</p>
                fg-vspace-between-1 répartit verticalement sur toute la hauteur
                m-child-raz-1 supprime les margin/padding du 1er et dernier blocs
                -1 veut dire que la règle est pour le niveau -1
                UP, le plugin universel à découvrir sur https//up.lomart.fr
                bgMax
                , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                Commentaire


                • #9
                  Merci Loïc,

                  J'essaierai, mais pour le moment, je ne vois pas comment appliquer ça aux 6 modules qui sont côte à côte et sur deux lignes.
                  Et comme j'ai un autre problème sur du multicolonne qui fonctionne sur plusieurs navigateurs mais pas Firefox, je suis plus préoccupé par ça, puisque l'utilisation de classes a résolu le premier besoin.
                  "Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes; il n'y a que des solutions" (André Gide).
                  MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info - Site pro : www.robertg-conseil.fr chez PHPNET, sites perso chez PlanetHoster + sites gérés chez PHPNET, PlanetHoster, Ionos et OVH

                  Commentaire


                  • #10
                    Bonjour Robert,
                    je ne vois pas comment appliquer ça aux 6 modules qui sont côte à côte et sur deux lignes.
                    justement, c'est cela que fait le shortcode !
                    flexauto=3 | mobile=1 met 3 blocs par ligne sur grand écran et 1 sur mobile. Tu peux ajouter tablet=2 pour avoir 3 lignes de 2 sur les moyens écrans

                    Depuis la version 1.7 de UP, le webmaster peut créer des jeux d'options pour éviter aux rédacteurs de se perdre dans le code. Actuellement, je suis en train d'adapter toutes les actions pour cela.
                    Code:
                     {up flexauto=3 | tablet=2 | mobile=1 | class=fg-gap fg-vspace-between-1 m-child-raz-1 | css-head=#id > * [border:1px grey solid]}
                    devient
                    Code:
                    {up flexauto=3blocs}
                    Je pense rendre disponible la nouvelle version de UP assez vite. Mais si tu as besoin, je t'envoie la version adaptée pour flexauto
                    UP, le plugin universel à découvrir sur https//up.lomart.fr
                    bgMax
                    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                    Commentaire


                    • #11
                      Merci, je pourrai attendre cette nouvelle version.
                      "Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes; il n'y a que des solutions" (André Gide).
                      MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info - Site pro : www.robertg-conseil.fr chez PHPNET, sites perso chez PlanetHoster + sites gérés chez PHPNET, PlanetHoster, Ionos et OVH

                      Commentaire

                      Annonce

                      Réduire
                      Aucune annonce pour le moment.

                      Partenaire de l'association

                      Réduire

                      Hébergeur Web PlanetHoster
                      Travaille ...
                      X