Mise en page sur plusieurs colonnes

JC -  
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

je construis actuellement un site internet.

Les utilisateurs pourront taper des articles et j'aimerai que les articles passent automatiquement sur plusieurs colonnes comme dans cet exemple :
http://www.csscripting.com/css-multi-column/

Cet exemple ne me convient pas car il ne fonctionne pas avec mon site.

Je cherche donc un script ou autre chose permettant de faire passer un bloc de texte sur plusieurs colonnes comme un journal.

Merci de votre aide
A voir également:

2 réponses

Réponse 1 / 2
simonpca Messages postés 35 Date d'inscription   Statut Contributeur Dernière intervention   32
 
Bonjour,

Ce script fonctionne, il faut seulement mettre ton texte dans un div et lui attribuer un ID ou une classe appropriée.(par exemple <div class="col">...</div>).

Par la suite, dans ta feuille de style (si tu n'en a pas, mets un bloc <style> dans ton en-tête (head) et colle ce qui suit dedans), tu dois simplement renseigner un truc qui ressemble à 
.col {
   column-count: 3;     /* nombre de colonnes */
   column-gap: 20px;  /* distance entre les colonnes */
}


Tu dois aussi mettre 
 <script type="text/javascript" src="css3-multi-column.js"></script>

juste après ta feuille de style (en ayant bien entendu téléchargé et placé ce fichier auparavant).

Ton fichier peut donc ressembler a ceci: 

<html>

<head>
    <style type="text/css">
        .col {
               column-count: 3;      /* nombre de colonnes */
               column-gap: 20px;   /* distance entre les colonnes */
        }
    </style>
    <script type="text/javascript" src="css3-multi-column.js"></script>

    <title>Pouf</title>
</head>

<body>
<h1>Pouf</h1>
<div class="col">
<p>blablablablablablablablablablablablablablablablablab
blablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablabla</p>
<p>blablablablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablabla</p>
<p>blablablablablablablablablablablablablablablablablab
blablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablab
blablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablab
blablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablablablablabla</p>
</div>
</body>

</html>

2
Réponse 2 / 2
gintoxic Messages postés 524 Date d'inscription   Statut Membre Dernière intervention   10
 
hello

je cherche a créer une page pour mon site ou figurera un liste de sujets qui seront position en 4 colones.
exemple :

1111111111111[espace]2222222222222[espace]3333333333333[espce]444444444444444
1111111111111[espace]2222222222222[espace]3333333333333[espce]444444444444444
1111111111111[espace]2222222222222[espace]3333333333333[espce]444444444444444
1111111111111[espace]2222222222222[espace]3333333333333[espce]444444444444444
1111111111111[espace]2222222222222[espace]3333333333333[espce]444444444444444

etc..
et ce sur une longueur indeterminée. je n'arrive pas a mettre dans ma feuille de style les colonnes correctement : elles ne vont pas laou je voudrais. et j'utilise les <div>.
si vous pouviez m'aider rapidement svp mon site ne demande que cette derniere page pour etre publié.

merci par avance.
0
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Bonjour,

Oui, il aurait été préférable que tu poses ta question dans un nouveau message bien à toi.

Toutefois, tu peux essayer de positionner tes <div> en “float” et les faire suivre d'une autre en “clear”.

Essaye comme ça :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title></title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        text-align: center;
        }
    #conteneur {
        position: relative;
        margin: 0 auto;
        width: 760px;
        text-align: left;
        background-color : #e6e6fa;
        }
    .colonne {
      float : left;
      width : 176px;
      margin : 6px;
      border : 1px solid #4169e1;
      background-color : #fff;
      }
    .colonne p {
      margin : .1em;
      color : #6a5acd;
      /*text-align : justify;*/
      }
    </style>

</head>
<body>
  <div id="conteneur">
    <div class="colonne">
      <p>col<br />je cherche a créer une page pour mon site ou figurera un liste de sujets qui seront position en 4&nbsp;colones.</p>
    </div>
    <div class="colonne">
      <p>col<br />je cherche a créer une page pour mon site ou figurera un liste de sujets qui seront position en 4&nbsp;colones.<br />je cherche a créer une page pour mon site ou figurera un liste de sujets qui seront position en 4&nbsp;colones.</p>
    </div>
    <div class="colonne">
      <p>col<br />je cherche a créer une page pour mon site ou figurera un liste de sujets qui seront position en 4&nbsp;colones.<br />je cherche a créer une page pour mon site ou figurera un liste de sujets qui seront position en 4&nbsp;colones.<br />je cherche a créer une page pour mon site ou figurera un liste de sujets qui seront position en 4&nbsp;colones.</p>
    </div>
    <div class="colonne">
      <p>col<br />je cherche a créer une page pour mon site ou figurera un liste de sujets qui seront position en 4&nbsp;colones.<br />je cherche a créer une page pour mon site ou figurera un liste de sujets qui seront position en 4&nbsp;colones.</p>
    </div>
    <div style="clear:left;"><p><br /></p></div>
  </div>
</body>
</html>

+ Vois : Alsacréations pour approfondir.
0