Re: Re : Re : [typo] Lettrine du Monde sur internet (code amélioré)

Amélioration du code : je n'en ferais plus, promis ;=)

Le code ci dessous laisse libre le lecteur de changer la taille de la fonte. Il est aussi plus souple avec les diverses fontes. A tester sur la page de la même façon que mon message précédent :

http://www.w3schools.com/css/tryit.asp?filename=trycss_firstline_letter

Le premier paragraphe reprend le style du Monde. Le second paragraphe illustre la mise en forme spéciale de la première ligne.

Faites varier la taille de la fonte avec votre navigateur pour vous en rendre compte. Faites aussi varier la taille de la fenêtre d'affichage.

--------DEBUT DU CODE--------

<html>
<head>
<style type="text/css">
body { font-size: 100%; }
p
{
font-family:Georgia, Norasi, serif;
font-size:1em;
line-height:1.2em;
text-align:justify;
}
p.lemonde:first-letter
{
color: #950002;
float:left;
font-size:3em;
font-family:"Arial Black" ,Arial, Helvetica, "Nimbus Sans L", sans-serif;
font-weight:bold;
line-height:0.72em;
}

p.firstline:first-letter
{
color: #1111ff;
float:left;
font-size:3em;
font-weight:bold;
line-height:0.75em;
}
p.firstline:first-line
{
color: #888888;
font-variant: small-caps;
font-weight:bold;
}
</style>
</head>

<body>
<u>Présentation comme Le Monde</u> (class="lemonde")
<p class="lemonde">
La situation dans les transports publics, paralysés depuis le lancement de la grève contre la réforme des régimes spéciaux de retraite le 13 novembre, ne devrait pas s'améliorer ce week-end. Vendredi, la plupart des syndicats ont appelé à la poursuite du mouvement, largement suivis par les assemblées générales de salariés qui ont décidé de poursuivre la grève ...</p>
<u>Présentation avec première ligne en petites majuscules</u> (class="firstline")
<p class="firstline">Pellentesque congue. Ut in risus volutpat libero pharetra tempor et patati et patata. Cras vestibulum bibendum augue. Praesent egestas leo in pede vamos a la playa. Praesent blandit odio eu enim. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo ...
</p>
</body>

</html>

--------FIN DU CODE--------

A vous d'en faire bon usage !

A+

Frédéric Michaud

Subject:	Re: Re : Re : [typo] Lettrine du Monde sur internet (code amélioré)
Date:	Sat, 17 Nov 2007 09:33:46 +0100
From:	Jean-Luc BLARY <jeanluc.blary@xxxxxxx>