Discussion :

[Chtouk]

Bonsoir à tous je débute en XHTML et je cherche à définir une lettrine particulière dans une feuille CSS.

En fait je souhaite que celle-ci fasse la taille de deux, lignes, jusque là pas de problèmes mais je voudrais (et c'est là que ça se corse pour moi);

-que le haut de ma lettrine(le pixel le plus haut) corresponde au haut(le pixel le plus haut) de mes grandes lettres ( par grandes lettres j'entends par exemple " l " "k" ou "t" qui sont plus hautes que "a","c" ou "e" par exmple)

-que le bas de ma lettrine corresonponde au bas de mes petites lettres

voilà c'est très spécifique donc je me dis qu'une petite capture d'écran est bien utile pour illustrer ce que je souhaite,avec les petites lignes rouges que j'ai rajouté pour montrer ce que j'appelle le haut et le bas ci dessous.



voilà merci beaucoup bonne soirée ou journée à tous!!!

[Erwan31]

Bonjour,
c'est possible via le pseudo-élément :first-letter:

Par exemple p:first-letter {...} s'appliquera sur toutes les premières lettres de tes paragraphes.

Donc une solution est de passer par une lettre flottante et de la décaler vers le bas avec une marge haute.

Code :

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

1
2
3
4
5
6
p:first-letter {
    float : left;
    margin-top : .25em;
    font-size: 3em;
    font-weight : bold;
}

Attention ne pas oublier l'espace avant l'accolade pour que IE6 le prenne en compte (uniquement en mode strict).
Eviter les pixels pour que les alignements restent cohérents si le texte est agrandi.

[Chtouk]

Merci ca marche à merveille!!!!

Par contre pour comprendre quand tu utilises la propriété "font-size: 3em;"
j'avais cru comprendre que le coefficient devant "em" indiquait le nombre de ligne.Pourquoi donc alors utiliser 3 alors que initialement je voulais 2 ???

Merci beaucoup en tout cas !!

[Erwan31]

Merci ca marche à merveille!!!!
Par contre pour comprendre quand tu utilises la propriété "font-size: 3em;"
j'avais cru comprendre que le coefficient devant "em" indiquait le nombre de ligne.Pourquoi donc alors utiliser 3 alors que initialement je voulais 2 ???

Bonne question, en effet ce n'est pas très logique puisque la hauteur devrait être à peine inférieur à 2.4em ( zone de contenu + les 2 demi-interlignes X2 - les hampes descendantes)
sachant que l'interligne est égale à la valeur de line-height - le corps > 0.4em.
Si quelqu'un a une explication je suis preneur.