Aller au contenu

Sujets conseillés

Posté

Je bosse sur un nouveau site :

http://s.billard.free.fr/lebouddhadit/

J'aimerai que chaque 1ère lettre des mots de mon "nuage de mots", soit en gras, ou en couleur, grace à "first-letter", mais je n'y arrive pas. Ca fonctionne pour un paragraphe, mais pour pour mes li... j'ai raté quelque chose ? Ce n'est pas possible ?

Posté

Salut Sébastien.

Çà marche très bien, même sur les listes. Et c'est supporté par tous les navigateurs.

Un exemple :

li:first-letter 
{
color: #f00;
font-size:xx-large

=> la première lettre de chaque item de la liste va s'afficher en rouge et en très grand.

Si çà ne marche pas sur ta page c'est normal: il n'y a aucun pseudo-format :first-letter dans ta CSS :whistling::P

Posté (modifié)

J'avais viré le first-letter ;) mais la je l'ai rajouté, et aucun résultat

Voici ce que j'ai mis :

li:first-letter{
font-weight: 800;
}

Et idem si je mets li a:first-letter

Modifié par Sebastien
Posté

Normal que çà ne marche pas non plus: aucun navigateur ne prend en charge (à ma connaissance) des valeurs numériques pour l'attribut font-weight (autre que la valeur 600 de mémoire)

Les valeurs "sûres" pour cet attribut sont normal, bold et bolder.

Un petit lien pour s'entraîner ;)

edit: super étrange cette règle CSS lancée par JS depuis sumhit :huh::fou:

Posté (modifié)

La regle css super etrange est une bidouille destinée à alimenter un script de statistiques ;)

Modifié par Sebastien
Posté (modifié)

Gargl, je viens de triturer ton code dans tous les sens. Çà ne marche que si les listes sont déclarées en block, et non en inline.

Je ne sais pas à quoi c'est dû :huh:

Modifié par Dudu
Posté (modifié)

Oui effectivement c'est vraiment dommage que first-letter ne marche pas en inline :(

Modifié par Sebastien
Posté

Bonjour,

Ce fonctionnement est précisé dans les spécifications

Le pseudo-élément :first-letter ne peut correspondre qu'avec une partie d'un élément de type bloc.
...mais
Ce genre de lettre initiale est assimilé à un élément de type en-ligne quand la valeur de sa propriété 'float' est 'none', et assimilé à un élément flottant autrement.

alors j'ai essayé ceci (génial Tryit Editor :P )

<html>
<head>

<style type="text/css">

li {
display: inline;
float: left;
}

li:first-letter{
font-weight: bold;
color: #ff0000;
}
</style>
</head>

<body>
<ul><li>item1</li>
<li>item2</li></ul>
</body>
</html>

Bon, il faut régler les espacements... mais ça semble fonctionner ^_^

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...