Mercredi 13 juillet 2005
3
13
/07
/Juil
/2005
00:00
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 .
Oui, mais... T'es trop rapide pour moi, l'article n'était pas fini ...
Bises de la dragonne
Un blog de plus dans les liens de la faq ;)
Bonne journée à toi zoélie!
Je m'en vais de se pas faire ma popote!!
amicalement
Sugi
je suis venu te faire une petite visite depuis l'article sur le Stabat Mater où tu as eu l'amabilité de me laisser un commentaire:http://autobahn.over-blog.com/article-189399.html
bravo et merci
Tacite
Merci à toi pour tous ces petits trucs qui finisse par améliorer nos blog! ;-)
bonne fin d'aprèm
Amicalement
Sugi
Ca a fait joliment plante MSN explorer (oui, je sais, quelle idee d'utiliser ca!), Ca ressemblait a rien, les lettrines etaient deformees, et ca plantait en 30 sec...
Serai-je la seule a connaitre ces deboires?
Hello Zoélie,
Juste un petit détail qui a son importance : la lisibilité & fluidité des textes des pages (sa couleur, ici le texte est vert sur fond brun clair n'est pas réellement agréable à lire..).
Les fioritures.. déco et style, ok c chouette mais cela est lun peu lourd à l'affichage des pages (selon les pc), ptre que si il y avait moins de déco, cela serait plus clair à voir et surtout le temps pour y afficher !
ps. les astuces présentes ici sont une innitiative fort appréciée, merci d'être là avec toutes ces bonnes choses à se mettre "sous la dent du blog" !
Amicalement, john
Bonjour Zoélie !!!
Il n'y a pas à dire, j'adore tes trucs & astuces !
A bientôt !
C'est super clair, vos explications !!!
Pour moi, tout ça, débutant en blog, c'est du petit chinois ! Ne pourriez-vous pas être un peu plus explicite (plus clair !) dans le détail !!! Si dans 15 jours, je n'ai pas réussi à placer une
seule lettre en tête de mes articles, je crois que j'irai demander autre part !!
oh , la , la , c 'est compliqué !
je ne vais pas y arriver !
allez voir monsite , je parviens malgré tout a faire des petites choses sympas
bonne contiuation
Corinne