Lettrine first-letter dans succession de div et class ?

Le
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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Nikita Calvus-Mons
Le #22045361
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
Olivier Miakinen
Le #22045351
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.

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
Nikita Calvus-Mons
Le #22045311
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).
Nikita Calvus-Mons
Le #22045301
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.
Nikita Calvus-Mons
Le #22045291
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...
Olivier
Le #22045281
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

Olivier
Le #22045271
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

Olivier
Le #22045261
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

Nikita Calvus-Mons
Le #22045251
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 !
Publicité
Poster une réponse
Anonyme