Discussion :

[phildur]

Bonjour,
Je cherche à faire apparaitre dans un paragraphe deux signatures, en police cursive grande et grasse, séparées par la conjonction "et" (encadrée de deux espaces) dans une petite police non grasse. La police par défaut est 'Comic sans MS' définie au niveau css par un attribut font-family de la déclaration body (copiée en fin de post).
Je l'ai codé :

Code :

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

1
2
3
4
5
 
      <p>      
         <div style='display:inline; font: bold x-large "Curlz MT",cursive '>Claude </div>et&nbsp;
         <div style='display:inline; font: bold x-large Curlz MT,cursive '>Philippe</div>
      </p>

Ce code donne le résultat attendu avec IE8 et Firefox 3.6 mais ne passe pas la validation W3C.
Il provoque la réponse :

Line 246, Column 91: character data is not allowed here
…='display:inline; font: bold x-large "Curlz MT",cursive '>Claude </div>et&nbsp;✉
You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include:

•putting text directly in the body of the document without wrapping it in a container element (such as a <p>aragraph</p>), or
•forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes), or
•using XHTML-style self-closing tags (such as <meta ... />) in HTML 4.01 or earlier. To fix, remove the extra slash ('/') character. For more information about the reasons for this, see Empty elements in SGML, HTML, XML, and XHTML.

J'y ai déjà passé pas mal de temps mais je ne vois pas de solution propre.
Je n'ai pas encore tout assimilé des définitions HTML 4 et CSS 2.1, ça doit inévitablement être trivial, mais pas pour moi.
Merci d'avance pour tout conseil ou piste à suivre.
Phil

ci-dessous la declaration body

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
         body           {
                           color:            navy        ;
                           background:       #ccffff     ;
                           text-align:       left        ;
                           font-family:      Comic Sans MS, sans-serif ;
                           font-variant:     normal      ;
                           font-style:       normal      ;
                           font-weight:      normal      ;
                           font-size:        medium      ;
                           line-height:      1em         ;
                        }

[Eric2a]

Salut,

La balise <p> ne peut pas contenir d'éléments de type bloc.

Remplace les <div></div> par <span></span>

[phildur]

Bonjour,

La balise <p> ne peut pas contenir d'éléments de type bloc.

Remplace les <div></div> par <span></span>

Ça marche, je connais maintenant une balise de plus.
Je me coucherai ce soir moins crétin qu'hier.

Le code est grandement simplifié :

Code :

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

1
2
3
4
5
 
      <!-- Signature -->
      <p class='signature' >      
         Claude<span class='std'> et </span>Philippe
      </p>

A plus