Présenter un texte sur trois colonnes

[Nullette]

Bonjour à vous,

Sauriez-vous s'il existe une possibilité de présenter du texte réparti en trois colonnes dans une page en xhtml ?

Il s'agit de trois poésies aux phrases courtes et ce serait plus joli de les afficher côte à côte et d'éviter de les mettre dans un tableau.

[iNCiTE Web]

Sans problème, très bon exemple : Tuto Alsacréations

En cherchant "design 3 colonnes" tu devrais avoir la solution...

[Kent]

Ou en CSS3

http://www.w3.org/TR/2001/WD-css3-multicol-20010118/

[iNCiTE Web]

Je n'ai encore regardé le CSS3, au niveau compatibilité pour les navigateurs ça donne quoi ?

[Nullette]

Je vous remercie. Mais je me suis mal exprimée.

Je ne parle pas du "layout", de la présentation du site en deux ou trois colonnes, mais d'une présentation en trois colonnes dans la page du contenu.

Voici la page actuelle, que je suis entrain de refaire en xhtml, sans tableaux. Les poésies en questions sont vers le milieu de la page :

La page avec poésies

Modifié 14 Août 2008 par Nullette

[iNCiTE Web]

Ben oui c'est la même chose, si tes 3 colonnes et la couleur du fond sont identiques ça fera cet effet là !

Ou alors j'ai pas compris...

[Kent]

Malheureusement pour la compatibilité en CSS3, seul firefox suit pour l'instant je pense en précédent les attributs par -moz- ....

Pour les layout, un layout n'est pas forcement appliqué à tout le site.

toi ce que tu veux c'est l'appliquer au contenu d'un div déjà existant tu peux adapter la solution proposée par Incite ou faire :

3 div :

<div id="col1" class="colonne">poeme 1</div>

<div id="col2" class="colonne">poeme 2</div>

<div id="col3" class="colonne">poeme 3</div>

et où ta classe serait par ex :

.colonne {

float:left;

width:200px ; // en fonction de ta largeur ou en %

padding: 5px;

text-align:left;

margin:10px;

}

Modifié 14 Août 2008 par Kent

[Nullette]

Merci à vous deux.

[Nullette]

C'est ... presque bon. Je n'ai pas trouvé (encore) la bonne dimension.

Mais si Dudu passe par là, qu'il ne vienne pas me dire que trop de DIV .. tuent les DIV

[karnabal]

Tout dépend de pourquoi on utilise cette balise.

[buzzistic]

Bonjour,

je ne voudrais pas être désagréable, mais le XHTML et les tableaux, c'est compatible. L'amalgame de la divite aigue a encore frappé ? Sinon en effet la solution de fixer une largeur aux divs avec un float:left fonctionne parfaitement.

[Nullette]

J'utilise cette balise parce que on vient de me l'indiquer sur le Hub

Je cherche simplement à bien présenter ma page.

Je peux évidemment ne pas utiliser les div et me limiter aux paragraphes, mais la page devient longue avec les poésies de phrases très courtes qui seraient alignées l'une au dessous de l'autre.

[Nullette]

Suite à la réponse de tribords, je pose alors la question :

Si je mets ces poésies dans un tableau (bien fait), est-ce que ce sera dans les normes de l'accessibilité ?

[yuston]

Oui. Mais je ne suis pas d'accord avec l'utilisation des tableaux pour présenter ce genre de contenu. Là, le tableau est utilisé pour des fins de mises en page. Or un tableau doit servir à présenter des données, des statistiques,... mais n'étant pas un spécialiste du domaine de l'accessibilité, je laisse aux pros réagir à mon affirmation

[ghost]

Salut,

Aller ma ptit contrib pour les puristes

<ul>
	  <li>Poésie 1</li>
	  <li>Poésie 2</li>
	  <li>Poésie 3</li>
</ul>

