Les Contes de

  • : Les Contes du Chat Perché (au sixième étage, sans ascenseur)
  • zoelie
  • : Journal Intime
  • : Faites une thèse, faites une thèse, qu\'ils disaient... J\'aurais mieux fait de rester faire la troglodythe avec ma chatoune sous les toits de Paris, au sixième étage sans ascenseur !
  • Recommander ce blog
  • Retour à la page d'accueil

Etre au courant

Inscription à la newsletter
 

Mercredi 13 juillet 2005
Ou comment commencer son article par une grande lettre, pour se la jouer "Mon blog est un incunable et j'y fais des enluminures"...

Il s'agit de définir la première lettre de chaque paragraphe dans les articles, ce qui permettra de lui donner un style propre.
Comme en Allemand, la syntaxe d'un mot nouveau se construit à reculons...
Reprenons donc:
"dans les articles" et seulement dans les articles -> donc on commence par la classe .article .
"chaque paragraphe" -> on désigne un paragraphe par le sélecteur p donc on en est à .article p .
"la première lettre" -> là, ça s'invente pas, mais ça se trouve sur le net, il faut utiliser une pseudo-classe (= qui commence par : ) et elle s'appelle, fort logiquement :first-letter.

Finalement, la fonction qu'on va utiliser s'appelle : .article p:first-letter .
Il n'y a plus qu'à choisir à quoi va ressembler cette lettrine ...

Une petite précision cependant : on peut également avoir envie que la lettrine soit visible quand on consulte un seul article à la fois, cas décrit par la classe ,.articleSeul .
Il convient donc de rajouter à notre fonction .article p:first-letter, la fonction complémentaire .articleSeul p:first-letter.

Ainsi donc, le code CSS suivant définit, pour la lettrine utilisé dans ce blog :
un fond, une bordure qui donne un effet relief (outset), la couleur de la lettre elle-même, la valeur de la marge intérieure (padding), une marge extérieure au "carré" de fond à droite non nulle (margin-right), la hauteur de l'interligne (line-height), la taille et la position par rapport au texte...

.article p:first-letter,.articleSeul p:first-letter{
       background-color:  #CC6699;
       border: 2px outset #FF3E96;
       color: #C1FFC1;
       padding: 0.1em;
       margin-right: 3px;
       line-height: 1em;
       font-size: 3em;
 /*--Lettrine vers le bas--*/
       float: left;

/*--- OU lettrine vers le haut:
       float: none;
       vertical-align:bottom;*/
}

Attention, il faut choisir entre deux valeurs de float (la deuxième est ici en commentaire), sinon, c'est la dernière valeur énoncée qui fait loi.

Avec le CSS, c'est toujours le dernier qui a parlé qui a raison.

C'était la pensée du jour.
Bonne nuit, les gens.

EDIT : Une petite précision tout de même: pour que ça marche, il faut absolument que le code source de l'article commence par la lettre elle-même et non par < div ... > ou < br /> , ... etc .

par Zoélie publié dans : TIP's
 

Temps Perdu

Juillet 2005
L M M J V S D
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
             
<< < > >>

C'est où ???

A votre tour !

Créez votre blog gratuit

Syndication

  • Feed RSS 2.0
  • Feed ATOM 1.0
  • Feed RSS 2.0
 
 
Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus