28173 sujets

CSS et mise en forme, CSS3

Ecrire en colonne

Bonjour @ tous,
je cherche à écrire un bout de texte formaté en colonne à la façon colonne d'un journal.
Je formate mon texte avec l'attribut 'column-cell' mais à la fin de la balise p, il y a un saut de colonne et ce n'est pas ce que je veux.
J'ai essayé de limiter la hauteur de la colonne, d'empêcher le débordement, etc... mais ca ne fonctionne pas avec l'atribut 'column...'.

Des idées ? Là je nage... Smiley biggol
Merci
Jean-Luc Picard a écrit :
je cherche à écrire un bout de texte formaté en colonne à la façon colonne d'un journal.
Je formate mon texte avec l'attribut 'column-cell' mais à la fin de la balise p, il y a un saut de colonne et ce n'est pas ce que je veux.
J'ai essayé de limiter la hauteur de la colonne, d'empêcher le débordement, etc... mais ca ne fonctionne pas avec l'atribut 'column...'.

Bonjour Jean-Luc,

Pour obtenir de l'aide, il serait préférable de donner plus d'éléments concrets.
Tu as donc un bloc de texte. Ce bloc est-il formé de plusieurs paragraphes (éléments p) à l'intérieur d'un conteneur (une div, par exemple) ? Là, tu ne parles que d'une seule balise p, ce qui déjà est techniquement peu probable. En effet, pour faire un paragraphe (élément p), il faut au moins deux balises :
<p>Ceci est un paragraphe.</p>


Il serait donc préférable de donner le code HTML et CSS de ta page (du moins les parties pertinentes), et/ou un lien vers une page de test en ligne. Smiley smile

De plus, il peut être utile d'être un peu plus précis dans l'énoncé du problème :
a écrit :
à la fin de la balise p, il y a un saut de colonne et ce n'est pas ce que je veux

Je ne suis pas sûr de visualiser à quoi correspond ce « saut de colonne » qui serait situé « à la fin de la balise p ». De plus, si ce n'est pas ce que tu veux, que veux-tu exactement ? Smiley cligne

Par contre, je préfère te prévenir directement : la propriété column-cell est non standardisée pour l'instant : elle fait partie de CSS3, norme encore en cours de rédaction, et n'est implémentée qu'à l'état d'expérimentation avec certains navigateurs. Elle n'est donc pas utilisable en production, et ne le sera sans doute pas avant quelques années.
Effectivement, j'étais passé sur la réponse sans la voir. Désolé, pourtant je cherche des ressources sur la toile depuis hier (la fatigue).


bon le CSS ca donne ça :

.column p{width: 3.5cm; font-size: .5em}
.column {-moz-column-count:3; -moz-column-gap:1em }
.conteneur {text-align: justify; width: 12cm; height: 5cm}


et le html

<div class="conteneur">
   <p class="titre">Le titre ici.</p>
  <p class="soustitre"> le soustitre ici</p>

  <div class="column">
    <p>bla bla bla bla bla bla bla bla bla.</p>
    <p>vlah blah blah blah blah blah blah blah</p>
  </div>
 </div>


Pour clarifier, ce que je veux c'est un texte qui se met en colonne avec un passage à la colonne suivante dès qu'il atteint le bas...
zzzz ! jhkh
zzzz ! lkl
zzzz !

De cette façon ca donne a peu près ce que je veux.

J'avais essayé l'attribut 'column-count' sans succès. Je viens juste de rajouter le préfixe '-moz-' et magie ca marche! (pourtant j'utilise FF).
Bon va falloir que j'abandonne les colonnes car évidement ca ne marche pas du tout avec IE. Bon j'aurais appris ca.

Merci et à plus tard.
J'ai peut-être trouvé l'astuce pour garder le style colonne.
Dans le CSS je garde les préfixes '-moz-' et comme IE ne les interprete pas, il considere une seule colonne et si c'est FF, il affiche les colonnes. PAr contre je ne sais pas comment les autres navigateurs w3c interpretent la chose...

C'est pas vraiment l'idéal mais je garde le style.
donc voici le CSS :

.column p{-moz-width: 3.5cm; font-size: .5em}
.column {-moz-column-count: 3; -moz-column-gap:1em }


Merci pour vos réponses.
@+ et bonne journée (chaude -:) )
Jean-Luc Picard a écrit :
J'avais essayé l'attribut 'column-count' sans succès. Je viens juste de rajouter le préfixe '-moz-' et magie ca marche! (pourtant j'utilise FF).

-moz comme pour Mozilla Firefox…
Sujet clos
Aller à