Discussion :

[Ptite Développeuse]

Bonjour à tous,
Dans un tableau HTML j'ai un titre écrit verticalement, seulement il faudrait qu'il soit tourné de l'autre côté (rotaion à 180°) et je n'y arrive vraiment pas.

Code :

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

1
2
3
4
5
6
7
<table cellPadding=0 cellSpacing=0 border=1>
 <tr>
  <th rowspan=2 vertical-align=middle>
   <div style="writing-mode:tb-rl; white-space: nowrap;"><b>mon texte</b></div>
  </th>
 </tr>
</table>

Y a-t-il quelqu'un qui saurait comment faire ?
Merci d'avance

[Erwan31]

Bonsoir,
peut-être en passant par CSS 3?

Code :

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

1
2
3
4
5
6
7
.rotation180 {
	-moz-transform: rotate(7.5deg);  /* FF3.5+ */
	-o-transform: rotate(7.5deg);  /* Opera 10.5 */
	-webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}

Au passage si ça marche je te conseil de placer les propriété filter/-ms-filter dans une CSS spécifique à IE

[Ptite Développeuse]

Bonjour,

Tout d'abord, merci de te pencher sur mon problème.
Je dois t'avouer que ta réponse ne me parle pas vraiment. Je ne sais pas comment l'utiliser.
Pour info, je suis sur IE8, mais c'est vrai qu'une solution portable sur tous les IE m'intéresserais.

[Ptite Développeuse]

Bon, en fait on a trouvé !!!
Donc, pour ceux que ça intéresse, il faut juste rajouter : filter: flipv fliph; :

Code :

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

1
2
3
4
5
6
7
<table cellPadding=0 cellSpacing=0 border=1>
 <tr>
  <th rowspan=2 vertical-align=middle>
   <div style="writing-mode:tb-rl; filter: flipv fliph; white-space: nowrap;"><b>mon texte</b></div>
  </th>
 </tr>
</table>

Merci quand même à tous ceux qui se sont creusé les méninges pour moi !
Bonne journée

[Erwan31]

Bon, en fait on a trouvé !!!

Pas tout à fait, tu utilises des propriété microsoft qui ne s'appliqueront QUE sur Internet Explorer, il faut ajouter au ceci:

Code :

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

1
2
3
	-moz-transform: rotate(-90deg);  /* FF3.5+ */
	-o-transform: rotate(-90deg);  /* Opera 10.5 */
	-webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */

Avec une class comme dans mon exemple

Code :

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

  <p class="rotation90" ><b>mon texte</b></p>