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 !"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <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>
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<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>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <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.
--{ 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...
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.
--{ 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 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 }--
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
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
alors une 'tite variante ? : <http://cjoint.com/?jnnolJAsVD>
Patrick 'Zener' Brunet
Bonjour.
"Thierry B." a écrit dans le message news:
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 **************************************************/
Bonjour.
"Thierry B." <tth@prout.stex> a écrit dans le message news:
o5skr4-80b.ln1@prout.stex...
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
**************************************************/
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 **************************************************/
