styler les d'une

Le
Thierry B.
Bonjour.

Je suis pas mal newbie en CSS, et je me bataille depuis un moment
avec un truc qui devrait être simple

Je voudrais remplacer le bullet dans une UL par un morceau de
texte avec des couleurs différentes, et une marge ajustable.

Je suis arrivé à ça:

--
ul li {
list-style-type: none;
}
li:before {
content: "+";
background-color: yellow;
color: black;
margin: 1em;
}
--

qui décrit en gros ce que je veux faire, mais en fait, non, ça
ne remplace pas le bullet, et ça casse l'indentation classique
des listes.

Oui, je connais la solution avec une image, mais non, ce n'est
pas ce que je cherche

Merci à tous.

--
"Internet, ça fait pas riche, mais ça fait aisé : tu veux les trucs que
t'as partout ailleurs pour les parisiengs, tu trouves. Mais pour les
traitements pour la mouche de l'olive, tin, t'as que dalle !"
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
ASM
Le #22027761
En réponse à Thierry B. qui écrivit, en date du : 12/09/07 12:38, le
message suivant :
Bonjour.

Je suis pas mal newbie en CSS, et je me bataille depuis un moment
avec un truc qui devrait être simple...



mais qui ne fera rien dans IE, non ?

Je voudrais remplacer le bullet dans une UL par un morceau de
texte avec des couleurs différentes, et une marge ajustable.



http://www.yoyodesign.org/doc/w3c/css2/indexlist.html
http://www.yoyodesign.org/doc/w3c/css2/generate.html#q11


<HTML>
<HEAD>
<TITLE>Créer une liste avec des marqueurs</TITLE>
<STYLE type="text/css">
OL { list-style-type: none; }
LI { margin: 0.5em auto; }
LI:before {
display: marker;
content: "+";
marker-offset: 3em; /* inefficace ! */
margin-right: 3em;
background-color: yellow;
color: black;
/*
padding: 1px;
border: 1px solid;
*/
}
</STYLE>
</HEAD>
<BODY>
<p>le "marker-ofset" ne fonctionne pas avec mon Fx 2.0.0.6
<OL>
<LI> Voici le premier item.
<LI> Voici le deuxième item.
<LI> Voici le troisième item.
</OL>
</BODY>
</HTML>
Thierry B.
Le #22027611
--{ ASM a plopé ceci: }--

Je suis pas mal newbie en CSS, et je me bataille depuis un moment
avec un truc qui devrait être simple...



mais qui ne fera rien dans IE, non ?



C'est quoi IE ?

http://www.yoyodesign.org/doc/w3c/css2/indexlist.html
http://www.yoyodesign.org/doc/w3c/css2/generate.html#q11



Je vais regarder ça.

OL { list-style-type: none; }
LI { margin: 0.5em auto; }
LI:before {



Bon, ce code fait la même chose en gros que le mien,
il ne _remplace_ pas la puce par un petit bout de texte.


--
J'aime beaucoup cette tribune patatoïde des alpages.
ASM
Le #22027591
En réponse à Thierry B. qui écrivit, en date du : 13/09/07 3:13, le
message suivant :
--{ ASM a plopé ceci: }--

OL { list-style-type: none; }
LI { margin: 0.5em auto; }
LI:before {



Bon, ce code fait la même chose en gros que le mien,
il ne _remplace_ pas la puce par un petit bout de texte.



Ha?
Ben ... dans mon Firefox 2.0.0.6 si !
je vois bien le + à fond jaune un peu écarté du texte

Sinon ... à quoi bon donner un exemple ?
ASM
Le #22027581
En réponse à ASM qui écrivit, en date du : 13/09/07 8:50, le message
suivant :
En réponse à Thierry B. qui écrivit, en date du : 13/09/07 3:13, le
message suivant :

Bon, ce code fait la même chose en gros que le mien,
il ne _remplace_ pas la puce par un petit bout de texte.



Ha?
Ben ... dans mon Firefox 2.0.0.6 si !



de même que dans :

Opera 9.0
Camino 0.8
Safari 2.0.4

mais pas iCab 3
Olivier Miakinen
Le #22027571
Le 13/09/2007 03:13, Thierry B. a écrit :
--{ ASM a plopé ceci: }--

Je suis pas mal newbie en CSS, et je me bataille depuis un moment
avec un truc qui devrait être simple...



mais qui ne fera rien dans IE, non ?



C'est quoi IE ?



C'est une vraie question, ou bien une façon de dire que quelqu'un qui
utilise slrn sur ZorkOS n'a pas à se soucier d'un truc aussi commun ?
Thierry B.
Le #22027561
--{ ASM a plopé ceci: }--

Bon, ce code fait la même chose en gros que le mien,
il ne _remplace_ pas la puce par un petit bout de texte.



Ben ... dans mon Firefox 2.0.0.6 si !
je vois bien le + à fond jaune un peu écarté du texte

Sinon ... à quoi bon donner un exemple ?



Regarde l'exemple: http://la.buvette.org/vrac/demo.html
J'ai mis dans des frames pour voir cote à cote, tu
comprendras ce que je veux dire...

--
Beaucoup moins que la collection de saloperies avec des options à rallonge,
et devant être aboutés avec des bidules comme les pipes et autres trucs
abracadabrantesques qui ont fait la fortune de Unix.
--{ MT, in fcol.debats }--
ASM
Le #22027531
En réponse à Thierry B. qui écrivit, en date du : 13/09/07 9:57, le
message suivant :
--{ ASM a plopé ceci: }--

Bon, ce code fait la même chose en gros que le mien,
il ne _remplace_ pas la puce par un petit bout de texte.


Ben ... dans mon Firefox 2.0.0.6 si !
je vois bien le + à fond jaune un peu écarté du texte



Regarde l'exemple: http://la.buvette.org/vrac/demo.html



Ha!? OK !

alors une 'tite variante ? :
Patrick 'Zener' Brunet
Le #22027481
Bonjour.

"Thierry B."
Je suis pas mal newbie en CSS, et je me bataille depuis un moment
avec un truc qui devrait être simple...

Je voudrais remplacer le bullet dans une UL par un morceau de
texte avec des couleurs différentes, et une marge ajustable.
[...]



En fait c'est souvent IE le boulet de l'histoire... :-(

J'ai eu ce problème pour styler le chiffre dans les listes ordonnées
(ol/li), en lui donnant une police et une couleur différentes du texte de
l'item.

Après nombre d'essais, le seul truc portable que j'aie trouvé consiste à
mettre tout le texte du li dans un span, ce qui permet d'appliquer un style
différent au numéro et au texte de l'item...

Chez moi ça se fait assez facilement parce que le code est précompilé, donc
c'est une règle SED qui insère le span. Sinon, ce sera forcément à la
main...

Notez bien que transformer une ol en ul n'est pas neutre du point de vue de
la sémantique, même si visuellement ça donne l'effet voulu. En lecture
vocale, ou lors d'une analyse logique du contenu, on va trouver une
hiérarchie d'items là où ils devraient être équivalents.
Je me demande si on ne peut pas utiliser list-style-image avec un format
vectoriel qui dessinerait du texte, et donc permettrait de conserver des ul.

Hope it helps.

--
Cordialement.
--
/**************************************************
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
**************************************************/
Publicité
Poster une réponse
Anonyme