Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Div retour à la ligne "collées" en dessous des précédentes


Sujet :

Positionnement en CSS avec z-index

  1. #1
    Membre régulier
    Div retour à la ligne "collées" en dessous des précédentes
    Bonjour,

    J'ai un souci avec des div au contenu dynamique.

    Difficile à expliquer, je vous met une image pour vous montrer :



    En gros j'ai 4 divs de 25% (en float left) par ligne qui au delà de 4 repassent à la ligne mais au lieu de se "coller" en dessous de la première, elles passent en dessous d'une ligne "virtuelle", ce qui est normal bien entendu telle que je l'ai programmé pour le moment.
    Mais comment faire pour que les div se "collent" comme dans l'exemple sur ma photo ?

    Merci pour vos pistes... css ou javascript je ne sais pas trop...

    Merci.

  2. #2
    Invité
    Invité(e)
    Bonjour,


  3. #3
    Membre régulier
    Merci pour le lien.
    Je regarde ça.
    En css pur, ce n'est pas faisable ?

  4. #4
    Membre régulier
    C'est parfait en effet, mais malheureusement, je ne peux pas l'utiliser car mes blocs sont dans un menu qui est caché (display:none) à l'affichage de la page. La div qui les contient ne s'affiche que survol de la souris sur un div supérieur (le titre).

    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div class="menu">
    ...
    ...
     
      <div class="Menu-item">
        <a href="...">titre</a>
        <div class="grid" style="display:none">
           <div class="grid-item">...</div>
           <div class="grid-item">...</div>
           <div class="grid-item">...</div>
           <div class="grid-item">...</div>
           ...
        </div>
      </div>
     
    ...
    ...
    </div>


    mais du coup, le JS Masonry ne voit pas la taille du bloc "grid" et me met les items en top:0;left:0... , bref, si la div n'est pas visible, il peut pas calculer les hauteurs etc... ce qui est normal à priori....

    C'est pourquoi je me demandais si c'était pas faisable en css..... je continue à chercher.
    Merci en tout cas pour votre lien

  5. #5
    Modérateur

    Bonjour,
    si tu peux modifier ta structure HTML tu peux t'en sortir en mettant des éléments en flex-direction:column dans un élément conteneur en flex-direction:row.

    Quelque chose comme, les classes couleur sont là pour te montrer l'ordre, en colonne donc :
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div class="flex-container">
      <div class="flex-column">
        <div class="orange"></div>
        <div class="bleu"></div>
        <div class="vert"></div>
      </div>
      <div class="flex-column">
        <div class="orange"></div>
        <div class="bleu"></div>
        <div class="vert"></div>
      </div>
      <div class="flex-column">
        <div class="orange"></div>
        <div class="bleu"></div>
        <div class="vert"></div>
      </div>
      <div class="flex-column">
        <div class="orange"></div>
        <div class="bleu"></div>
        <div class="vert"></div>
      </div>
    </div>

    et un CSS du type de :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .flex-container {
      display: flex;
      width: 40em;
      margin: auto;
    }
    .flex-container .flex-column {
      display: flex;
      flex: 0 1 25%;
      flex-direction: column;
    }

  6. #6
    Membre régulier
    Bonjour et merci beaucoup pour votre aide.
    Je regarde ça et fait quelques tests..
    Merci beaucoup

  7. #7
    Futur Membre du Club
    D'accord avec NoSmoking
    C'est faisable assez facilement avec les flex-box

  8. #8
    Membre régulier
    Ben facilement... je pige pas la différence entre le comportement des blocs par rapport à la "ligne virtuelle" avec Flex et plusieurs div en Float left...
    J'ai trouvé ce site qui explique bien Flex(https://css-tricks.com/snippets/css/...de-to-flexbox/), mais je vois pas comment faire ce que je veux....
    Il y a toujours cette pseudo ligne virtuelle qui m'embête....

    Comme mon contenu est dynamique, il arrive comme ça :

    1, 2, 3, 4
    5, 6, 7, 8
    9, ...etc..

    Du coup, j'aimerais que le 5 se colle en dessous, du 1, le 6 en dessous du 2 etc.... mais pour le moment je sèche....

    Merci pour votre aide dans tous les cas.
    je continu mes recherches....

  9. #9
    Modérateur

    Il y a toujours cette pseudo ligne virtuelle qui m'embête...
    as tu essayé la structure que je t'ai montrée et le minimum de CSS proposé ?

  10. #10
    Membre régulier
    Oui mais soit je sais pas faire, soit ça fonctionne pas comme je voulais... ça me met les blocs à la suite sur une seule ligne c'est niquel mais j'ai essayé de modifier le code pour limiter le nombre à 4 blocs maxi sur une ligne mais le retour à la ligne se décale alors toujours en dessous sur la hauteur du bloc le plus haut et ne se colle pas à ceux moins haut... je sais pas si je suis clair dans mes explications....; Cf mon schéma d'en haut de ce post à gauche.

    Au départ, je ne sais pas combien je vais avoir de blocs ni leur contenu. Du coup, ils arrivent au fur et à mesure à la construction de la page grâce à une boucle (je travaille en .NET).

    Je pense que je vais utiliser flex et me débrouiller pour distribuer les blocs dans 5 colonnes au lieu de placer les blocs à la suite.... j'abandonne pas mais je vois pas punaise.... je pige pas la logique....

  11. #11
    Invité
    Invité(e)
    Bonjour,

    à voir : CSS - columns (Compatibilité des navigateurs)

    N.B. Les media queries permettent de gérer le nombre de colonnes

  12. #12
    Modérateur

    Voilà un petit exemple, plus complet, pour te monter le principe qu'il faut que tu appliques
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-direction:column in flex-direction:row</title>
    <meta name="Author" content="NoSmoking">
    <meta name="DVP-discussion" content="d2059485">
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.5 Verdana,sans-serif;
    }
    h1, h2, h3 {
      margin: .25em 0;
      color: #069;
    }
    main {
      display: block;
      margin: auto;
      max-width: 60em;
    }
    header {
      border-bottom: 2px solid #069;
    }
     
    .orange { background: #F70;}
    .bleu   { background: #08B;}
    .vert   { background: #0D0;}
    .h-5    { height: 5em;}
    .h-7    { height: 7em;}
    .h-10   { height: 10em;}
    .h-15   { height: 15em;}
     
    .flex-container {
      counter-reset: countFlex;
      display: flex;
      width: 40em;
      margin: auto;
      border: 1px solid #069;
    }
    .flex-container .flex-column div::before {
      content: counter(countFlex) "-" attr(class);
      counter-increment: countFlex;
    }
    .flex-container .flex-column {
      display: flex;
      flex: 0 1 25%;
      flex-direction: column;
    }
    .flex-container .flex-column div {
      box-sizing: border-box;
      margin: .15em;
    }
    [type="checkbox"]:checked ~ div {
      display : none;
    }
    </style>
    </head>
    <body>
      <main>
        <header>
          <h1>Avec flex-direction:column</h1>
        </header>
        <nav>
          <input id="toggle" type="checkbox" checked>
          <label for="toggle">toggle affichage</label>
          <div class="flex-container">
            <div class="flex-column">
              <div class="orange h-7"></div>
              <div class="bleu h-10"></div>
              <div class="vert h-7"></div>
            </div>
            <div class="flex-column">
              <div class="orange h-10"></div>
              <div class="bleu h-5"></div>
              <div class="vert h-15"></div>
            </div>
            <div class="flex-column">
              <div class="orange h-15"></div>
              <div class="bleu h-7"></div>
              <div class="vert h-7"></div>
            </div>
            <div class="flex-column">
              <div class="orange h-5"></div>
              <div class="bleu h-15"></div>
              <div class="vert h-5"></div>
            </div>
          </div>
        </nav>
      </main>
    </body>
    </html>

    il est basé sur quatre colonnes de trois éléments chacune et de couleur, orange, bleu et vert, qui se superposent sans « ligne virtuelle ».


    Citation Envoyé par jreaux62
    Pour une telle réalisation les « columns » ne permettent pas le passage d'un élément en entier à la colonne suivante, un élément peut tout à fait être à cheval sur deux colonnes, c'est bien dommage d'ailleurs qu'il n'est pas prévu un point de rupture ou alors ai-je insuffisamment, ou mal, lu la spécification.

  13. #13
    Membre régulier
    Merci beaucoup pour cet exemple et ces réponses.
    Je teste ça dès demain de retour à mon poste. Avec tous ces éléments, je devrais m'en débrouiller.
    Merci encore pour tout.

  14. #14
    Invité
    Invité(e)
    Citation Envoyé par NoSmoking Voir le message
    ...un élément peut tout à fait être à cheval sur deux colonnes...
    Exemple :

    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <section class="container">
      <img src="https://www.developpez.net/forums/avatars/405341-nosmoking.gif" />
      <img src="https://www.developpez.net/forums/avatars/72027-stephane_br.gif" />
      <img src="https://i.pinimg.com/originals/e7/d0/d7/e7d0d7fa3f3e62707f44d60d22e1076e.jpg" />
      <img src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif" />
      <img src="https://www.developpez.net/forums/avatars/405341-nosmoking.gif" />
      <img src="https://www.developpez.net/forums/avatars/72027-stephane_br.gif" />
      <img src="https://i.pinimg.com/originals/e7/d0/d7/e7d0d7fa3f3e62707f44d60d22e1076e.jpg" />
      <img src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif" />
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQYgFf978nzK3TzLouhwIYkNJLD57edVpqVXHOrmq0QYIZDlHzj" />
      <img src="https://www.developpez.net/forums/avatars/72027-stephane_br.gif" />
      <img src="https://i.pinimg.com/originals/e7/d0/d7/e7d0d7fa3f3e62707f44d60d22e1076e.jpg" />
      <img src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif" />
      <img src="https://archzine.fr/wp-content/uploads/2018/11/01-i-phone-fond-d-%C3%A9cran-styl%C3%A9-fond-ecran-ordinateur-cool-id%C3%A9e-choix-d-arri%C3%A8re-plan-montagne-et-%C3%A9toiles.jpg" />
      <img src="https://www.developpez.net/forums/avatars/72027-stephane_br.gif" />
      <img src="https://i.pinimg.com/originals/e7/d0/d7/e7d0d7fa3f3e62707f44d60d22e1076e.jpg" />
      <img src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif" />
      <img src="https://www.developpez.net/forums/avatars/405341-nosmoking.gif" />
      <img src="https://www.developpez.net/forums/avatars/72027-stephane_br.gif" />
      <img src="https://i.pinimg.com/originals/e7/d0/d7/e7d0d7fa3f3e62707f44d60d22e1076e.jpg" />
      <img src="https://archzine.fr/wp-content/uploads/2018/11/01-i-phone-fond-d-%C3%A9cran-styl%C3%A9-fond-ecran-ordinateur-cool-id%C3%A9e-choix-d-arri%C3%A8re-plan-montagne-et-%C3%A9toiles.jpg" />
      <img src="https://www.developpez.net/forums/avatars/405341-nosmoking.gif" />
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQYgFf978nzK3TzLouhwIYkNJLD57edVpqVXHOrmq0QYIZDlHzj" />
      <img src="https://i.pinimg.com/originals/e7/d0/d7/e7d0d7fa3f3e62707f44d60d22e1076e.jpg" />
      <img src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif" />
    </section>

    Code css :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    .container {
      columns:5; /* sur xx colonnes */
    }
    .container img { 
      width:100%; 
      display:block; 
      margin:4% 0; 
    }

  15. #15
    Modérateur

    Ton exemple « est biaisé » car utilisant des éléments, ici <img>, qui ne peuvent pas être « découpés ».

    Je reviens quand même sur ce que j'ai écris plus haut sous la pression (Leffe pour les connaisseurs).

    c'est bien dommage d'ailleurs qu'il n'est pas prévu un point de rupture ou alors ai-je insuffisamment, ou mal, lu la spécification.
    en fait il existe bien un « point de rupture » mais qui n'est pas reconnu par FireFox, donc les déclarations break-after:column ou encore break-before:column ne sont pas utilisable.

    Il existe cependant une façon d'éviter cette « coupure », cette méthode consiste à utiliser la déclaration display:inline-block sur tous les éléments inclus, c'est plus simple, mais dans ce cas le changement de colonne va dépendre de la hauteur des éléments précédents/suivants.

    Je mets un exemple qui devrait vous permettre de mieux voir ce que je dis :
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utilisation de multi-column layouts</title>
    <meta name="Author" content="NoSmoking">
    <meta name="DVP-discussion" content="d2059485">
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.5 Verdana,sans-serif;
    }
    h1, h2, h3 {
      margin: .25em 0;
      color: #069;
    }
    main {
      display: block;
      margin: auto;
      max-width: 60em;
    }
    header {
      border-bottom: 2px solid #069;
    }
    p {
      font-size: .9em;
      margin: .5em 0;
    }
    .orange { background: #F70;}
    .bleu   { background: #08B;}
    .vert   { background: #0D0;}
     
    .column-container {
      counter-reset: countElement;
      column-count: 4;
      column-gap: .3em;
      width: 40em;
      margin: 1em auto;
      border: 1px solid #069;
    }
    .column-container div::before {
      content: counter(countElement) "-" attr(class);
      counter-increment: countElement;
      font-weight: bold;
    }
    .column-container  div {
      box-sizing: border-box;
      margin: .15em 0;
      display: block;
      border: 1px solid transparent; /* stop fusion des marges */
    }
    label {
      display: inline-block;
      margin: .5em;
      color: #999;
    }
    [type="radio"]:checked + label {
      color: #069;
    }
    #inline-block:checked ~ div.column-container  div {
      display : inline-block;
    }
    #break-before:checked ~ div.column-container  .break-before {
      break-before: column;  /* not FireFox */
    }
    #break-after:checked ~ div.column-container .break-after {
      break-after: column;  /* not FireFox */
    }
    </style>
    </head>
    <body>
      <main>
        <header>
          <h1>Avec column-count:4</h1>
        </header>
        <nav>
          <input id="flux-normal"  type="radio" name="toggle" checked><label for="flux-normal">flux normal</label>
          <input id="inline-block" type="radio" name="toggle"><label for="inline-block">display: inline-block</label>
          <input id="break-before" type="radio" name="toggle"><label for="break-before">break-before:column</label>
          <input id="break-after" type="radio" name="toggle"><label for="break-after">break-after:column</label>
          <span id="size"></span>
          <div class="column-container">
            <div class="orange break-before">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <div class="bleu">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              <p>Phasellus faucibus ex non scelerisque volutpat.
            </div>
            <div class="vert break-after">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              <p>Phasellus faucibus ex non scelerisque volutpat.
              <p>Proin vulputate lectus sed consequat porta.
            </div>
            <div class="orange break-before">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              <p>Phasellus faucibus ex non scelerisque volutpat.
            </div>
            <div class="bleu">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <div class="vert break-after">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              <p>Phasellus faucibus ex non scelerisque volutpat.
            </div>
            <div class="orange break-before">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              <p>Phasellus faucibus ex non scelerisque volutpat.
              <p>Proin vulputate lectus sed consequat porta.
            </div>
            <div class="bleu">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              <p>Phasellus faucibus ex non scelerisque volutpat.
              <p>Proin vulputate lectus sed consequat porta.
              <p>Sed ut lectus imperdiet, venenatis libero eu, commodo neque.
            </div>
            <div class="vert break-after">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <div class="orange break-before">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              <p>Phasellus faucibus ex non scelerisque volutpat.
            </div>
            <div class="bleu">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              <p>Phasellus faucibus ex non scelerisque volutpat.
              <p>Proin vulputate lectus sed consequat porta.
            </div>
            <div class="vert break-after">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              <p>Phasellus faucibus ex non scelerisque volutpat.
              <p>Proin vulputate lectus sed consequat porta.
              <p>Sed ut lectus imperdiet, venenatis libero eu, commodo neque.
            </div>
          </div>
        </nav>
      </main>
    <script>
    const elem = document.querySelector(".column-container");
    const spanSize = document.querySelector("#size");
    const style = window.getComputedStyle(elem);
    // juste pour provoquer un repaint
    document.onclick = function () {
      elem.style.display = style.display == "flow-root" ? "block" : "flow-root";
      spanSize.textContent = "[" + style.height + "]";
    };
    elem.click();
    </script>
    </body>
    </html>

    Il y a un peu de JavaScript pour autoriser le repaint de la page et de suivre la hauteur de l'élément column.

    [EDIT]
    Ajout de l'exemple en ligne : Découpage de contenu avec column-count:4

    Ressources :

  16. #16
    Membre régulier
    Merci beaucoup pour toutes vos réponses.
    C'est bon, j'ai pu m'en sortir avec tout cela.
    Merci encore.

  17. #17
    Modérateur

    C'est bon, j'ai pu m'en sortir avec tout cela.
    juste pour le redex on pourrait savoir ce que tu as mis en oeuvre.

  18. #18
    Membre régulier
    Bonjour,

    Oui, j'ai repris votre dernier exemple avec "column-count: 4" qui a pu répondre à ce que je voulais faire parfaitement et j'ai joué avec les @media queries pour modifier cette valeur selon la largeur de l'écran pour la partie responsive.
    J'ai mis dans ma ToDoList de bien regarder la partie "flex" en css pour m'améliorer sur ces techniques que je ne maîtrise pas bien encore

    Merci encore pour toute l'aide que vous m'avez apportée.

    Cordialement.

  19. #19