Ecriture verticale de texte dans un onglet

**dede tabby** · 27/08/2019, 11h31

J'utilise WORDPRESS 5.2.2 dernière version

Je souhaite écrire comme cela :

S
A
L
U
T

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
        position:relative;
        background: orange;
        height:600px; /* HAUTEUR menu */
}
 
ul {
        position:absolute;
        left:600px;     /* idem HAUTEUR menu */
        transform-origin: bottom left; /* origine de la rotation : coin en bas à gauche */
        top:25px; /* décalage, dû à la rotation */
        height:600px; /* idem HAUTEUR menu */
        list-style-type: none;
        /* Safari */
        -webkit-transform: rotate(-90deg);
        /* Firefox */
        -moz-transform: rotate(-90deg);
        /* IE */
        -ms-transform: rotate(-90deg);
        /* Opera */
        -o-transform: rotate(-90deg);
        /* Internet Explorer */
        transform: rotate(-90deg);
}
 
li {
  /*   position:relative; /*  z-index:20; */
        width:600px; /* (hauteur !) idem HAUTEUR menu */
        height:60px; /* (largeur !) */
        padding:10px 0px;
        border:1px solid #fff;
        text-align:center; /* center;   */
        background: green;
    width:600px;
    bottom:0px;left:0px; /* bottom:-30px;left:0px; */
}
.verticalWritingFrs{
        /* Marche pas completement */
     
  writing-mode: vertical-lr;
   text-orientation: upright; 
  transform: rotate(+90deg);
  word-wrap:break-word;
text-align:center;
float:center; 
  }
</style>
 </head>
<body>
 <div class="menu">
	<ul>
		<li><span class="verticalWritingFrs">Jeudi 03 octobre</span></li>
				<li >Texte 3</li>
        <li><span>Jeudi 03 octobre</li>
	</ul>
</div>
 </body>
</html>

le texte se met sur plusieurs colonnes et ne reste pas au centre

Merci de votre réponse qui va me faire avancer

Très cordialement
Nom : Résultat.jpg
Affichages : 680
Taille : 34,8 Ko

Nom : Résultat.jpg
Affichages : 680
Taille : 34,8 Ko

Invité · 27/08/2019, 12h32

Bonjour,

une solution, avec JavaScript :

Code html :

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

1
2
3
4
5
6
7
<nav class="menu"> 
  <ul class="vertical-text">
    <li>Premier menu</li>
    <li >Deuxième menu</li>
    <li>Troisième menu</li>
  </ul>
</nav>

