Le texte en colonnes

[sincalor]

Re : Le texte en colonnes

Résolu.
Merci.

Marc

[XdiZ]

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" :

#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]

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]

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 :

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]

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]

Re : Le texte en colonnes

Très bien

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

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]

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 :

 
#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 :

<div id="colonne">

et j'y ai collé le code suivant :

<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) :

https://www.bluegriffon.org/

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]

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]

Bonjour

Version de Joomla : 2.5.9
Template utilisé : A4joomla-sunset-free
Extensions installées : Éditeur JCE, Maximenu, Kunena
Hébergeur : Amen (pas encore en ligne
Serveur : dédié ou mutualisé ou virtualisé ?
En local

Niveau : débutant

Je voudrais présenter le texte de mes articles en colonnes, comme ici :

http://designshack.developpez.com/tutoriels/css/introduction-css3-multiples-colonnes/

Je parle donc de vrai colonnes, où le texte s'écoule d'une colonne à l'autre, comme dans un journal, pas de div ni de table.
JCE ne me propose pas ça.
Y a-t-il un moyen ? J'espère qu'il ne me faudra pas changer de template pour ça.

Merci, c'est important.

Marc