Lettrine first-letter dans succession de div et class ?
Nikita Calvus-Mons
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...
Nikita Calvus-Mons
> 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 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
Nikita Calvus-Mons
>> 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
> 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
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
> 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>
Olivier
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>
Olivier
> 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>
Nikita Calvus-Mons
> 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 !