Objet : Liste consacrée aux discussions à propos de la composition et de la typographie
Archives de la liste
- From: FMichaud <fmichaud76-public AT yahoo.fr>
- To: typographie AT listes.irisa.fr
- Subject: Re : Re : [typo] Lettrine du Monde sur internet (code amélioré)
- Date: Sat, 17 Nov 2007 00:33:29 +0000 (GMT)
- Domainkey-signature: a=rsa-sha1; q=dns; c=nofws; s=s1024; d=yahoo.fr; h=X-YMail-OSG:Received:X-Mailer:Date:From:Subject:To:MIME-Version:Content-Type:Message-ID; b=FEE7TCn3WVOPSNrDtkLY7dv5zz6aI88i6Xy4seFedT16GLlIglLqTC29xifXPPpiJK0tO8qofblkXN+/ogb77h5p7Nt6amOFmAfU+PnRxvgdMjiB/m8urw/5xXTUFxeQVAcnt5z4Nhj3mhMiRfJQoKL2q9sinExN/RGoWXqZVhQ=;
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 :
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;
}
<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>
{
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>
<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
Ne gardez plus qu'une seule adresse mail ! Copiez vos mails vers Yahoo! Mail
- Re : Re : [typo] Lettrine du Monde sur internet (code amélioré), FMichaud, 17/11/2007
- Re : [typo] Lettrine du Monde sur internet (code amélioré), Jacques André, 17/11/2007
- Re: Re : [typo] Lettrine du Monde sur internet (code amélioré), Morgan Fernandez, 17/11/2007
- [typo] Typographie pour état de somnolence..., Jacques Melot, 17/11/2007
- Re: [typo] Typographie pour état de somnolence..., Anne Guilleaume, 17/11/2007
- Re: [typo] Typographie pour état de somnolence..., P a t r i c k ~ H o, 18/11/2007
- [typo] Typographie pour état de somnolence..., Jacques Melot, 17/11/2007
- Re: Re : [typo] Lettrine du Monde sur internet (code amélioré), Morgan Fernandez, 17/11/2007
- Re: Re : Re : [typo] Lettrine du Monde sur internet (code amélioré), Jean-Luc BLARY, 17/11/2007
- Re: Re : Re : [typo] Lettrine du Monde sur internet (code amélioré), P a t r i c k ~ H o, 17/11/2007
- Re: Re : Re : [typo] Lettrine du Monde sur internet (code amélioré), Jean-Luc BLARY, 17/11/2007
- <Suite(s) possible(s)>
- Re : Re : [typo] Lettrine du Monde sur internet (code amélioré), FMichaud, 17/11/2007
- Re: Re : Re : [typo] Lettrine du Monde sur internet (code amélioré), Morgan Fernandez, 18/11/2007
- Re : [typo] Lettrine du Monde sur internet (code amélioré), Jacques André, 17/11/2007
Archives gérées par MHonArc 2.6.16.