Discussion :

[dancom5]

Bonjour. Un truc que je trouve curieux dans l'attribution des colonnes quand on utilise column-count.

Ce code par exemple, dans un paragraphe, ça va séparer en trois colonnes. Mais, ce n'est pas ce que je veux.
Je veux faire exemple 7 paraphrases ou phrases et séparer en colonnes.

J'ai trois paragraphes qui doit remplir maximum 600 px de hauteur par 300px de largeur et le reste va dans les deux autres. Comme dans les journaux quotidiens. Ce que ça fait, si j'ai une phrase plus large que la colonne, ça va aller dans les deux autres. Une autre phrase, même chose. Me semble que ça pas de bon sens.

Code :

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
-moz-column-count:3;
-webkit-column-count:3;
-o-column-count:3;
column-count:3;
-moz-column-gap:26px;
-webkit-column-gap:26px;
-o-column-gap:26px;
column-gap:26px;
-webkit-column-rule-width:2px;
-webkit-column-rule-color:#34696d;
-webkit-column-rule-style:dotted;
-moz-column-rule-width:2px;
-moz-column-rule-color:#34696d;
-moz-column-rule-style:dotted;
-o-column-rule-width:2px;
-o-column-rule-color:#34696d;
-o-column-rule-style:dotted;
column-rule-width:2px;
column-rule-color:#34696d;
column-rule-style:dotted;

Je souhaite de l'aide pour résoudre ce problème. Merci.

[NoSmoking]

Bonjour,
j'ai un peu de mal à saisir ton soucis

(...)si j'ai une phrase plus large que la colonne, ça va aller dans les deux autres(...)

tu parles de débordement ?

Donne nous la structure de ta page.

[Invité]

Bonjour,

...Me semble que ça pas de bon sens...

Idem.

Fais-nous un beau dessin, qu'on essaie de comprendre...

N.B. Si c'est ce que je pense (= faire "s'écouler" un texte dans plusieurs conteneurs), il faut plus que du CSS pour y arriver.

[dancom5]

Ceci va prendre la phrase et la séparer en colonne. Pareille pour toute les phrases. Qu'elle soit courte ou longue: Voir le rendu en image incluse.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="p">
<p>Le solstice d'été correspond au jour le plus long de l'année et marque l'entrée dans la saison estivale. Découvrez toutes les explications.</p>
<p>On l’associe au retour de l’été, aux soirées lumineuses ou à la fête de la musique. Le solstice d’été 2015 a lieu très bientôt, puisqu’il est fixé au 21 juin. Mais quelle est la définition du solstice ? Comment s’explique scientifiquement ce phénomène ? Quand est-ce qu’il aura lieu exactement ? Quelles sont les traditions liées au passage à l’été ? A quelques jours de la date fatidique, Linternaute.com vous propose de tout découvrir au sujet de cet évènement astronomique qui fascine l’humanité depuis des millénaires.</p>
<p></p>

Mais, normalement, les phrase dans Word ou un autre type de document, les phrase se suivent l'une à la suite de l'autre et quand ça déborde, ça va dans la colonne suivante. La seule chose que j'ai réussi à faire mais qui n'est pas la norme c'est de placer deux balises "BR" pour remplacer la balise "P" pour arriver à mes fins.

On ne devrait pas faire ça et c'est ce que je tente de trouver pour ne pas utiliser de "BR" à la place de "P"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="p">
<p>Le solstice d'été correspond au  jour le plus long de l'année et marque l'entrée dans la saison estivale.  Découvrez toutes les explications.
<br><br>On l’associe  au retour de l’été, aux soirées lumineuses ou à la fête de la musique.  Le solstice d’été 2015 a lieu très bientôt, puisqu’il est fixé au 21  juin. Mais quelle est la définition du solstice ? Comment s’explique  scientifiquement ce phénomène ? Quand est-ce qu’il aura lieu exactement ?  Quelles sont les traditions liées au passage à l’été ? A quelques jours  de la date fatidique, Linternaute.com vous propose de tout découvrir au  sujet de cet évènement astronomique qui fascine l’humanité depuis des  millénaires.</p>
<p></p>

[NoSmoking]

En écrivant des noms de classes comme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="p">

tu vas droit dans le mur

Il y a lourd à parier que tu as mal déclaré le CSS et mis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
p{
    column-count:3;
    column-gap:26px;
    column-rule-width:2px;
    column-rule-color:#34696d;
    column-rule-style:dotted;
}

au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.p{
    column-count:3;
    column-gap:26px;
    column-rule-width:2px;
    column-rule-color:#34696d;
    column-rule-style:dotted;
}

et là le .(point) a toute son importance et cela change tout.

