Discussion :

[LeGilou]

Bonjour,

J'aimerais afficher du texte verticalement de la manière suivante :


j'utilise -webkit-transform: rotate(-90deg); mais je n'arrive pas à centrer les textes et à forcer la hauteur et la largeur des zones.

Auriez vous une idée ?

Merci,
Gillou.

[Invité]

Auriez vous une idée ?

Désolé.
Dans un autre post, j'ai écrit que le prochain qui demande "vous avez une idée ?", je l'envoyais paître.
Pas d'bol. Ca tombe sur toi.

Pour info : ce ne sont pas les idées qui manquent, mais ton code.

[LeGilou]

Est-ce qu'il y d'autres phrase que tu as du mal à supporter ?
Je ferrai un effort la prochaine fois, pour éviter de te froisser

[Invité]

Rassure-toi, tu n'es pas le seul.

Il semble "à la mode" de demander une idée.
A croire que vous en manquez...

N.B.bis : il manque toujours TON code...

[LeGilou]

A vrai dire, c'est exactement ça. je manque d'idée sur ce sujet.

voila une de mes tentatives infructueuses :

Code :

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
23
24
25
26
 
<style>
	#menu {
		text-align: left;	
		background: orange;
	}
 
	ul {
		list-style-type: none;
		-webkit-transform: rotate(-90deg);
	}
 
	li {
		border:1px solid #fff;
		text-align: center;	
		background: green;
	}
</style>
 
<div id='menu'>
	<ul class='architecture-past'>
		<li>Texte 1</li>
		<li>Texte 2</li>
		<li>Texte 3</li>
	</ul>
</div>

Je souhaite que les textes soient centrés dans le cadre vert.
Et que les cadres verts soient sur la gauche de la page.

Alors, une idée ?

[Invité]

Alors, une idée ?

Oui :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

[...] The rotation property of Internet Explorer’s BasicImage filter can accept one of four values:
0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively. [...]

Pour le décalage : margin ? padding ? Testés ?