Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Lettrine first-letter dans succession de div et class ?

9 réponses
Avatar
Nikita Calvus-Mons
Bonjour,

Voilà mon souci. Je suis en train de créer un template de mise en page
en html/css.

J'aimerais utiliser la propriété :first-letter pour faire une lettrine
dans des paragraphes de classe "lettrine". Sur mon ancien blog j'avais
un style :

.lettrine:first-letter {
font-size: 450%;
padding-right: 4px;
margin-top: 0;
float: left;
}

qui marchait très bien. Le premier paragraphe de mes posts était
toujours donc un p class="lettrine"

Mon problème est le suivant :

les paragraphes concernés seront toujours dans la colonne principale,
dont l'id est "main", contenue par un id = "content".

<div id="content">
<div id="main">
<p class="lettrine">
texte
</p>
<p>
texte
</p>
</div>
</div>

etc.

J'arrive à modifier sans problème le style des paragraphes en utilisant
cette syntaxe :

#content #main p {}

mais quand je fais :

#content #main p.lettrine:firstletter {}

ça ne marche pas

J'ai essayé toutes les combinaisons syntaxiques, par ex :

#content #main .lettrine p:firstletter {}

ou même

p.lettrine:first-letter {} sans contexte spécifique,

Tout ça sans succès. J'ai l'impression que l'héritage ne marche pas dans
ce cas précis. Avez-vous une idée de pourquoi ?

Merci...

9 réponses

Avatar
Nikita Calvus-Mons
Nikita Calvus-Mons a écrit :

J'ai essayé toutes les combinaisons syntaxiques, par ex :

#content #main .lettrine p:firstletter {}

ou même

p.lettrine:first-letter {} sans contexte spécifique,

Tout ça sans succès. J'ai l'impression que l'héritage ne marche pas dans
ce cas précis. Avez-vous une idée de pourquoi ?



Je précise que sans utiliser le pseudo-élément first-letter, l'héritage
#content #main .lettrine marche très bien... C'est l'utilisation de
:first-letter que je n'arrive pas à saisir dans ce genre de syntaxe
imbriquée...

Merci
Avatar
Olivier Miakinen
Bonjour,

Le 30/11/2009 00:28, Nikita Calvus-Mons a écrit :

J'aimerais utiliser la propriété :first-letter pour faire une lettrine
dans des paragraphes de classe "lettrine". Sur mon ancien blog j'avais
un style :

.lettrine:first-letter {
font-size: 450%;
padding-right: 4px;
margin-top: 0;
float: left;
}

qui marchait très bien. Le premier paragraphe de mes posts était
toujours donc un p class="lettrine"



Ok.

Mon problème est le suivant :

les paragraphes concernés seront toujours dans la colonne principale,
dont l'id est "main", contenue par un id = "content".

[...]

J'arrive à modifier sans problème le style des paragraphes en utilisant
cette syntaxe :

#content #main p {}



Ok.

mais quand je fais :

#content #main p.lettrine:firstletter {}

ça ne marche pas



Rassure-moi : c'est bien « first-letter » que tu as écrit et pas
« firstletter » ?

J'ai essayé toutes les combinaisons syntaxiques, par ex :

#content #main .lettrine p:firstletter {}



Non, là ça ne peut pas marcher : il faudrait que tu aies un élément de
classe "lettrine", lui-même contenant le P.

ou même

p.lettrine:first-letter {} sans contexte spécifique,

Tout ça sans succès.



Pourtant, c'est bien l'exemple qui est donné dans la norme.

<cit. http://www.w3.org/TR/CSS21/selector.html&gt;
p.special:first-letter {color: #ffd800}
</>

J'ai l'impression que l'héritage ne marche pas dans
ce cas précis. Avez-vous une idée de pourquoi ?



Ben non. Juste pour savoir :
1) Tu n'aurais pas une page web où on puisse voir par nous-mêmes ?
2) Avec quels navigateurs constates-tu le problème ?

