Videos streaming images jeux et buzz
Connexion






Perdu le mot de passe ?

Inscrivez-vous maintenant !
Menu Principal
Communauté



Poum45
CSS - Couleur des puces [résolu]
 0  #1
Je poste trop
Inscrit: 03/12/2007 23:03
Post(s): 59592
Karma: 4214
Salut les dev'

Je coince sur un truc que je trouve trop bête.
Soit quelque chose m’échappe, soit j'ai une lacune.

Bref...

Je cherche à attribuer une couleur aux puces d'une liste.
Cela, sans modifier la couleur du texte

exemple

<ul>
<li>Coucou ma puce est rouge et moi (le texte) je suis noir</li>
</ul>

Évidement, je ne veux pas passer par l'utilisation d'une image pour la puce. De même, je ne veux aucun style dans le code source (pas de class ni id ou span...)

Je pensais m'en sortir avec ul{color:#ff0000;} mais noooooon
Idem avec li{color:#ff0000;}

Quant aux list-style... :bizarre: j'ai cherché, je ne vois pas:-x

Vous savez comment s'en sortir ?

Contribution le : 04/12/2012 16:02

Edité par Poum45 sur 5/12/2012 4:47:34
Signaler

Invité
Re: CSS - Couleur des puces
 0  #2
FantômeInvité
"color" c'est pour le texte !

Je crois que ce n'est pas possible sans faire une puce.img.

Regarde ici :
http://www.siteduzero.com/forum-83-739505-p1-couleur-des-puces-en-css.html

Contribution le : 04/12/2012 19:16
Signaler

Poum45
Re: CSS - Couleur des puces
 0  #3
Je poste trop
Inscrit: 03/12/2007 23:03
Post(s): 59592
Karma: 4214
Merci Grandasse 😉

Tu penses bien que j'ai vérifié tous les sites avant de poster ici 🙂
Un copain m'a parlé de "before" pour les LI.

Je suis sûr qu'il y a un moyen de passer outre cette restriction du CSS... mais ou quoi comment ? 😃

Contribution le : 04/12/2012 20:56
_________________
Les mouches m'agacent mais Le Croco c'est par là
Signaler

Invité
Re: CSS - Couleur des puces
 0  #4
FantômeInvité
T'en en train de me dire que t'as vérifié partout que c'était pas possible et là tu viens nous demander ? 😃
En plus tu te mets de ces contraintes...

Bref, j'ai trouvé un truc mais c'est pas politiquement correct.

Je me suis basé sur ça :
http://www.alsacreations.com/article/lire/1210-donnez-du-style-a-vos-listes.html

En bas de page, ils montrent que le CSS peut afficher un compteur pour les listes ordonnées.

Je m'en suis servi en donnant au texte la même couleur que le fond.

Problème : la taille de la puce.

<!DOCTYPE html>
<html> 
 <head> 	
  <title>Poum45</title> 	 	
  <style type="text/css"> 
  li {     
   list-style-type: none;     
   margin-bottom: 5px; 
  } 
  li:before {     
   content: counter(repas);     
   padding: 0 5px;     
   margin-right: 5px;     
   vertical-align: top;     
   background: blue;     
   color: blue;      
   -moz-border-radius: 60px; 	
   border-radius: 60px;	 
  } 	
  </style> 
 </head> 
<body> 	
		
<ul> 			
<li>Bonjour</li> 			
<li>Au revoir</li> 		
</ul> 
</body> 
</html>

Contribution le : 04/12/2012 22:20
Signaler

Ombrefilao
Re: CSS - Couleur des puces
 0  #5
Je m'installe
Inscrit: 07/09/2008 19:20
Post(s): 368
Sinon tu peux peut-être mettre un <span> dans le <li> ?

Grandasse je me suis permise d'utiliser ton code pour l'exemple 😉


<!DOCTYPE html> 
<html>
<head> 	  
<title>Poum45</title>
<style type="text/css">
li{
margin-bottom: 5px;
color: blue;}       

.black{color: #000;
</style>
</head>
<body>
<ul>
<li><span class="black">Bonjour</span></li>
<li><span class="black">Au revoir</span></li>
</ul>
</body>
</html>


EDIT : sinon à partir de l'article d'Alsacreations cité par Grandasse j'ai essayé ça, et ça à l'air de marcher sur FF et IE. Après, n'ayant jamais utilisé :before, je ne sais pas si c'est sémantiquement correct :gratte: :

<!DOCTYPE html>
<html>
<head>
<title>Poum45</title>
<style type="text/css">
li{
margin-bottom: 5px;
list-style-type: none;
}

li:before{
content:"- ";
color: blue;}
</style>
</head>

<body>
<ul>
<li>Bonjour</li>
<li>Au revoir</li>
</ul>
</body>
</html>

Contribution le : 04/12/2012 22:57
Signaler

Invité
Re: CSS - Couleur des puces
 0  #6
FantômeInvité
OOooh Yeah !

Autant la première méthode, il ne la voudra pas, mais la seconde, on tiens là solution !

Il faut juste changer le - en • et penser à se mettre en utf-8 pour ne pas avoir de soucis.

donc ça donne : 

<!DOCTYPE html>
<html>
<head>
<title>Poum45</title>
<meta charset="utf-8">
<style type="text/css">
li{
margin-bottom: 5px;
list-style-type: none;
}

li:before{
content:"• ";
color: blue;}
</style>
</head>

<body>
<ul>
<li>Bonjour</li>
<li>Au revoir</li>
</ul>
</body>
</html>


EDIT : pour la doc concernant le :before :after -> https://developer.mozilla.org/fr/docs/CSS/:before

Contribution le : 04/12/2012 23:44
Signaler

Blackjackdavey
Re: CSS - Couleur des puces
 0  #7
Je poste trop
Inscrit: 05/01/2010 17:02
Post(s): 10748
Karma: 1080
j'adore ce genre de topic où je pige rien mais je lis quand même tout car je suis intrigué par ce monde merveilleux mais inaccessible à mon esprit 🙂

Contribution le : 05/12/2012 01:45
Signaler

Hyste
Re: CSS - Couleur des puces
 0  #8
J'aime glander ici
Inscrit: 03/12/2009 00:33
Post(s): 5736
Karma: 136
Citation :

Blackjackdavey a écrit:
j'adore ce genre de topic où je pige rien mais je lis quand même tout car je suis intrigué par ce monde merveilleux mais inaccessible à mon esprit :-)


Haha toi aussi ? ^^ la curiosité c'est comme ça qu'on apprend 🙂

Contribution le : 05/12/2012 01:55
Signaler

Poum45
Re: CSS - Couleur des puces
 0  #9
Je poste trop
Inscrit: 03/12/2007 23:03
Post(s): 59592
Karma: 4214
Citation :

Grandasse a écrit:
Autant la première méthode, il ne la voudra pas, mais la seconde, on tiens là solution !


Effectivement...Yeah. Vous y êtes 😃

En effet Ombrefilao, je ne voulais pas de <span> et autres, juste une liste toute nue 🙂

En tout cas bravo @ vous deux, c'est super sympa.

Merci encore

PS : comme quoi Grandasse, faut parfois oser demander sur un forum comme Koreus 😉 Et dire que j'avais cherché un peu partout, notamment chez Alsa 😉

Contribution le : 05/12/2012 04:43
Signaler

Ombrefilao
Re: CSS - Couleur des puces [résolu]
 0  #10
Je m'installe
Inscrit: 07/09/2008 19:20
Post(s): 368
@ Blackjackdavey et Budhill : vous avez raison, la curiosité n'est pas toujours un défaut effectivement. En même temps il y a sûrement des sujets que vous connaissez bien et sur lesquels je serais comme une poule devant une fourchette 😛

@ Poum45 : Je me disais aussi que l'astuce des <span> tu n'aimerais pas 😃
Sur Alsa je trouve que les explications ne sont pas toujours très accessibles au premier abord, c'est peut-être pour ça que le :before ne t'avait pas de suite inspiré ? :gratte:

En tout cas merci Grandasse pour la fin de la soluce et la doc, j'ai appris des choses aussi 😉

Contribution le : 05/12/2012 09:11
Signaler

Invité
Re: CSS - Couleur des puces [résolu]
 0  #11
FantômeInvité
Ben merci à vous aussi, au final j'y ai appris des choses. 😉

"Koreus, le site où tous les membres se couchent moins cons le soir (sauf si on va dans la CDL)"

Et à propos de la curiosité, c'est comme ça que j'ai appris les langages web 🙂

Contribution le : 05/12/2012 13:11
Signaler

Dakitess
Re: CSS - Couleur des puces [résolu]
 0  #12
J'aime glander ici
Inscrit: 02/12/2007 22:32
Post(s): 6537
Karma: 99
Y'avait plus simple :

Plutôt que de te servir du package utf-8, tu prends l'Imputenc. De là, tu place un "nocoloraffect{}" en encadrant soigneusement ton texte, et tu aura bien tes puces en rouge et ton texte en noir !

Et puis si les puces sont rouges, y'a pas bon, elles sont probablement venimeuses, va consulter un Véto. Il te conseillera sans doute de saupoudrer ton code de Levure Alsa, mais ça coute rien d'essayer. Enfin presque.

http://alimentation.twenga.fr/levure-chimique-alsa.html

Contribution le : 05/12/2012 22:21
Signaler

Poum45
Re: CSS - Couleur des puces [résolu]
 0  #13
Je poste trop
Inscrit: 03/12/2007 23:03
Post(s): 59592
Karma: 4214
:lol: Rayman 😉

Pour info, si j'avais la main sur les CSS ça ne poserait pas de problème.
Dans ce cas précis, nous avons développé un générateur de site (pas un CMS) qui va automatiquement créer les CSS (et les pages, la charte web, les menus... par la même occasion).

Contribution le : 05/12/2012 22:32
Signaler

Dakitess
Re: CSS - Couleur des puces [résolu]
 0  #14
J'aime glander ici
Inscrit: 02/12/2007 22:32
Post(s): 6537
Karma: 99
Haha, non mais je trollais, j'y comprend que dalle à vos bêtises là ^^ Le seul code que je touche me vient de mes deux dernières semaines : Latex... Édition avancée de document. C'pas mal d'ailleurs ^^ Pas mal prise de tête aussi xD Mais ça passe, la communauté est importante et y'a beaucoup de doc, même en français.

Bon courage en tout cas !

Contribution le : 05/12/2012 22:37
Signaler


 Haut   Précédent   Suivant






Suivez Koreus sur : ▶︎ Mastodon ▶︎ Twitter ▶︎ Telegram ▶︎ Dailymotion | Flux RSS | Koreus Network | Archives

Si vous êtes l'auteur d'un élément de ce site, vous pouvez si vous le souhaitez, le modifier ou le supprimer
Merci de me contacter par mail. Déclaré à la CNIL N°1031721.