Discussion :

[hellspawn_ludo]

Bonjour,

J'aimerais augmenter la taille des 3 premiers caractères de mon paragraphe mais je n'y arrive pas. Je sais que pour le 1er, il y a le first-letter mais comment fait-on lorsqu'on en veut plus d'un ?

Voici mon code :

HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div align="center">
 
     <div class="encadrement">
 
            <p>
                La première lettre est plus grande que les autres et l'espacement entre la 1ère ligne et la 2ème est plus grand que l'espacement entre toutes les autres lignes.
            </p>
 
 
     </div>
 
</div>

CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
div.encadrement{    width:200px;  height:100px;  background-color:black;}
 
 p   {   position:relative;
           top:25px;
           font-family:Garamond ; 
           font-size:12pt ; 
           text-align:left;
           color:white ; 
           background-color:green;}  
 
p:first-letter{font-size:26px}
 
span.taille_lettre{font-size:36px}

J'ai essayé de mettre dans un <span> les 3 premiers caract. mais lorsque le texte de ma balise <p> est supérieur à l'encadrement et que celui-ci retourne à la ligne, l'espacement entre la 1ère et 2ème ligne est plus grand que l'espacement des autres lignes.

J'espère que vous voyez ce que je veux dire.

Exemple

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
 
<div align="center">
 
        <div class="encadrement">
 
            <p>
 
            <p>
                <span class="taille_lettre">La </span>première lettre est plus grande que les autres et l'espacement entre la 1ère ligne et la 2ème est plus grand que l'espacement entre toutes les autres lignes.
            </p>
 
 
        </div>
 
</div>

Quelqu'un aurait-il une idée à me soumettre ?

Merci.

[Candygirl]

J'avoue ne pas être très au fait sur les comportements des éléments de type inline. Dans la recommandation css2 on peut lire:

Quand un élément contient du texte dont l'affichage requiert plusieurs polices, les agents utilisateurs devraient en déterminer la valeur pour la propriété 'line-height' en fonction de celle qui a la plus grande taille.

Le line-height calculé pour ta première ligne se fait en tenant compte du font-size de 36 donc est normalement plus grande.

En imposant un line-height à ton p on devrait donc voir diparaître le problème; par exemple:

Code :

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

p {line-height:1.25em;}

c'est le cas sur FF, opera voir IE7 (à 1px près) mais sur IE6 où l'espace devient nettement plus petit. Il me semble que cela provient de cette recommandation

Généralement, quand la propriété 'line-height' a une seule valeur pour toutes les boîtes en-ligne d'un paragraphe (sans images trop hautes), la recommandation précédente devrait faire que les lignes de base des lignes successives soient indépendantes de la hauteur de ligne. Ceci est important quand on doit aligner des colonnes de texte dans différentes polices, par exemple dans une table.

mal gérée sur IE. On peut cependant corriger sur IE6- en redéfinissant, à son intention, un line-height sur le span, genre 0.8em

Mais peut-être existe-t-il une autre solution?

[hellspawn_ludo]

Merci à toi Candygirl pour ta réponse.

Je viens de tester avec le line-height:1.25em et ça fonctionne très bien mais il est vrai qu'il y a une différence entre IE7 et FF de l'ordre de 1px.
FF est bien plus précis, toutefois, ça fera l'affaire. Mais plus ça va et plus je me fais ma petite idée sur IE.

A +