28218 sujets

CSS et mise en forme, CSS3

Information sur le pseudo element "first-letter"

Bonjour à tous le monde,

J'aurais aimé avoir de plus amples informations sur le pseudo element first-letter.
Qu'est ce qui determine la hauteur de ce "block" (c'est un block ou une ligne ?)
C'est à dire que je n'arrive pas à enlever le "padding" (ou l'espacement) en haut et en bas de la lettrine.
 
p:first-letter
{
	font-size:36px;
	font-weight:bold;
	float:left;
	border:1px solid #000;
}


En ce servant des marges négatives, on peut "bidouiller" un peu, mais j'aimerai pouvoir le faire "en vrai" Smiley smile

Cela m'embeterait de devoir passer en manuel (scinder la 1er lettre, l'entourer d'un span et la décorer... surtout que c'est du dynamique...)

Voila.

Est ce que quelqu'un pourrait m'indiquer ?
Merci
Smiley biggrin
Modifié par siddhy (30 Sep 2005 - 14:35)
salut.
Tu as tout la ou presque
Simplement il faut faire preceder ton first-letter du selecteur auquel tu veux l'attribuer (h1:first-letter , p:first-letter etc..) et aussi peut-etre ajouter un matgin-right pour le decoler un peu du reste du texte
Bonjour,

Merci pour ces 2 liens.
Laurent Denis >> J'avais déjà vu le topic. pour les proprietes, je me suis basé sur le livre de Raphael. Par contre je ne connais pas la différence entre CSS2 et CSS2.1 Smiley rolleyes

chmel >> celui la de lien je n'avais pas vu ..
Par contre chez moi first-letter n'accepte pas la propiété padding !!! et c'est justement celle là qu'il me faudrait Smiley ohwell

Est ce que first-letter accepte la propriété padding ?
Modifié par siddhy (30 Sep 2005 - 14:35)
Non, la propriete line-height ne s'applique pas sur le pseudo element first-letter... Smiley decu

(cf p143 du livre CSS2 de Raphael)
Modifié par siddhy (30 Sep 2005 - 16:56)
Administrateur
siddhy a écrit :
Non, la propriete line-height ne s'applique pas sur le pseudo element first-letter... Smiley decu

(cf p143 du livre CSS2 de Raphael)

Attention à la précision importante de Laurent Denis :
Laurent Denis a écrit :
attention aux différences entre CSS2 (la théorie recopiée par les sites comme Mediabox) et CSS2.1 (la réalité).


EDIT : en fait, line-height s'applique, dans le sens premier du terme, mais son effet n'est pas du tout celui escompté : la propriété s'applique à toute la ligne de texte (first-line) et non pas au premier caractère (first-letter).

A tester :

p {
background: yellow;
width: 10em;
}
p:first-letter {
line-height: 3em;
}

<p>test test test test test test test test
test test test test test test test test test
test test test test test test test
test test test test test test </p>

Modifié par Raphael (30 Sep 2005 - 17:06)
Raphael a écrit :

Attention à la précision importante de Laurent Denis :


EDIT : en fait, line-height s'applique, dans le sens premier du terme, mais son effet n'est pas du tout celui escompté : la propriété s'applique à toute la ligne de texte (first-line) et non pas au premier caractère (first-letter).


On va continuer longtemps à tourner autour du pot ?

le message que personne ne lit a écrit :
line-height "remplace" en quelque-sorte la propriété height. S'il n'est pas appliqué à float, c'est l'équivalent d'un line-height sur :first-line. Dans le cas contraire, il permet le plus souvent d'obtenir un effet similaire à height.
Administrateur
Laurent Denis a écrit :
On va continuer longtemps à tourner autour du pot ?

Ah mais pourquoi certains écrivent des messages que personne ne lit ? Smiley biggol
Siddhy: non. Justement. Line-height perpet d'agir sur la hauteur de la lettre quand celle-ci est flottante.

Un exemple de rendu similaire à celui de siddhy, mais en taille relative pour pouvoir s'agrandir proprement :

<style type="text/css">
<!-- 
p {
background: yellow;
width: 10em;
font-size: 1em;
line-height: 1.2em;
}
p:first-letter {
font-size:1.8em;
font-weight:bold;
float:left;
border:1px solid #000;
background-color: red;
line-height: 1.2em;
padding: 0 0.3em;
margin-right: 0.1em;
}

-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
p:first-letter {
padding: 0.25em 0.3em;
}	
</style>
<![endif]-->

Modifié par Laurent Denis (30 Sep 2005 - 17:56)
Sujet clos
Aller à