Positionner du texte en utilisant grid

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

  • Positionner du texte en utilisant grid

    Bonjour, j'utilise grid sous joomla 3.8.12, xampp, en local sous win 10. Dans un article j'ai positionné une div dans une autre. Je voudrais que le texte de la div contenante encadre la div contenu, comme on le fait avec une image. Float ne donne rien. Une idée ?
    Merci

  • #2
    Bonjour,

    Le mieux serait de mettre le code actuel
    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


    • #3
      Effectivement, voici le html (à partir de jce)
      Code:
      <div class="wrapper">
          <div class="box box1">
              <p><img style="margin: 8px; float: left;" src="images/formations/baptme_FFESSM.jpg" alt="baptme FFESSM" width="266" height="187" />Le premier contact avec la plongée se fait sous forme de baptême. Cette 1ère incursion dans le « monde du silence » peut se réaliser dans une piscine, une fosse, un centre de plongée ou en milieu naturel protégé. Le baptême s’adresse à tous, de 8 à 88 ans… et plus ! Il n’y a pas de prérequis : il suffit d’être en bonne santé. Accompagnés d’un moniteur, vous apprendrez à découvrir les fonds marins en toute sécurité. Un baptême dure normalement entre 20 et 40 minutes et se déroule entre 2 et 6 mètres de fond. Lors de cette première immersion dans le "monde du silence", vous apprendrez également à manier le matériel de base de la plongée en bouteille, composé d’un masque, de palmes, d’une combinaison et d’un gilet de flottabilité, ainsi qu’un détendeur, qui vous permet de respirer l’air contenu dans la bouteille. Respirer sous l'eau devient un jeu d'enfant.</p>
          </div>
          <div class="box box2">
              <div class="tabset">
                  <!-- Tab 1 -->
                  <input type="radio" name="tabset" id="tab1" aria-controls="inscription" checked>
                  <label for="tab1">Inscription</label>
                  <!-- Tab 2 -->
                  <input type="radio" name="tabset" id="tab2" aria-controls="inscrit">
                  <label for="tab2">Inscrit</label>
                  <!-- Tab 3 -->
                  <input type="radio" name="tabset" id="tab3" aria-controls="plan d'accès">
                  <label for="tab3">Plan</label>
      
                  <div class="tab-panels">
                      <section id="inscription" class="tab-panel">
                          <p><strong>formulaire inscription</strong>
                      </section>
                      <section id="inscrit" class="tab-panel">
                          <p><strong>Liste des inscrits</strong>
                      </section>
                      <section id="plan" class="tab-panel">
                          <p><strong>Plan d'accès</strong>
                      </section>
                  </div>
              </div>
          </div>
      </div>

      Et le css
      Code:
      .tabset > label {
      position: relative;
      display: inline-block;
      padding: 15px 15px 25px;
      border: 1px solid transparent;
      border-bottom: 0;
      cursor: pointer;
      font-weight: 600;
      }
      
      .tabset > label::after {
      content: "";
      position: absolute;
      left: 15px;
      bottom: 10px;
      width: 22px;
      height: 4px;
      background: #8d8d8d;
      }
      
      .tabset > label:hover,
      .tabset > input:focus + label {
      color: #06c;
      }
      
      .tabset > label:hover::after,
      .tabset > input:focus + label::after,
      .tabset > input:checked + label::after {
      background: #06c;
      }
      
      .tabset > input:checked + label {
      border-color: #ccc;
      border-bottom: 1px solid #fff;
      margin-bottom: -1px;
      }
      
      .tab-panel {
      padding: 30px 0;
      border-top: 1px solid #ccc;
      }
      *,
      *:before,
      *:after {
      box-sizing: border-box;
      }
      
      body {
      padding: 30px;
      }
      
      .tabset {
      max-width: 65em;
      }
      
      /*div imbriques*/
      .wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      height:600px;
      
      
      }
      .box1 {
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row-start: 1;
      grid-row-end: 10;
      
      }
      .box2 {
      grid-column-start: 2;
      grid-column-end:5;
      grid-row-start:1;
      grid-row-end: 5;
      
      }
      Dernière édition par lomart à 30/09/2018, 14h57

      Commentaire


      • #4
        J'ai mis votre code dans des blocs code. C'est plus lisible
        C'est des onglets ! Il faut mettre le code dans l'onglet

        il manque la classe box

        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


        • #5
          Merci, la classe box servira plus tard. J'ai enlevé grid, avec un float sur les onglets, cela fonctionne (mise en page à travailler). Mais je n'ai trouvé nul part sur le net comment faire cela avec grid
          Fichiers joints

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X