Lettrine first-letter dans succession de div et class ?

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...

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>
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

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.

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>

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>