Aller au contenu

first-letter et list items ?


Sebastien

Sujets conseillés

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 ?

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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
Lien vers le commentaire
Partager sur d’autres sites

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:

Lien vers le commentaire
Partager sur d’autres sites

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
Lien vers le commentaire
Partager sur d’autres sites

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 ^_^

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

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



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