Version complète: sur le forum Webmaster Hub : Présenter un texte sur trois colonnes
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
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
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;
}
Nullette
Merci à vous deux. smile.gif
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 smile.gif
karnabal
Tout dépend de pourquoi on utilise cette balise. whistling.gif
tribords
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 tongue.gif
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 wink.gif
ghost
Salut,

Aller ma ptit contrib pour les puristes
CODE
<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 tongue.gif
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é. wink.gif

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
CITATION(Nullette @ jeudi 14 août 2008 à 12:21) *
Mais si Dudu passe par là, qu'il ne vienne pas me dire que trop de DIV .. tuent les DIV smile.gif
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 wink.gif

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 wink.gif Mais ce n'est pas de trop, je crois, dans ce type de situations.
baulet
bonjour les sémantiquophiles smile.gif

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

CODE
<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? wink.gif
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 smile.gif
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:
CITATION(baulet @ vendredi 15 août 2008 à 08:51) *
CODE
<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.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.