> Tous les forums > Forum des Webmasters
 Formatage de l'affichage de texte en colonnes.Sujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
telliak
  Posté le 09/08/2008 @ 21:47 
Aller en bas de la page 
Astucien

Bonjour à tous,

Je vois qu'il y a du beau monde ici en ce moment, j'en profite pour remonter ce "vieux" post, des fois que quelqu'un aurait une idée... en attendant CSS3.

Merci d'avance.

Bonsoir,

J'ai trouvé un truc séduisant pour réaliser l'affichage de texte sous forme de colonnes, sans avoir à se soucier en quoi que ce soit de la mise en forme, c'est-à-dire oublier les sauts de colonne, les équilibrages de hauteur, le navigateur s'en chargeant. Ceci me convient bien car j'utilise un générateur fait maison pour générer le code HTML/CSS et ne veux pas y inclure des règles de formatage.

Le truc ? Un div tout bête : <div style="-moz-column-count:2; -moz-column-gap: 10px; ">Bla bla bla</div>

Evidemment vous voyez tout de suite le hic ! Avec Firefox c'est parfait mais les autres navigateurs ne comprennent pas !

Quelqu'un connaît-il un moyen aussi simplement merveilleux pour réaliser cette mise en forme quel que soit le navigateur ?

Merci d'avance.



Modifié par telliak le 23/08/2008 14:38
Publicité
elle
 Posté le 23/08/2008 à 20:13 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Au secours, telliak est aphone!

Dreamer
 Posté le 23/08/2008 à 20:32 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :

Au secours, telliak est aphone!

C'est vrai que son silence est assoursissant !!

telliak
 Posté le 23/08/2008 à 20:48 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

elle a écrit :

Au secours, telliak est aphone!

Ben non, mais j'ai pas trouvé comment remonter autrement mon vieux post . C'est ça les .

Aphone et silence assoursissant -pas facile à frapper sans se tromper- mis à part, une idée de réponse sur la question d'origine ?

griggione
 Posté le 23/08/2008 à 23:06 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

Bonsoir telliak

Histoire de briser le silence

<div class="col3">
<p>guili guili</p>
</div>

.col3{
font-size: 0.9em;
width: 31%;
padding: 5px;
float: left;
}

Tu mets le % que tu veux,ici pour trois colonnes,sinon pour 4 tu mets 24%.......
Tu peux aussi mettre une couleur pour chaque colonne

<div class="col3" style="background-color: #f6f6f6;">
<p>guili guili</p>
</div>

telliak
 Posté le 24/08/2008 à 16:29 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Merci de ton aide Griggione. L'inconvénient c'est qu'il faut faire l'équilibrage de la hauteur des colonnes soi-même... à moinsse que j'ai mal utilisé ta suggestion.

griggione
 Posté le 24/08/2008 à 17:52 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

Re

Heu je vois pas la question.......tu veux que les colonnes soient toutes à la même hauteur ???
Quelque soit le texte dans chacune .

J'ai fait ce code pour mettre des listes,donc en équilibrant, sans chercher plus loin.
Mais il doit etre possible de forcer la hauteur, enfin je suppose........j'ai pas essayé.



Modifié par griggione le 24/08/2008 17:52
Malcolm
 Posté le 24/08/2008 à 19:59 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

pour la compatibilité absolue, je n'ai pas d'autre suggestions pour ma part ... sauf à taire un horrible <tableau> à 1ligne / 2 colonnes pas trop crade sémantiquement, avec éventuellement un fond qui se répète verticalement et qui regroupe les 2 colonnes...

telliak
 Posté le 24/08/2008 à 20:38 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Re,

Merci de vos réponses.

griggione a écrit :

Heu je vois pas la question.......tu veux que les colonnes soient toutes à la même hauteur ???
Quelque soit le texte dans chacune .

Oui et non, je veux entrer mon texte au kilomètre et que ce soit le navigateur qui se débrouille pour faire la mise en colonne.

1- Voilà le résultat que j'obtiens avec ce code pour le div concerné :

div#laycadretexte {
background: url(../images/bascadretexte.png) bottom left no-repeat;
padding-bottom: 10px; }

2- et avec l'ajout des propriétés en bleu :

div#laycadretexte {
background: url(../images/bascadretexte.png) bottom left no-repeat;
padding-bottom: 10px; -moz-column-count:2; -moz-column-gap: 10px;
}

j'obtiens

