Mise en page d'un texte en colonnes

Bonjour à tous,

Je suis créateur de sites web amateurs et je suis en train de travailler pour un ami sur un skin de son blog qu'il voudrait faire comme une imitation d'un journal papier de type le times.

Je suis en train de réaliser la maquette graphique et je me posais la question de la possibilité de mise en page des paragraphes sous forme de colonnes, comme dans les journaux. Est-ce que les CSS peuvent me permettre cette mise en page, ou est-ce non réalisable ?

Merci d'avance

C'est tout à fait possible.

L'idée générale est de grouper tes 3 (ou plus) colonnes dans un bloc conteneur. Les paragraphes seront placés dans chacun des 3 blocs (car on suppose qu'il y aura plusieurs paragraphes par colonnes).

Donc :

<div id="conteneur">
<div id="col1"><p>Texte colonne 1</p></div>
<div id="col2"><p>Texte colonne 2</p></div>
<div id="col3"><p>Texte colonne 3</p></div>
</div>

Et en CSS :

div#conteneur{
width: 100%;
}
div#col1, div#col2, div#col3{
float: left;
width: 33%;
}

L'idée générale étant le float left.

Ah oui, grouper des paragraphes comme ceci, je connaissais. Mais on ne peut donc pas avoir un paragraphe qui se met en page sur trois colonnes comme ceci, sans qu'il y ait besoin de faire un découpage manuel en trois trucs ?

Bonjour,

En deux mots : on ne peut pas

C'est une limitation de CSS2, que CSS3 permettra peut-être de franchir.

Pour l'instant donc, colonnage => découpage et balisage du contenu en paragraphes ou <div> successifs, avec une armada de classes ou d'id, des problèmes de rendu si les 2 ou 3 colonnes sont de largeur fixe, etc.

Surtout, ce colonnage similaire à celui de l'imprimé (les quotidiens de presse) n'est pas très bien coté du point de vue ergonomie : si les colonnes dépassent en hauteur la zone de visualisation (la fenêtre du navigateur) : une fois arrivé en bas d'une colonne, le visiteur devra scroller jusqu'à atteindre le haut de la colonne suivante. Je passe sur le problème d'accessibilité en cas de navigation au clavier, en l'absence d'ancres...

En revanche, ce colonnage (version CSS3) sera peut-être apréciable lorsqu'il s'agit d'imprimer la page.

Ce que l'oeil fait naturellement devant un imprimé n'est pas si confortable à faire devant un écran. Attention à bien différencier les medias
Modifié par Laurent Denis (16 Jul 2005 - 10:22)

Merci pour cette réponse très pertinente. Nous abandonnons l'idée de la mise en page par colonne pour nous diriger vers quelque chose de plus classique.

J'avais mal compris l'idée

Laurent a répondu

Un petit [Résolu] dans le titre de ton sujet, svp ?

Le comment et le pourquoi sont expliqués dans l'aide et les règles du forum

Tout d'abord bonjour à tous, vu que je suis un newby ici

Très intéressant ce topic, je ne connais pas super bien les CSS mais j'ai un peu le même problème que Ivaldir. En fait je viens de me taper plusieurs tutos sur la gestion des colonnes mais quelques éléments m'échappent toujours :

Comment faire pour afficher un contenu dynamique dans une mise en page en colonnes si l'on suit la procédure donnée par Laurent Denis ? Est ce qu'on peut mettre une propriété dans le conteneur indiquant que lorsqu'il y a overflow sur le calque 1 il faut déborder sur le claque 2 etc, pour passer d'une colonne à l'autre ? Ou la seule manière est-elle de faire des opérations multiples sur les chaines de caractères que l'on veut afficher pour obtenir une portion de texte pour le calque 1, le calque 2 et le calque 3 ?

Ca m'a l'air bien casse couille à gérer ces mises en pages en colonne, d'ailleurs même sur le site du monde ils ne le font pas.

Tu trouvera sur le site A List Aprt différents articles sur une "bidouille" supposée permettre un colonnage dynamique côté client. C'est invalide, peu accessible, complexe... Voir en particulier:
- http://www.alistapart.com/articles/crosscolumn/
- http://www.alistapart.com/articles/crosscolumn2/

Sinon, ça peut aussi se faire côté serveur. Mais encore une fois, le choix est le plus souvent fait du point de vue de l'ergonomie, et non de la faisabilité.

<edit> Le site du Monde, géré avec un clone de SPIP, est très loin de pouvoir migrer vers des mises en pages full CSS. Ce n'est d'ailleurs absolument pas leur priorité, à voir les choses délirantes de leur dernière refonte
Modifié par Laurent Denis (18 Jul 2005 - 11:02)