Écriture verticale automatique avec css

Version imprimable

18/12/2006, 17h02
troumad

Écriture verticale automatique avec css

Bonjour

J'ai cherché et pas trouver...
Comment faire de l'écriture verticale en CSS ?

J'ai rusé en mettant des

Code:

div {position:relative;float:left}

les unes après les autres pour les colonnes et en mettant un saut de ligne après chaque caractère, mais ce n'est pas génial...
19/12/2006, 08h58
trotters213
:salut:
En mettant une image à la place du texte ou alors :
Code:

1 2 3 4 5 6 7 8 d<br /> u<br /> <br /> t<br /> e<br /> x<br /> t<br /> e<br />
:mrgreen:
19/12/2006, 09h39
MasterOfChakhaL
Je ne pense pas qu'il y ait d'autre solution (en css2 en tout cas).

troumad, ca fait plusieurs fois que je te vois mettre la construction:
Code:

1 2 position: relative; float: left;
Pour moi, position:relative sert à placer l'élément par rapport au flux normal, alors que float:left sort l'élément du flux normal.
Du coup, je ne comprends pas l'utilité de cela. Cette construction sert à corriger un bug d'un certain navigateur ou je suis passé a côté de quelque chose?
19/12/2006, 17h03
troumad

Citation:

Envoyé par MasterOfChakhaL

Du coup, je ne comprends pas l'utilité de cela. Cette construction sert à corriger un bug d'un certain navigateur ou je suis passé a côté de quelque chose?

Cette astuce me sert à poser un calque vertical (une ligne) à droite du précédent. Et ce quelque soit sa largeur. Non ?
20/12/2006, 09h02
trotters213

dans ce cas, float:left seul suffit ;)

Je viens de regarder en profondeur la remarque de MasterOfChakhaL. Ok, j'aéi compris un point de plus.
Par contre trotters213 donne une solution qui convient presque...
Je crois que mon problème est particulier !

Voici un extrait de ma page dans l'état actuel :
Code:

1 2 3 4 5 6 img {border:0;margin:2px;padding:0;vertical-align:top} a {margin:0;padding:0} #haut {background-color:#0f0;position:static} #gauche {z-index:3;} #gauche div {float:left}
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <body> <div id="gauche"> <div> <img src="../miniatures/vaisselle.jpeg" alt="vaisselle" /><br /> <img src="../miniatures/dormir.jpeg" alt="dormir" /> </div> <div> <img src="../miniatures/oeuf.jpeg" alt="oeuf" /><br /> <img src="../miniatures/tetedoeuf.jpeg" alt="tetedoeuf" /><br /> <img src="../miniatures/oh.jpeg" alt="oh" /> </div> [... autres div verticaux avec saut de ligne entre images...] </div> <div id="haut"> <img src="../miniatures/aavechugo.jpeg" alt="aavechugo" /> <img src="../miniatures/anniv0002.jpeg" alt="anniv0002" /> <img src="../miniatures/avecchantal.jpeg" alt="avecchantal" /> <img src="../miniatures/aveckiki.jpeg" alt="aveckiki" /> [... autres images sans saut de lignes ...] </div> </body> </html>
Le but est de mettre des images verticales à gauche. Ensuite des images horizontales à droite. Les images de droite devant profiter de tout l'espace disponible.

Comme ceci, c'est bon, mais le calque de droite va jusqu'au bord gauche et c'est ce que j'aimerai éviter !