Code css :

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
* { margin:0; padding:0; box-sizing:border-box; }
.menu, .menu ul {
	position:relative;
	background: orange;
	height:400px; /* HAUTEUR menu */
}
ul.vertical-text li {
  list-style:none;
  float:left;
	width:60px; /* (hauteur !) idem HAUTEUR menu */
	height:100%; /* (largeur !) */
	padding:10px;
	border-right:1px solid #fff;
	background: green;
  color:white;
  font-family:Arial,sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

Code JavaScript :

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

1
2
3
4
5
6
"use strict";
var verticaltexts = document.querySelectorAll('ul.vertical-text li');
verticaltexts.forEach( function(verticaltext){
  var txt_arr = verticaltext.textContent.split('');
  verticaltext.innerHTML = txt_arr.join('<br/>').replace(' ','&nbsp;');
})

**dede tabby** · 27/08/2019, 17h56

Merci j'ai rajouté dans

Code CSS :

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

1
2
3
4
ul.vertical-text li {
 
writing-mode: vertical-rl;
text-orientation: upright;

Et cela marche sans javascript.

Quelqu'un m'avait conseillé d'éviter le JAVASCRIPT avec WORDPRESS.
En plus je ne saurai pas où mettre ce script, désolé.

Maintenant en faite ces onglets doivent se déplacer à droite sur le passage de la souris et faire apparaitre un texte. J'essaye d'y arriver sinon je reviens très vite vers vous.

Merci déjà c'est superbe

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
ul.vertical-text li {
  list-style:none;
  float:left;
	width:60px; /* (hauteur !) idem HAUTEUR menu */
	height:100%; /* (largeur !) */
	padding:10px;
	border-right:1px solid #fff;
	background: green;
  color:white;
  font-family:Arial,sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  writing-mode: vertical-rl;
 text-orientation: upright;
}

**dede tabby** · 28/08/2019, 01h58

je souhaite écrire verticalement dans des onglets qui s'ouvrent au passage de la souris et montrent un texte lui horizontal et bien sûr je n'y arrive pas a ce que le texte reste dans chaque onglet :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html>
<head>
<style> 
/* ORIGINE */
.menuFra{ /* Première CADRE décoration en faite */
width:810px;
height:5000px; /* 400px; */
padding: 25px 20px 10px 25px; 
font-size:0.9em; /* medium 0.9em;*/
font-family:"trebuchet ms",sans-serif; /*"trebuchet ms",sans-serif;*/
}
 
 div.menuFra{ /* Cadre de décoration */
/*  position:relative; */
position:relative;
 width:800px; /* 505px; */
 height:510px; /* 220px; */
 margin:15px; /* auto;  Par rapport à la page */
 padding-top:0px; /* 20px; */
 border-radius:40px; 
}  
 
/* important */
 
ul.vertical-text li { /* cadre du tableau IMPORTANT */
  list-style:none;
  float:left;
        width:60px; /* (hauteur !) idem HAUTEUR menu */
        height:480px; /* 100%; /* (largeur !) */
        padding:10px;
        border-right:1px solid #fff;
        background: green;
  color:white;
  font-family:Arial,sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  writing-mode: vertical-rl;
 text-orientation: upright;
 /* Je rajoute */
 overflow:hidden;
border-bottom:1px solid rgba(255,255,255,0.35);  
border-radius:10px;  /* je rajoute */
}
 
 
/*Marche aout 2019*/
/* commence à marcher */
/* vient de  http://www.css3create.com */
.menuFrs{ /* Première CADRE décoration en faite */
width:810px;
height:400px; /* 400px; */
padding: 25px 20px 10px 25px; 
font-size:0.9em; /* medium 0.9em;*/
font-family:"trebuchet ms",sans-serif; /*"trebuchet ms",sans-serif;*/
background: #7f8990; /* #ededed; couleur du fond ou je ne sais pas*/
background:-webkit-linear-gradient(#6F7A81,#939EA5);
background:-moz-linear-gradient(#6F7A81,#939EA5);
background:linear-gradient(#6F7A81,#939EA5);
}
 
 div.menuFrs{ /* Cadre de décoration */
 position:relative;
 width:800px; /* 505px; */
 height:510px; /* 220px; */
 margin:15px; /* auto;  Par rapport à la page */
 padding-top:20px; 
 border-radius:40px; 
 }  
.ulFrs{ /* cadre du tableau IMPORTANT */
 width:790px; /* 489px; */
 height:480px; /* 209px; */
 margin:auto;
padding:3px;
background:#000;
overflow:hidden;
border-bottom:1px solid rgba(255,255,255,0.35);  
border-radius:10px;  /* je rajoute */
}  
.ulFrs:before{ /* tableau case vise par défaut UTILE ? */
content:""; /* NE ME SERT A RIEN "www.css3create.com"; */
position:absolute;
top: 90px; /* 90px; */
right:0px;
width:650px; /* 650px; 324px; */
text-align:center;
color: #ededed; /* #6F7A81; /* Couleur du texte du tableau vide */
font-size:2.6em; /* 1.6em; */
} 
.ulFrs:hover:before{
color:black;
} 
.ulFrs .liFrs div{ /* C'est le texte à mettre et la taille fenetre*/
width:700px; /* height:208px;width:324px; Hauteur du texte */
height:477px; /* 477px 567px; hauteur du tableau */
color:black; /* C'est mieux#ED17E9; /*#6F7A81; c'est du bleu */
text-align: justify;
margin-left:33px; /* Ok marge entre onglet et tableau */
border-radius:5px;
background:#ededed; /* white; pink; #bdc7d0; couleur du tableau */
}
 
.ulFrs .liFrs{ /* C'est les onglets DIMENSIONS */
position:relative;
float:left;
overflow:hidden;
width:30px; /* 30px; */
height:509px; /* 509px; */
margin-right:4px;
list-style:none;
font-size:1.1em;
-webkit-transition:width 1s ease 0.15s;
-moz-transition:width 1s ease 0.15s;
transition:width 1s ease 0.15s;
} 
 
.ulFrs .liFrs:last-child{
margin-right:3px;
} 
 
.ulFrs .liFrs a{ /* Met le texte vertical et hauteur des onglets */
/*  A FAIRE MARCHER MINCE */
display:block;
position:absolute; z-index:20; /* */
bottom:0px;left:0px; /* bottom:-30px;left:0px; */
height:26px; /* 26px; */
width:452px; /* 452px; */
padding-right:25px;
padding-top:4px; /*4px; */
color:#FFF; /*couleur de fond invisible */
text-decoration:none;
border-right:1px solid rgba(255,255,255,0.35);
border-left:1px solid #000;
/*text-shadow:1px 0px 0px rgba(0,0,0,0.8);*/
-webkit-transform-origin:0px 0px;
-moz-transform-origin:0px 0px;
transform-origin:0px 0px;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
transform:rotate(-90deg);
border-radius:5px;
background:#353b42; /* c'est du noir */
} 
 
 
.ulFrs .liFrs:hover{ /* Largeur totale des tableaux */
width:520px /* 520px; */
}
 .ulFrs .liFrs:hover a{ /* Onglet selectionné prend une couleur */
text-shadow:1px 0px 0px rgba(0,0,0,0.25);
background:#ff4d00; /* couleur de fond de l'onglet d64e00; */
background:-webkit-linear-gradient(left,#d63700,#d65F00);
background:-moz-linear-gradient(left,#d63700,#d65F00);
background:linear-gradient(to right,#d63700,#d65F00);
} 
 
</style>
</head>
<body>
<div class="menuFrs">
 	<ul class="ulFrs">
 	 	<li class="liFrs"><a>Décembre 2019</a>
<div>
<p style="text-align: justify;"><img class="wp-image-7030 alignnone" src="http://arepege.org/wp-content/uploads/2018/05/icons8-bavarder-32.png" alt="" width="52" height="52"/>&nbsp; <span style="font-size: 12pt;"><span style="font-size: 14pt;"><strong>Sujet : </strong></span>A venir
</span></p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;"><img class="alignnone wp-image-7024 size-full" src="http://arepege.org/wp-content/uploads/2017/03/Intervenant-64.png" alt="" width="64" height="64"/> <span style="font-size: 14pt;"><strong>Intervenant : </strong></span>A venir<strong>
</strong></p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;"><img class="alignnone wp-image-9551" src="http://arepege.org/wp-content/uploads/2019/08/icons8-repas-96.png" alt="" width="50" height="50"/><span style="font-size: 14pt;"> <strong>Lieu :</strong></span> Adresse</p>
 
</div></li>
 	<li class="liFrs"><a>Janvier 2020</a>
<div>
<p style="text-align: justify;"><img class="wp-image-7030 alignnone" src="http://arepege.org/wp-content/uploads/2018/05/icons8-bavarder-32.png" alt="" width="52" height="52"/>&nbsp; <span style="font-size: 12pt;"><span style="font-size: 14pt;"><strong>Sujet : </strong></span>A venir
</span></p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;"><img class="alignnone wp-image-7024 size-full" src="http://arepege.org/wp-content/uploads/2017/03/Intervenant-64.png" alt="" width="64" height="64"/> <span style="font-size: 14pt;"><strong>Intervenant : </strong></span>A venir<strong>
</strong></p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;"><img class="alignnone wp-image-9551" src="http://arepege.org/wp-content/uploads/2019/08/icons8-repas-96.png" alt="" width="50" height="50"/><span style="font-size: 14pt;"> <strong>Lieu :</strong></span> Adresse</p>
 
</div></li>
 
 	<li class="liFrs"><a>Mars 2020</a>
<div>
<p style="text-align: justify;"><img class="wp-image-7030 alignnone" src="http://arepege.org/wp-content/uploads/2018/05/icons8-bavarder-32.png" alt="" width="52" height="52"/>&nbsp; <span style="font-size: 12pt;"><span style="font-size: 14pt;"><strong>Sujet : </strong></span>A venir
</span></p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;"><img class="alignnone wp-image-7024 size-full" src="http://arepege.org/wp-content/uploads/2017/03/Intervenant-64.png" alt="" width="64" height="64"/> <span style="font-size: 14pt;"><strong>Intervenant : </strong></span>A venir<strong>
</strong></p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;"><img class="alignnone wp-image-9551" src="http://arepege.org/wp-content/uploads/2019/08/icons8-repas-96.png" alt="" width="50" height="50"/><span style="font-size: 14pt;"> <strong>Lieu :</strong></span> Adresse</p>
 
</div></li>
 
 
</ul>
 
</div>
 
</ul>
</li>
</ul>
</li>
 
</div>
</body>
</html>

Merci infiniment de m'aider à avancer. C'est pour un site dont je m'occupe d'une association loi 1901

Je clôturerai bien sûr ensuite avec le bouton résolu.

Bien cordialement

Ps: j'ai le sentiment qu'il faut intégrer le code

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
ul.vertical-text li {
  list-style:none;
  float:left;
	width:60px; /* (hauteur !) idem HAUTEUR menu */
	height:100%; /* (largeur !) */
	padding:10px;
	border-right:1px solid #fff;
	background: green;
  color:white;
  font-family:Arial,sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  writing-mode: vertical-rl;
 text-orientation: upright;
}

Invité · 28/08/2019, 11h02

Bonjour,

A voir :

**dede tabby** · 30/08/2019, 03h08

Les deux propositions de solutions sont intéressantes mais :

Elles ne fonctionnent pas bien avec le smartphone (donne des flashs d'éclair)

La première est très sympa et je vais l'utiliser pour présenter le séminaire de l'association 2020.

Voilà la solution trouvée grâce à vous. Merci de me la valider.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
<!DOCTYPE html>
<html>
<head>
<style> 
/*Aout 2019*/
/* commence à marcher */
* { margin:0; padding:0; box-sizing:content-box; border-radius:10px; /* je rajoute */} 
 
.CadreUn{ /* .ulFrs Définit le cadre du tableau IMPORTANT */
 width:790px; /* 790px; 489px; */
 height:480px; /* 209px; */
 margin:20px; /*auto;*/
padding:3px;
background:#000;
overflow:hidden;
border-bottom:1px solid rgba(255,255,255,0.35);  
/* border-radius:10px;  /* je rajoute */
}  
 
.CadreUn .liFrs div{ /* C'est le texte à mettre et la taille fenetre*/
width:450px; /* 600 700px; Largeur  du texte*/
height:477px; /* 477px; 567px; hauteur du tableau et non des onglets*/
color:black; /* C'est mieux#ED17E9; /*#6F7A81; c'est du bleu */
text-align: justify;
margin-left:50px; /*33px; /* Ok marge entre onglet et tableau */
/*border-radius:5px;*/
 background:#ededed; /* #bdc7d0; couleur du tableau */
}
 
.CadreUn .liFrs{ /* C'est les onglets DIMENSIONS */
position:relative;
float:left;
overflow:hidden;
width:50px; /* 30px; */
height:509px; /* 509px; */
margin-right:5px; /* 3px; */
list-style:none;
text-align:center; /* left; right; alignement du texte YES*/ 
font-size:1.1em; 
-webkit-transition:width 1s ease 0.15s;
-moz-transition:width 1s ease 0.15s;
transition:width 1s ease 0.15s;
} 
 
.CadreUn .liFrs:last-child{
margin-right:0px;
} 
 
.CadreUn .liFrs a{ /* Met le texte vertical et hauteur des onglets */
/*display:block;*/
 list-style:none;
  float:left;
	width:50px; /* 60px; (hauteur !) idem HAUTEUR menu */
	height:480px; /* 100%; /* (largeur !) */
	padding:10px;
	border-right:1px solid #fff;
	background: green;
  color:white;
  font-family:Arial,sans-serif;
 display:inline-flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  writing-mode: vertical-lr;
 text-orientation: upright;
} 
.CadreUn .liFrs:hover{ /* Largeur totale des onglets */
width:520px /* 520px; */
}
 .CadreUn .liFrs:hover a{ /* Onglet selectionné prend une couleur */
text-shadow:1px 0px 0px rgba(0,0,0,0.25);
background:#ff4d00; /* couleur de fond de l'onglet d64e00; */
} 
CadreUn.vertical-text{ 
    list-style:none;
  float:left;
	width:60px; /* (hauteur !) idem HAUTEUR menu */
	height:480px; /* 100%; /* (largeur !) */
	padding:10px;
	border-right:1px solid #fff;
	background: green;
  color:white;
  font-family:Arial,sans-serif;
 display:inline-flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  writing-mode: vertical-lr;
 text-orientation: upright;
}
</style>
</head>
<body>
<p style="text-align: center;"><strong><span style="font-size: 14pt;">Version de démonstration Octobre 2019 à juin 2020
</span></strong></p>
 
<div class="menuFrs">
<ul class="CadreUn">
 	<li  class="liFrs"><a>Jeudi 03 Octobre 2019</a>
<div>
<p style="text-align: justify;"><img class="wp-image-7030 alignnone" src="http://arepege.org/wp-content/uploads/2018/05/icons8-bavarder-32.png" alt="" width="52" height="52"/>&nbsp; <span style="font-size: 12pt;"><span style="font-size: 14pt;"><strong>Sujet : </strong></span>A venir
</span></p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;"><img class="alignnone wp-image-7024 size-full" src="http://arepege.org/wp-content/uploads/2017/03/Intervenant-64.png" alt="" width="64" height="64"/> <span style="font-size: 14pt;"><strong>Intervenant : </strong></span>A venir<strong>
 
</div></li>
 	<li class="liFrs"><a class="vertical-text">Novembre 2019</a>
<div>
<p style="text-align: justify;"><img class="alignnone wp-image-9551" src="http://arepege.org/wp-content/uploads/2019/08/icons8-repas-96.png" alt="" width="50" height="50"/><span style="font-size: 14pt;"> <strong>Lieu :</strong></span> Adresse</p>
</div></li>
<li class="liFrs"><a class="vertical-text">Décembre 2019</a>
<div>
<p style="text-align: justify;"><img class="alignnone wp-image-9551" src="http://arepege.org/wp-content/uploads/2019/08/icons8-repas-96.png" alt="" width="50" height="50"/><span style="font-size: 14pt;"> <strong>Lieu :</strong></span> Adresse</p>
</div></li>
 	 </ul>
</div>
 <blockquote>Sélectionner les onglets par le bas en positionnant la souris dessus merci.</blockquote>
</body>
</html>

Très très cordialement votre

Ecriture verticale de texte dans un onglet

CSS

Vue hybride

Discussions similaires

Partager

Partager