Ajustement du texte suivant une lettrine [Résolu]

Bonjour

J'ai défini une lettrine comme suit :

.Lettrine {
	float:left;
	font-size: 20pt;
	font-weight: bold;
	font-family: Georgia, Times New Roman, Times, serif;
	color: #8aa02e;
	padding-right: 2px;
	line-height: 6pt;
}

Des combinaisons de caractères telles que Pa (P en lettrine, a en caractère normal) ne donnent pas un résultat visuel plaisant, les deux lettres étant trop séparées, même en définissant padding-right: 0px.

Exemple :



Comment puis-je localement créer un petit décalage du texte vers la gauche pour que le a se place légèrement au-dessous de l'oeil du P ?

Voilà ce que je voudrais obtenir :



Merci d'avance

PS : Je sais, je fais dans la joaillerie !
Modifié par cadbor (15 Jul 2009 - 09:48)

Bonjour,

Tu doit pouvoir, en utilisant un classe spécifique pour les lettrines concernées, définir une marge négative pour ta lettrine.

Bonjour

J'ai essayé en définissant padding-right=-2px, mais cela ne semble pas marcher.
Le a s'affiche toujours en bordure de la lettrine P.

Mais peut-être ce n'est pas ce qu'il faut essayer.

Merci de ta réponse

Salut,

Laurie-Anne a écrit :
une marge négative pour ta lettrine

cadbor a écrit :
J'ai essayé en définissant padding-right=-2px

Les marges en css, c'est margin, pas padding (ici margin-right, donc).

Autre chose, utilise les em plutôt que les px de manière à ce que les proportions soient conservées lorsque le texte change de taille.

Encore autre chose : quelle balise HTML utilises-tu pour marquer tes lettrines ? Si c'est un span (solution vers laquelle j'irais personnellement), tu n'as pas besoin de float:left
Modifié par marcv (14 Jul 2009 - 20:13)

Je comprends qu'il faut créer un chevauchement par la gauche de la lettrine P par la chaîne de caractères qui suit.

Mais comment faire ?
Modifié par cadbor (14 Jul 2009 - 20:21)

marcv a écrit :
Salut,
Les marges en css, c'est margin, pas padding (ici margin-right, donc).

Autre chose, utilise les em plutôt que les px de manière à ce que les proportions soient conservées lorsque le texte change de taille.

Encore autre chose : quelle balise HTML utilises-tu pour marquer tes lettrines ? Si c'est un span (solution vers laquelle j'irais personnellement), tu n'as pas besoin de float:left

Merci.

C'est bien ce qu'il fallait faire : margin-right:-2px.
La solution était toute simple. (Je n'ai pas encore assimilé les subtilités de base...)
D'autre part, comme je marque les lettrines par <span class, j'ai suivi ton conseil et ai retiré float:left.

Merci encore.

Ps : Ne pas tenir compte de mon précédent message. (Les messages se sont croisés.)

Le problème est donc [résolu] ?

Oui, merci. (J'ai marqué comme résolus mes deux sujets.)

Bonne journée
Modifié par cadbor (15 Jul 2009 - 09:57)