Le texte en colonnes

**XdiZ** · 09/04/2013, 08h04

Re : Le texte en colonnes

Bonjour,

Si votre template vous le permet (donc à vérifier auprès du site où vous avez téléchargé le template), vous pouvez affecter des class CSS à vos balises DIV ou P contenant votre texte.

Si votre template ne gère pas le multicolonne de contenu, vous devez rajouter dans les fichiers CSS de votre template, les informations fournit dans l'article de DesignShack.

Par contre le CSS Column n'est pas reconnu par IE < 10 (http://fmbip.com/litmus/ et chercher CTRL+F "CSS Column").

Je vous invite à lire ces 2 articles :
- http://www.alsacreations.com/tuto/li...nes-float.html
- http://www.pompage.net/traduction/colonnesfactices

Cordialement.

**sincalor** · 09/04/2013, 10h33

Re : Le texte en colonnes

Merci Xdiz,

J'ai fait comme vous avez dit, et tout marche au poil.
C'est-à-dire, pour ceux que ça intéresse (et en détail car je suis débutant) :
J'ai écrit ma classe dans le fichier template.css de mon template, j'ai donc rajouté, à la suite de tous les styles et classes :

Code:

 
#colonne {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  -moz-column-rule: medium solid #993300;
  -webkit-column-rule: medium solid #993300;
  column-rule: medium solid #993300;
  -moz-column-gap: 40px;
  -webkit-column-gap: 40px;
  column-gap: 40px;
}

Puis, dans mon article, je suis passé en mode code (car je ne trouve pas le bouton "insérer un div" dans l'éditeur JCE), et j'ai créé un div avec la bonne classe, comme ceci :

Code:

<div id="colonne">

et j'y ai collé le code suivant :

Code:

<p><span style="font-size:10.0pt;mso-bidi-font-size:10.0pt"><span style="mso-spacerun:yes">
</span>blablabla… <o:p></o:p></span></p>
<p> </p>
<p><span style="font-size:10.0pt;mso-bidi-font-size:10.0pt"><span style="mso-spacerun:yes">
</span>blabla blablabla…<o:p></o:p></span></p>
<p> </p>

Puis j'ai fermé la balise div, bien sûr.

Je me suis aidé, dans cette tache, de Bluegriffon™, un éditeur wisiwig HTML5-CSS3 (gratuit, en français et pour toutes les plateformes) que l'on peut trouver ici (même si la page est en anglais, le logiciel à installer sur son ordi tourne en français) :

Site not found · DreamHost

https://www.bluegriffon.org/

The owner of this domain has not yet uploaded their website.

Il suffit de faire écrire le code par Bluegriffon et de le coller dans le code de l'article en soustrayant le doctype, le head et la balise body.

Pour vous servir !

Marc

**XdiZ** · 09/04/2013, 10h49

Re : Le texte en colonnes

Très bien

Attention à BlueGriffon car il génère du code sale comme

Code:

mso-bidi-font-size:10.0pt
mso-spacerun:yes
<o:p>

Ces attributs et balises n'existent pas en HTML.

Donc, il faut penser à nettoyer le code manuellement ou en utilisant la petite balayette et/ou gomme de JCE.

**sincalor** · 09/04/2013, 11h00

Re : Le texte en colonnes

Bien reçu, je vais y veiller.

Je m'aperçois que mon dernier post n'est pas passé, le voici :

Ça marche très bien pour Firefox, Safari, Opéra, Chrome mais je n'ai pas testé Internet Explorer car je suis sur Mac et IE n'est plus développé pour Mac.
Comment faire pour shunter l'appel de la classe pour IE < 10 ?
Et pour, le cas échéant, éviter de présenter une mise en page tout en l'air ?

Merci.

Marc

**XdiZ** · 09/04/2013, 13h10

Re : Le texte en colonnes

Sur Mac vous pouvez virtualiser Windows et du coup tester IE 8, 9, 10 etc...

D'après ce site, il faut utiliser des préfixes :

Code HTML:

column-span: all; /* W3C */
-webkit-column-span: all; /* Safari & Chrome */
-moz-column-span: all; /* Firefox */
-ms-column-span: all; /* Internet Explorer */
-o-column-span: all; /* Opera */

Si IE n'arrive pas à afficher en colonne, il affichera tout sur une colonne, donc l'article sera linéaire, mais lisible.

**sincalor** · 09/04/2013, 19h00

Re : Le texte en colonnes

Effectivement, je viens de voir ça sur IE 8 tournant sous Windows 7, la mise en page, sans être en colonne, ne bousille pas tout quand même. C'est propre, mais sans colonne.
Je n'ai pas pu installer IE 10 car ma version de Windows émulée n'est pas suffisante. J'ai Windows 7 Edition Starter, il me faudrait Windows 7 Pack 1, c'est ballot ! mais je ne vais pas mettre 120 € dans Windows juste pour tester IE, je n'ai même pas la dernière version de Mac OS, il faudra que j'aille faire mes tests chez quelqu'un d'autre.
Ces préfixes que vous m'indiquez, je ne sais pas les utiliser. Je les place où ?
Je les ai mis dans la définition de la classe dans le fichier CSS…
(Bien sûr, ça ne change rien pour IE qui est en version 8)

Merci XdiZ

Marc

**XdiZ** · 10/04/2013, 07h36

Re : Le texte en colonnes

Attention, ce que j'appelle les préfixes sont : -webkit, -moz, -ms, et -o.

Vous devez mettre le column-span dans votre id "colonne" :

Code HTML:

#colonne {
-webkit-column-span: all; /* Safari & Chrome */
-moz-column-span: all; /* Firefox */
-ms-column-span: all; /* Internet Explorer */
-o-column-span: all; /* Opera */
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  -moz-column-rule: medium solid #993300;
  -webkit-column-rule: medium solid #993300;
  column-rule: medium solid #993300;
  -moz-column-gap: 40px;
  -webkit-column-gap: 40px;
  column-gap: 40px;
}

Si c'est résolu pour vous, pensez à mettre en [REGLE]

**sincalor** · 10/04/2013, 15h23

Re : Le texte en colonnes

Résolu.
Merci.

Marc

Le texte en colonnes

[RÉGLÉ] Le texte en colonnes

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association