Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

:first-letter sans float

4 réponses
Avatar
Olivier Masson
Bonjour,

j'essaie d'avoir un menu horizontal, centré dans le conteneur, dont
chaque lien commence par un lettre plus grosse.
J'ai donc souhaité utiliser :first-letter mais ça ne fonctionne pas sauf
si je mets le lien (ou le <li> dans lequel est le lien, le cas échéant)
en float.
Pourtant, je lis "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."

Est-ce une mauvaise implémentation de CSS dans les navigateurs... ou
dans mon cerveau ?

Merci.

4 réponses

Avatar
ASM
Olivier Masson a écrit :

Est-ce une mauvaise implémentation de CSS dans les navigateurs... ou
dans mon cerveau ?



mon cerveau non encombré de ce que peuvent dire les spécs, me permet de
faire :

<style type="text/css">
ul { list-style:none; margin: 0px; padding: 0px; height: 2em; }
li { width: 100px; float: left; margin: 0px; }
li:first-letter { font-size: 2em; }
</style>
<ul>
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
</ul>

qui fonctionne sous FF2

Mais j'ai pu mal comprendre la question ?

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Avatar
ASM
ASM a écrit :
qui fonctionne sous FF2



li a { display: block; }
li a:first-letter { font-size:2em; }

fonctionne bien aussi :-)


Pour que le first-letter passe en lettrine il faut qu'il puisse flotter,
et comment flotter dans un inline ? (balise A standard)

ainsi ne fonctionnera pas :

span:first-letter { font-size:2em; color:red}

Bonjour <span>olivier</span>

mais donnera qque chose (de moche) si on précise :

span { float: left } /* equiv à passer en block */




(me semble qu'il n'y a pas besoin de spécs tordues pour comprendre)
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Avatar
Olivier Masson
ASM a écrit :
ASM a écrit :
qui fonctionne sous FF2



li a { display: block; }
li a:first-letter { font-size:2em; }

fonctionne bien aussi :-)




Oui mais alors je dois spécifier les dimensions du block.
Mon problème est de mettre un style différent à la première lettre de
chaque rubrique d'un menu centré horizontalement, avec en plus, une
image en hover.

Plus simplement : http://gp1.free.fr/marchepas/menu_centre_H/
où j'essaie d'avoir l'image de fond du hover dans toute sa hauteur +
utiliser :first-letter (ça va se terminer pas un span...).
Avatar
ASM
Olivier Masson a écrit :

Plus simplement : http://gp1.free.fr/marchepas/menu_centre_H/



vu.

où j'essaie d'avoir l'image de fond du hover dans toute sa hauteur +
utiliser :first-letter (ça va se terminer pas un span...).



Je ne vois pas d'autre soluce

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé