• Colonnes multiples

    Il me semble avoir déjà proposé ce genre de code mais il doit y avoir un moment; écrire son texte et l'afficher sous forme de colonne, type journal.
    Vous pouvez insérer des images dans votre texte
    Je vais reprendre une blague du site Ma planète pour en détailler la construction; il faut, bien entendu, entrer dans le code source pour cela.
    Si ce code vous plaît, vous pourrez obtenir un code selon votre choix, dans un générateur: ICI
    J'ai collé le texte dans mon article et ouvert le code source; mon histoire se trouve écrite après un <p> avec, à la fin, un autre </p> qui en signale la fin.
    avant le premier <p>, j'écris le code de mon cadre histoire: <div id="colonne" style="width: 900px;  border: 6px ridge brown; padding: 5px; margin:10px auto; background-color:lime;">  et, après le dernier </p>, je ferme ce cadre par </div>
    Après ce </div>, j'écris le lignes CSS pour créer le nombre de colonnes et le style choisi: je laisse toutes les lignes que vous trouverez sur le générateur même si elles ne sont pas toutes nécessaires.

    <style><!--
    #colonne {-moz-column-count:4; -webkit-column-count:4; -o-column-count:4;column-count:4;
    -moz-column-gap:35px; -webkit-column-gap:35px; -o-column-gap:35px; column-gap:35px;
    -webkit-column-rule-width:2px; -webkit-column-rule-color:#000000 ; -webkit-column-rule-style:dashed;
    -moz-column-rule-width:2px; -moz-column-rule-color:#000000 ; -moz-column-rule-style:dashed;
    -o-column-rule-width:2px;-o-column-rule-color:#000000 ;-o-column-rule-style:dashed;column-rule-width:2px;
    column-rule-color:#cbcefb; column-rule-style:dashed;}
    --></style>


    L' père Victor est allé en ville voir l' Docteur -

    Voilà docteur, chuis ben embêté, dit-il , à moûn âge y en a beaucoup qui vous demand' raient du Viagra.
    Moi j' en ai point b'soin, j'ai la zigounette encore ben vaillante, seulement voilà, à chaque fois qu'elle s'met au garde à vous, chuis dans les champs, l'temps de r'tourner à la ferme voilà quelle r'garde à nouveau mes bottes.
    Le médecin hoche la tête d'un air grave
    • Vous n'auriez pas des fois un truc pour z'y maintenir la tête haute jusqu'à la ferme ? lui demande Victor.
    • - J' ai bien une idée, dit le toubib, lorsque vous irez aux champs, emportez votre fusil et dites à votre femme que lorsqu'elle entendra tirer en l'air qu'elle coure vous rejoindre.
    - Tirer en l' air pour tirer un coup ? En v'la une idée qu'elle est pas mauvaise !
    Quelque temps plus tard v'là t'y pas que l'Victor débarque dans le cabinet du docteur.
    - J'viens vous voir, rapport au fusil !
    - Pourquoi ça ne marche pas ?
    - Oh ! ça eu marché, fait l'Victor, mais ça n'marche plus.
    Pendant tout l' été j' tirais en l' air... la Sylvette rappliquait en courant et hop ! j'la bouriaudais dans les broussailles !
    - Oui, et alors, demande le médecin, où est le problème ?
    - Ben... d'puis l' ouverture d'la chasse, j'la vois plus !

    En rédigeant cet artcile, je me rends compte qu'il n'est pas facile d'en expliquer la construction mais voici le code complet
    <div id="colonne" style="width: 900px; border: 6px ridge brown; padding: 5px; margin: 10px auto; background-color: lime;"><p style="font-size:12pt;">Le texte de la blague</p>
    <style><!--
    #colonne {-moz-column-count:4; -webkit-column-count:4; -o-column-count:4;column-count:4;
    -moz-column-gap:35px; -webkit-column-gap:35px; -o-column-gap:35px; column-gap:35px;
    -webkit-column-rule-width:2px; -webkit-column-rule-color:#000000 ; -webkit-column-rule-style:dashed;
    -moz-column-rule-width:2px; -moz-column-rule-color:#000000 ; -moz-column-rule-style:dashed;
    -o-column-rule-width:2px;-o-column-rule-color:#000000 ;-o-column-rule-style:dashed;column-rule-width:2px;
    column-rule-color:#cbcefb; column-rule-style:dashed;}
    --></style>
    Bien entendu, le nombre de colonnes, largeur, couleur ... est de votre choix; la largeur du cadre est à définir mais ne mettez pas de hauteur à ce cadre: elle s'ajustera automatiquement en fonction du texte et de la taille de la police..