sans avoir à écrire une ligne de code pour équilibrer les colonnes.



Modifié par telliak le 24/08/2008 20:43
Publicité
griggione
 Posté le 24/08/2008 à 21:00 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

RE

Juste preciser que je viens de charger les colonnes,et c'est pas triste, et qu'il y a pas de problème.
Ni dans IE7 ni Firefox ni Opéra et tout en gardant la flexibilité selon les résolutions.

Par contre il faut à peu prés équilibrer les textes,sinon ça fait bizzare....
Donc un code a améliorer pour mieux maitriser

telliak
 Posté le 24/08/2008 à 21:16 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Oui, ça va à peu près ; mais le «saut de colonne» reste manuel et si l'internaute change la hauteur de la police à l'affichage, ce dernier n'est pas réajusté.

griggione
 Posté le 25/08/2008 à 14:13 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

Bonjour telliak

Nous sommes d'accord,mais je ne suis pas spécialiste en CSS et ce code ne demande qu'a être amélioré.
J'avais parcouru la toile,mais rien de vraiment intéressant, je me suis donc lancé.......

Et bien sur mis à disposition, et peut-etre que d'autres plus aguérris completerons ce code qui évite les cadres tableaux.

(je corrige parce que j'en connais une sinon......)



Modifié par griggione le 25/08/2008 15:34
elle
 Posté le 25/08/2008 à 14:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

griggione a écrit :

et peut-etre que d'autres plus aguérris completerons ce code qui évite les cadres.

Pas les cadres, les tableaux!

telliak
 Posté le 25/08/2008 à 14:54 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

OK, merci à tous.

griggione
 Posté le 25/08/2008 à 15:31 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien
elle a écrit :
griggione a écrit :

et peut-etre que d'autres plus aguérris completerons ce code qui évite les cadres.

Pas les cadres, les tableaux!

Bonjour elle

elle
 Posté le 25/08/2008 à 16:24 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Bah au moins, ça restait dans le même domaine...

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
58,99 €SSD WD Blue SN550 500 Go (NMVe M.2, 2400 Mo/s) à 58,99 €
Valable jusqu'au 08 Mai

Amazon fait une promotion sur le SSD WD Blue SN550 500 Go (NMVe M.2) qui passe à 58,99 € livré alors qu'on le trouve ailleurs à partir de 75 €. Ce SSD utilise une interface M.2 NVMe PCIe Gen3 x 4 pour une connexion simple et des performances exceptionnelles : jusqu’à 2 400 Mo/s en lecture séquentielle et jusqu’à 1 950 Mo/s en écriture séquentielle. Le SSD est doté de la technologie 3D TLC NAND haute densité offrant une endurance d’écriture durable et assorti d’une garantie de cinq ans. 


> Voir l'offre
29,90 €Caméra de surveillance TP-Link Tapo C200 à 29,90 €
Valable jusqu'au 07 Mai

Amazon fait une promotion sur la caméra de surveillance TP-Link Tapo C200 qui passe à 29,90 € livré gratuitement au lieu d'une quarantaine d'euros ailleurs. Cette caméra se connecte à votre réseau en WiFi et peut ensuite être contrôlée à distance. Elle offre une définition FullHD 1080p, la vision nocturne, la détection de mouvements (recevez une notification si quelque chose est détecté), une alarme sonore et visuelle. Le stockage se fait en local sur une carte MicroSD.


> Voir l'offre
77,99 €Kit de 16 Go (2 x 8 Go) de mémoire DDR4 Crucial Ballistix 3200 MHz à 77,99 €
Valable jusqu'au 08 Mai

Amazon fait une promotion sur le kit de 16 Go (2x8 Go) de mémoire DDR4 Crucial Ballistix 3200 MT/s CL16 qui passe à 77,99 € alors qu'on le trouve ailleurs à partir de 95 €.


> Voir l'offre

Sujets relatifs
Aide sur du CSS: séparer un texte en 2 colonnes?
Menu horizontal avec affichage d'un texte
affichage texte
forcer l'affichage d'un texte dans un navigateur
affichage des enreg d'une table sur 2 colonnes
editeur TinyMCE grande largeur texte dans page
Texte dans tableau
Affichage 4:3 sur toutes résolutions
Bulle de texte dans une zone cliquable
Pas d'affichage de la zone de saisie avec IE11
Plus de sujets relatifs à Formatage de l''affichage de texte en colonnes.
 > Tous les forums > Forum Forum des Webmasters