Discussion :

[patricktoulon]

re Bonjour a tous

decidement aujourd'hui

voila toujours mon wysiwyg perso je voudrais mettre le texte de chaque items d'une balise select dans une balise (Hx) correspondant a leur texte

et visiblement les balise (options n'acceptent pas les balise (H) tout du moins le texte reste le même pour tout les items

quelqu'un a une idée pour appliquer cela

ou l'équivalent en size des balises H

merci pour les retours

Code :

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

1
2
3
4
5
6
7
8
9
<select class="selects" size="7">
<option selected=""><H1> Titre&nbsp; H1</H1></option>>
<option><h2>Titre&nbsp; H2 </h2></option>
<option>Titre&nbsp; H3</option>
<option>Titre&nbsp; H4</option>
<option>Titre&nbsp; H5</option>
<option>Titre&nbsp; H6</option>
<option>Titre&nbsp; H7</option>
</select>

[Invité]

Ce n'est pas possible en utilisant du HTML.
la balise option ne peut contenir que du texte (https://www.w3.org/TR/html5/forms.ht...option-element).
Les navigateurs ignoreront le contenu HTML d'une telle balise.
Il faudra utiliser du CSS ou du Javascript.

[patricktoulon]

Bonjour GlobuleVert
ok bien reçu
je vais donc m'orienter vers du css inline pour mettre les font.size aux options
javascript je sais pas si c'est pour styler en dom c'est pareil si c'est autre chose il faudra m'expliquer
il me reste a trouver les fontsizes équivalents
merci pour le retour

[Invité]

Oui c'est l'idée, CSS ou JS selon vos préférences.
J'opterai plus pour des classes CSS que du inline.
Le inline sert plus pour faire des tests en mode larrache, norme ISO-1664.
Une fois le style fixé, je fabriquerai les classes correspondantes.
Par contre pour l'aspect WYSIWYG, je pense que ça va être une bataille de navigateurs.
Il n'y a aucune garantie que le rendu d'une balise H dans un navigateur utilise les mêmes propriétés que dans un autre.

[NoSmoking]

Bonjour,

Oui c'est l'idée, CSS ou JS selon vos préférences.

non CSS uniquement dans ce cas le javascript est totalement inutile si l'on passe par des classes comme tu le dis plus loin.

il me reste a trouver les fontsizes équivalents

Default style sheet for HTML 4 globalement bien respecté.

Je le recopie ici pour info

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
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
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }
 
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }
 
*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }
 
@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

pour info <h4> est par défaut à font-size: 1em.

[patricktoulon]

re
bonsoir NoSmoking
merci c'est bon avec le font size "em" c'est juste un peu plus petit j'ai pris les taille dans ton exemple