Mise en page sur plusieurs colonnes

JC -  
Gihef Messages postés 5165 Statut Contributeur -
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

2 réponses

  1.
    simonpca Messages postés 35 Statut Contributeur 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
  2. gintoxic Messages postés 566 Statut Membre 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
    1. Gihef Messages postés 5165 Statut Contributeur 2 781
       
      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

Discussions similaires

Retour en arrière avec Pages sur Mac ?
alex 2510 -
emma.plv -

13 réponses