Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Lettrine first-letter dans succession de div et class ?

8 views
Skip to first unread message

Nikita Calvus-Mons

unread,
Nov 29, 2009, 6:28:55 PM11/29/09
to
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...

Nikita Calvus-Mons

unread,
Nov 29, 2009, 6:47:13 PM11/29/09
to
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

unread,
Nov 29, 2009, 7:45:13 PM11/29/09
to
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

Nikita Calvus-Mons

unread,
Nov 30, 2009, 4:30:31 AM11/30/09
to
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

unread,
Nov 30, 2009, 4:39:23 AM11/30/09
to
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

unread,
Nov 30, 2009, 4:42:54 AM11/30/09
to
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

unread,
Nov 30, 2009, 4:47:24 AM11/30/09
to
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>

Olivier

unread,
Nov 30, 2009, 4:52:39 AM11/30/09
to
Le 30/11/2009 10:42, Nikita Calvus-Mons a ï¿œcrit :

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

unread,
Nov 30, 2009, 4:53:37 AM11/30/09
to
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>

Nikita Calvus-Mons

unread,
Nov 30, 2009, 4:59:54 AM11/30/09
to
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 !

0 new messages