Avec la CSS qui va bien, on évite la divite mais est ce bien une liste?

[Nullette]

Voici l'image de la page, sans la présentation avec les div.

La page

J'avais pensé à une liste, mais, à mon avis, les poésies ne sont pas une liste.

[iNCiTE Web]

Ben dites donc c'est compliqué maintenant pour trouver la bonne balise

C'est pas des données tabulaires, c'est pas une liste, des DIV des DIV des DIV car là il s'agit bien de DIViser la page en 3 non ?

[karnabal]

Je ne trouve pas le recours à la balise div choquant dans ce cas, pas plus que le choix d'une liste d'ailleurs.

Les poèmes ne sont certes pas une liste mais ils peuvent très bien être présentés sous forme de liste.

En revanche, avoir recours à un tableau pour présenter des données non tabulaires cela ne semble tout simplement pas être ce qu'il y a de plus indiqué.

Maintenant, dire que les poésies ne sont pas faites pour être dans un tableau n'est pas juste non plus. Tout dépend du contexte, de comment on souhaite apporter l'information. Pourquoi pas imaginer un tableau avec par ligne : titre du poème - auteur - année d'édition - poème. Dans ce cas cela parait justifié, mais pour de seules fins de mise en page ce n'est clairement pas indiqué.

Personnellement, dans le cas soumis j'aurai naturellement utilisé des div avec la propriété CSS float.

[Dudu]

Mais si Dudu passe par là, qu'il ne vienne pas me dire que trop de DIV .. tuent les DIV

Tel le furet des bois-mesdames, Dudu est passé par ici et repassera par là.

À mon humble avis (puisque je ne suis pas non plus le w3c incarné), je ne vois aucun mal à séparer 3 colonnes de texte dans trois diviseurs (div = diviseurs).

Non, ce n'est pas une liste, donc <ul> n'est pas adéquat. Il ne s'agit pas non plus de <p>aragraphes.

À vrai dire, je ne vois que <div> comme balise dans ce cas précis

Ceci étant dit, oui la divite aigüe n'est pas une bonne chose; mais lorsqu'il FAUT un <div> et que seule cette balise s'impose comme étant la seule adéquate, alors oui il faut l'utiliser.

Et pour conclure: trop de <div>... tuent les <div>, je persiste Mais ce n'est pas de trop, je crois, dans ce type de situations.

[baulet]

bonjour les sémantiquophiles

...et ne sont ce pas tout simplement des... paragraphes?

<p id="col1">poeme 1</p>
<p id="col2">poeme 2</p>
<p id="col3">poeme 3</p>

et le style :

#col1, #col2,#col3 {

display:block;

float:left;

etc...

}

agrémenté d'un border-right pour col1 et col2 par exemple...

qu'en pensez vous?

[JoomSpirit]

salut à tous,

ayant été confronté au même problème, je pense également que les listes sont les plus indiqués ici.

si cela peut t'aider, voici la page réalisée pour un client avec 4 colonnes : http://www.soler05.fr/installations.php

le code css correspondant est à la rubrique "réalisations".

En espérant que cela puisse t'aider.

[Nullette]

Merci.

Je vais "fouiller" ta feuille css qui est très bien expliquée

Pour l'instant ma page est restée telle quelle, avec les 3 poésies à la queue-leu-leu

Les petites poèmes

[yuston]

Ah j'ai retrouvé un post que j'avais fait il y a fort longtemps! Voici! Les liens que je donnent sont morts mais les réponses sont toujours bonnes! Bon moi j'avais la contrainte que tout soit centré que tu n'as peut-être pas...

Sinon:

<p id="col1">poeme 1</p>
<p id="col2">poeme 2</p>
<p id="col3">poeme 3</p>

et le style :

#col1, #col2,#col3 {

display:block;

float:left;

etc...

}

Pourquoi display:block? Les paragraphes sont de type block déjà.

[Nullette]

Merci yuston.