Cordialement,
--
Olivier Miakinen
Avatar
Nikita Calvus-Mons
Olivier Miakinen a écrit :
mais quand je fais :

#content #main p.lettrine:firstletter {}

ça ne marche pas



Rassure-moi : c'est bien « first-letter » que tu as écrit et pas
« firstletter » ?



Oui oui ;-)

J'ai essayé toutes les combinaisons syntaxiques, par ex :

#content #main .lettrine p:firstletter {}



Non, là ça ne peut pas marcher : il faudrait que tu aies un élément de
classe "lettrine", lui-même contenant le P.



Ok je pige.

p.lettrine:first-letter {} sans contexte spécifique,

Tout ça sans succès.



Pourtant, c'est bien l'exemple qui est donné dans la norme.



Oui, je sais, d'où mon arrachage de cheveux.



Ben non. Juste pour savoir :
1) Tu n'aurais pas une page web où on puisse voir par nous-mêmes ?
2) Avec quels navigateurs constates-tu le problème ?



1) je suis toujours en local mais je vais uploader un fichier, oui. Dans
5 mn !

2) Firefox 3.5 sous Vista ; IE7 (dont je ne me sers jamais, mais je
viens de vérifier).
Avatar
Nikita Calvus-Mons
Olivier Miakinen a écrit :
Ben non. Juste pour savoir :
1) Tu n'aurais pas une page web où on puisse voir par nous-mêmes ?



Voilà la chose http://www.idiomatique.org/tests/index_test.html

NB : Les couleurs sont volontaires, pour voir la structure (tous les
trois ans, faut que je réapprenne CSS, donc je fais comme les enfants,
hein). Les styles sont dans le fichier html par commodité mais je les
mettrai dans un .css quand j'aurai fini.
Avatar
Nikita Calvus-Mons
Olivier Miakinen a écrit :
2) Avec quels navigateurs constates-tu le problème ?



Rectif : j'avais vérifié avec IE avec la mauvaise syntaxe, en mettant la
syntaxe normale :

#content #main p.lettrine:first-letter

ça marche sous IE !

Mais pas sous Firefox... Et il va sans dire que ça me désole...
Avatar
Olivier
Le 30/11/2009 10:39, Nikita Calvus-Mons a écrit :
Olivier Miakinen a écrit :
Ben non. Juste pour savoir :
1) Tu n'aurais pas une page web où on puisse voir par nous-mêmes ?



Voilà la chose http://www.idiomatique.org/tests/index_test.html



Et en faisant juste :

#main p:first-letter {}

Histoire de simplifier. Parce que #main et #content sont uniques,
inutile d'en utiliser l'héritage. Il faut simplifier la tache du
navigateur.

--
Olivier

<http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html&gt;
Avatar
Olivier
Le 30/11/2009 10:42, Nikita Calvus-Mons a écrit :
Olivier Miakinen a écrit :
2) Avec quels navigateurs constates-tu le problème ?



Rectif : j'avais vérifié avec IE avec la mauvaise syntaxe, en mettant la
syntaxe normale :

#content #main p.lettrine:first-letter

ça marche sous IE !

Mais pas sous Firefox... Et il va sans dire que ça me désole...



Ben chez moi ça marche, ffx 3.5.5/linux. Une histoire de cache ?

Il y a juste que je ne mettrais que : #main p.lettrine:first-letter

--
Olivier

<http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html&gt;
Avatar
Olivier
Le 30/11/2009 10:52, Olivier a écrit :
Il y a juste que je ne mettrais que : #main p.lettrine:first-letter



Et même : p.lettrine:first-letter

--
Olivier

<http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html&gt;
Avatar
Nikita Calvus-Mons
Olivier a écrit :
Le 30/11/2009 10:52, Olivier a écrit :
Il y a juste que je ne mettrais que : #main p.lettrine:first-letter



Et même : p.lettrine:first-letter




Tout à fait. J'avais bien essayé ça aussi hier, et je ne pigeais rien.

Une question de tag <img> qui suivait immédiatement le <p> lettriné...
Je l'explique à côté.

Merci à toi !