28172 sujets

CSS et mise en forme, CSS3

Mise en forme de texte en colonne

Bonjour à tous.

Je suis presque sûr d'avoir vu sur ce site un tuto pour mettre du texte en forme en colonne, comme le ferai un logiciel de PAO / Traitement de texte...

Est-ce que quelqu'un pourrait m'aiguiller ? (j'ai bien sûr cherché, y compris sur Google).

La seule solution que j'ai trouvé pour le moment, sur le livre de Rodolphe c'est une mise en page avec des CSS table et table-cell. Le problème c'est que c'est pas du tout pratique pour gérer le nombre de caractères par colonnes et que le site doit-être en multi-langues (ce qui complique un peu plus).

Donc j'aimerais connaître la meilleure solution. Si elle passe par des table CSS alors comment avoir la meilleure mise en forme ? Parce que pour le moment j'ai mes 3 div avec des p à l'intérieur et voici mon CSS :

#table {
	display: table;
	width: 100%;
}

#left {
	display: table-cell;
	width: 33%;
	padding: 20px;
	text-align: justify;
}

#center {
	display: table-cell;
	width: 33%;
	padding: 20px;
	text-align: justify;
}

#right {
	display: table-cell;
	width: 33%;
	padding: 20px;
	text-align: justify;
}


Donc, 3 colonnes mais parfois le texte de la dernière ligne n'est pas justifié car il manque de la 'matière', bref c'est tout sauf simple et pratique.

Merci pour votre aide en espérant avoir été clair Smiley lol
Modifié par MagicCarpet (02 Nov 2012 - 11:36)
Merci pour ta réponse et oui je pense que c'était ces articles.

Par contre, ça confirme bien qu'il faut passer par des div et les CSS dont je parle plus haut.
Mais en fouillant un peu sur le site du W3C j'ai trouvé la propriété qui va bien :

columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */


Seul hic, Internet Explorer ne le supporte pas (comme par hasard).

Si vous avez un retour d'expérience, une meilleure idée, quelque chose à me conseiller, bref n'importe quoi, je suis à votre écoute et je reste connecté Smiley smile

Parce que du coup je ne sais pas trop quoi faire (passer ces propriétés avec du jQuery ???)

Merci.
Modifié par MagicCarpet (02 Nov 2012 - 15:58)
Moi j'ai concocté ce bout de css que j'utilise dans tout mes projets.




.column2, .column3, .column4  {width: 960px; margin:0px; padding:0px;}

.td {
	display:table-cell;
	vertical-align:top;
	text-align:left;
	margin: 0px;
	padding: 0px;
}

.column2 .td { width: 458px; }

.column3 .td { width: 290px; }

.column4 .td { width: 206px; }

.td + .td { padding: 0 0 0 40px; }


Exemple HTML

<ul class="column2"> <--class en fonction du nombre de colonne voulu-->

<ul class="td"></ul>
<ul class="td"></ul>


</ul>

Et lire ceci
Display inline-block, une valeur trop peu utilisée
Modifié par Rifton007 (02 Nov 2012 - 20:19)
Merci Rifton007 pour ta réponse.

Mais j'ai une question, comment tu gère la mise en forme de texte ?
A la main ? Je veux dire, tu es obligé de sélectionner des bouts de textes et les coller dans tes colonnes ?

Je voudrais cette précisions car c'est précisément le problème que je rencontre avec cette méthode. Si tu as 5 minutes, je t'invites à regarder ce lien :
https://dl.dropbox.com/u/37161677/www/cgp/index.html

Comme j'ai des problèmes avec le menu, il faut que tu clic en haut à droite sur le 2° cercle et ensuite sur le 3°, dans cet ordre Smiley smile
Et là tu auras un texte en anglais en 3 colonnes réalisé avec la propriété CSS columns.
Comme je l'ai dis, ne fonctionne pas avec IE mais j'ai pas encore testé avec la v10.

J'ai un autre problème avec mon background qui fera l'objet d'un prochain post.

Merci à vous.
Modifié par MagicCarpet (02 Nov 2012 - 21:04)
Sujet clos
Aller à