Conseil : évite ce genre d'écriture et mets plutôt un

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="column_3">

par exemple qui sera bien plus parlant.

[dancom5]

Ça divise quand même la phrase par phrase en 3 colonnes
et ce pour chaque phrase.

1 2 3
4 5 6

au lieu de

1 3 5
2 4 6

[Invité]

bonjour,
depuis le temps, tu n'as pas encore compris qu'il faut fournir :

• le code CSS
• ET le code HTML associé ?

Ton problème est simple : tu ne mets pas le CSS des 3 colonnes sur le bon attribut !
C'est du moins ce qu'on DOIT DEVINER avec le peu de code et les explications absconses* que tu donnes...

* Non, ce n'est pas un gros mot...

Voici un exemple fonctionnel :

• http://codepen.io/jreaux62/pen/YXxWqQ

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
<article class="cols3">
  <header>Le solstice d'été</header>
  <div class="content">
  <p><strong>Le solstice d'été correspond au jour le plus long de l'année et marque l'entrée dans la saison estivale.</strong></p>
  <h5>Découvrez toutes les explications.</h5>
  <p>On l'associe au retour de l'été, aux soirées lumineuses ou à la fête de la musique. Le solstice d’été 2015 a lieu très bientôt, puisqu'il est fixé au 21 juin.</p>
  <ul>
    <li>Mais quelle est la définition du solstice ?</li>
    <li>Comment s'explique scientifiquement ce phénomène ?</li>
    <li>Quand est-ce qu'il aura lieu exactement ?</li>
    <li>Quelles sont les traditions liées au passage à l'été ?</li>
  </ul>
  <p>A quelques jours de la date fatidique, <a href="http://www.Linternaute.com">Linternaute.com</a> vous propose de tout découvrir au sujet de cet évènement astronomique qui fascine l'humanité depuis des millénaires.</p>
  </div>
  <footer><a href="#">en savoir +</a></footer>
</article>

Code css :

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
article.cols3 { padding:0; margin:0; 
  position:relative; 
  width:600px;
}
article.cols3 .content { 
  position:relative;
  max-height:300px;
  overflow:auto;
  padding:10px; margin:0;
 
  /* sur 3 colonnes */
    -webkit-column-count:3;
    -webkit-column-gap:26px;
    -webkit-column-rule:2px dotted #34696d;
 
    -moz-column-count:3;
    -moz-column-gap:26px;
    -moz-column-rule:2px dotted #34696d;
 
    column-count:3;
    column-gap:26px;
    column-rule:2px dotted #34696d;
}
 
