Navigation


Vous pouvez utilisez ce module pour naviguer dans les Trucs & Astuces:

Voir le dernier article paru dans cette catégorie.


 

 

 

 

 


A vous de jouer !

Les Contes de

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 .

Par Zoélie - Publié dans : TIP's
Ecrire un commentaire - Voir les 13 commentaires
Retour à l'accueil

Commentaires

Et...... y'a un s'cret ?!

Oui, mais... T'es trop rapide pour moi, l'article n'était pas fini ...

Commentaire n°1 posté par DM le 14/07/2005 à 00h19
Avec tes conseil au se retrouve sous verre à côté de la bible de Gütemberg, ou à cotoyer les "riches heures du duc de Berry" tu nous mets d'office le goût de la particule Zoélie! J'imagine bien mon blog "classieux";...
Bises de la dragonne
Commentaire n°2 posté par walsong le 14/07/2005 à 10h59
Pas mal ;)

Un blog de plus dans les liens de la faq ;)
Commentaire n°3 posté par fabrice le 14/07/2005 à 11h36
Interressant interressant ^o^ A tester donc ^o^
Bonne journée à toi zoélie!
Je m'en vais de se pas faire ma popote!!

amicalement
Sugi
Commentaire n°4 posté par sugihyde le 14/07/2005 à 12h00
toujours un plaisir de te rendre visite
Commentaire n°5 posté par honorius le 14/07/2005 à 13h12
Superbe blog Zoelie.
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
Commentaire n°6 posté par Tacite le 14/07/2005 à 13h53
Salut ton blog est super!
Commentaire n°7 posté par Gusith le 14/07/2005 à 18h29
Voila, j'ai testé sur mon blog test et ca marche bien^^ je m'aprète à le mettre sur mon blog principale!!! J'ai suée devant mon pc(le pc aussi d'ailleur...)

Merci à toi pour tous ces petits trucs qui finisse par améliorer nos blog! ;-)

bonne fin d'aprèm

Amicalement
Sugi
Commentaire n°8 posté par sugihyde le 15/07/2005 à 17h02
Je vais jouer la rabat joie, mais chez moi ca a pas marche du tout!

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?
Commentaire n°9 posté par Vicky le 22/09/2005 à 08h00

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

Commentaire n°10 posté par ibios le 17/02/2007 à 14h15

Bonjour Zoélie !!!
Il n'y a pas à dire, j'adore tes trucs & astuces !
A bientôt !

Commentaire n°11 posté par Arquencielle le 11/04/2007 à 15h13

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 !!

Commentaire n°12 posté par lanbernenard le 19/10/2010 à 11h39

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

Commentaire n°13 posté par Poupie le 05/05/2011 à 13h20

Liens Techniques


Liens Over-Blog :

Liens de Sites Web :

Temps Perdu

Mai 2012
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 !

Syndication

  • Flux RSS des articles
Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus