Écriture verticale automatique avec css

**troumad** · 18/12/2006, 17h02

Bonjour

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

J'ai rusé en mettant des

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**trotters213** · 19/12/2006, 08h58

En mettant une image à la place du texte ou alors :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
d<br />
u<br />
 <br />
t<br />
e<br />
x<br />
t<br />
e<br />

**MasterOfChakhaL** · 19/12/2006, 09h39

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**troumad** · 19/12/2006, 17h03

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 ?

**trotters213** · 20/12/2006, 09h02

dans ce cas, float:left seul suffit

**troumad** · 20/12/2006, 09h58

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

Écriture verticale automatique avec css

CSS

Vue hybride

Discussions similaires

Partager

Partager