/* decorations */
article.cols3 header { 
  padding:5px 10px; margin:0; 
  font-size:160%; text-transform:uppercase; 
  background-color:#34696d; color:#fff; text-align:center;
}
article.cols3 footer { 
  margin:0; padding:0; font-size:90%; text-transform:uppercase; 
  background-color:#34696d; color:#fff; text-align:center;
}
article.cols3 footer a { display:block; padding:2px 10px; color:#fff; text-decoration:none; }
article.cols3 .content h5 { padding:0; margin:0 0 15px; color:#34696d; font-weight:bold; font-size:120%; }
article.cols3 .content p { padding:0; margin:0 0 15px; }
article.cols3 .content ul { padding:0; margin:0 0 10px; list-style:square inside none; }
article.cols3 .content ul li { padding:0; margin:0 0 5px; }

Fais-en bonne usage...

[dancom5]

Avec le plus de simplicité sans formatage autre que les 3 colonnes.
J'ai fais de même pour mieux comprendre le fonctionnement.

C'est sur que je vais m y mettre pour les autres balise en exemple.

Code :

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
 
<style>
        p {
        line-height:1em;
        text-align: justify;
        }
 
        div.cols3 { 
            position:relative;
            width:1024px;
 
        }
        div.cols3 .content { 
            position:relative;
            max-height:500px;
            line-height: 1em;
 
            -moz-column-count:3;
            -webkit-column-count:3;
            -o-column-count:3;
            column-count:3;
            -moz-column-gap:26px;
            -webkit-column-gap:26px;
            -o-column-gap:26px;
            column-gap:26px;
            -webkit-column-rule-width:2px;
            -webkit-column-rule-color:#34696d;
            -webkit-column-rule-style:dotted;
            -moz-column-rule-width:2px;
            -moz-column-rule-color:#34696d;
            -moz-column-rule-style:dotted;
            -o-column-rule-width:2px;
            -o-column-rule-color:#34696d;
            -o-column-rule-style:dotted;
            column-rule-width:2px;
            column-rule-color:#34696d;
            column-rule-style:dotted;
        }
</style>
 
<div class="cols3">
  <div class="content">
      <p style="margin-top:0"><strong>Le solstice d'été correspond au jour le plus long de l'année et marque l'entrée dans la saison estivale.</strong></p>
            <p>Tous mes sens sont émus d'une volupté douce et pure, comme l'haleine du matin dans cette saison délicieuse.</p>
            <p>Seul, au milieu d'une contrée qui semble fait exprès pour un coeur tel que mien, j'y goûte à longs traits l'ivresse de la vie.</p>
            <p>Je suis si heureux, mon ami, si absorbé dans le sentiment de ma paisible existence, que mon art en souffre. Incapable de dessiner le mointre trait, la plus faible ébauche, jamais pourtant je ne fus si grand peintre.</p>
            <p>Quand mon vallon chéri se couvre autour de moi d'une légère vapeur; qu'au-dessus de ma tête le soleil de midi darde ses rayons embrasés sur la sombre voûte de mon bois, au fond duquel, comme d'un sanctuaire, il introduit à peine une tremblante lumière; qu'étendu sur le gazon touffu, à la chute d'un ruisseau, je découvre avec ravissement une multitude de plantes, de fleurs d'une délicatesse infinie; que je vois s'agiter entre les brins d'herbe des milliers de vermisseaux, d'insectes, de moucherons, aux formes variées et innombrables; que j'entends résonner à mon oreille le murmure confus de ce petit monde; quand l'auguste présence de l'Être tout-puissant qui créa l'homme à son image, le souffle vivifiant du Dieu d'amour et de</p>
  </div>
</div>

[dancom5]

Je viens de remarquer que si j ai du contenu pour 2 colonnes alors que ma config est pour 3
ça ne rempli pas la totalité de la première.

réduit au plus site CSS:

Code :

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
        div.cols3 { 
            position:relative;
            width:50%;
        }
        div.cols3 .content { 
            position:relative;
            min-height:200px;
            line-height: 1em;
            padding:20px;
 
            -moz-column-count:3;
            -webkit-column-count:3;
            -o-column-count:3;
            column-count:3;
            -moz-column-gap:36px;
            -webkit-column-gap:36px;
            -o-column-gap:36px;
            column-gap:36px;
            -webkit-column-rule-width:2px;
            -webkit-column-rule-color:#34696d;
            -webkit-column-rule-style:dotted;
            -moz-column-rule-width:2px;
            -moz-column-rule-color:#34696d;
            -moz-column-rule-style:dotted;
            -o-column-rule-width:2px;
            -o-column-rule-color:#34696d;
            -o-column-rule-style:dotted;
            column-rule-width:2px;
            column-rule-color:#34696d;
            column-rule-style:dotted;
        }

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="cols3">
  <div class="content">
      <p style="margin-top:0"><strong>Le solstice d'été correspond au jour le plus long de l'année et marque l'entrée dans la saison estivale.</strong></p>
            <p>Tous mes sens sont émus d'une volupté douce et pure, comme l'haleine du matin dans cette saison délicieuse.</p>
            <p>Seul, au milieu d'une contrée qui semble fait exprès pour un coeur tel que mien, j'y goûte à longs traits l'ivresse de la vie.</p>
            <p>Je suis si heureux, mon ami, si absorbé dans le sentiment de ma paisible existence, que mon art en souffre. Incapable de dessiner le mointre trait, la plus faible ébauche, jamais pourtant je ne fus si grand peintre.</p>
            <p>Quand mon vallon chéri se couvre autour de moi d'une légère vapeur; qu'au-dessus de ma tête le soleil de midi darde ses rayons embrasés sur la sombre voûte de mon bois, au fond duquel, comme d'un sanctuaire, il introduit à peine une tremblante lumière; qu'étendu sur le gazon touffu, à la chute d'un ruisseau, je découvre avec ravissement une multitude de plantes, de fleurs d'une délicatesse infinie; que je vois s'agiter entre les brins d'herbe des milliers de vermisseaux, d'insectes, de moucherons, aux formes variées et innombrables; que j'entends résonner à mon oreille le murmure confus de ce petit monde; quand l'auguste présence de l'Être tout-puissant qui créa l'homme à son image, le souffle vivifiant du Dieu d'amour et de</p>
  </div>

Ça fait bien les paragraphes l une à la suite de l'autre sauf quand ça rempli pas la colonne complete.

[Invité]

C'est le fonctionnement normal.
Les 3 colonnes s'équilibrent.

[dancom5]

Je croyais que l'on pouvait remplir une colonne, la suivante et ainsi de suite;
en mettant une hauteur. Et non par répartition égales.