Style de liste à puces

Merci beaucoup !

J'ai bien fait d'arrêter de chercher seule, je n'aurais jamais pu trouver...!

Encore merci d'avoir pris le temps !

À votre service

Oups...

Désolée, ça ne fonctionne pas comme prévu... Enfin si, mais il me faudrait maintenant faire comprendre à l'outil qu'il ne doit pas appliquer le style <p> et <ul> par défaut en plus de ce que je lui ai spécifié avec la classe...

Je pensais que cela se ferait automatiquement en fait...



Je n'ai pas accès au CSS complet du site, mais est-ce qu'il ne faudrait pas ajouter une déclaration qui indique que lorsque j'utilise une classe, elle prend le pas sur le reste ?

Encore merci pour votre aide.

l_ane_bate a écrit :
Je n'ai pas accès au CSS complet du site, mais est-ce qu'il ne faudrait pas ajouter une déclaration qui indique que lorsque j'utilise une classe, elle prend le pas sur le reste ?

En CSS il faut écraser toutes les règles déjà définies. C'est toute la force - et la faiblesse - du Cascading Style Sheets...

Exemple "à l'aveuglette" pour les triangles en double : celui d'origine est une image (puce-bleu-vert.png), mon triangle est fait avec du code (border). Il faut donc soit supprimer l'image en ajoutant une règle (list-style-image:none;), soit supprimer mon code de bordures écrit en 3 lignes (border-color).

Après, difficile d'optimiser sans voir la feuille de style d'origine. Le plus simple serait de mettre un exemple en ligne avec l'appel à cette feuille de style, facile ensuite pour moi de corriger. Mais juste avec des captures d'écrans, dur dur...

Je ne te cache plus rien : j'ai un peu réécrit ton code... pardon. Le triangle vert est à nouveau une image, définie par "list-style-image".

Impossible d'obtenir la feuille de styles du site, tout ce à quoi les informaticiens consentent, c'est à ajouter du code que je leur fourni.

(Je ne leur jette pas la pierre, j'ai été mise au placard à ce poste parce que, c'est bien connu, n'importe qui peut coder en html et en CSS du jour au lendemain... Je comprends qu'ils ne veuillent pas que je trifouille leurs affaires, et pour les embêter le moins possible... je viens embêter les bonnes âmes de ce forum )

Ton code est devenu ceci :

.oocssInter {
        color: #000;
	background-color: #fff;
        list-style: none;
}

.oocssInter p {
        margin: 0;
        font-weight: bold;
	background-color: #e7e4df;
}

.oocssInter > ul {
        margin-top: 0;
	margin-left: 30px;
  	list-style-type: none;
}


.oocssInter > ul > li { 
    margin-top: 0;
  	list-style-image:url(http://...puce-bleu-vert.png)
}

Malgré la (rapide) formation que j'ai pu avoir, je ne comprends pas pourquoi les deux styles se superposent, il me semble que l'un devrait prendre le pas sur l'autre, non ?

(Je vais essayer d'insister pour avoir la feuille de styles, si ça ne t'ennuie pas de passer du temps à m'aider !)
Modifié par l_ane_bate (19 Jun 2015 - 16:32)

l_ane_bate a écrit :
Je ne comprends pas pourquoi les deux styles se superposent, il me semble que l'un devrait prendre le pas sur l'autre, non ?

Le nouveau style prend le pas que si la MÊME RÈGLE est réécrite (voila pour le petit 1). Mais aussi :
2. si l'élément d'origine n'a pas été sursélectionné (sinon il faudra en faire autant),
3. si la propriété !important n'a pas été ajoutée plus haut (sinon il faudra en faire autant).

Une optimisation, mais toujours en aveugle car le code donné ne suffit pas (il faut vraiment la feuille de style) :

.oocssInter {
  color: #000;
	background-color: #fff;
}

.oocssInter p {
  margin: 0;
  font-weight: bold;
	background-color: #e7e4df;
}

.oocssInter > ul {
  margin-top: 0;
	margin-left: 30px;
  list-style-type: none;
  list-style-image: url(http://...puce-bleu-vert.png)
}

l_ane_bate a écrit :
Je vais essayer d'insister pour avoir la feuille de styles, si ça ne t'ennuie pas de passer du temps à m'aider !

Cela ne m'ennuie pas .

- Si le site est déjà en ligne vous pouvez poster le lien, je trouverais moi-même les sources du style.
- Mais je peux comprendre que cela soit gênant d'un point de vu professionnel, dans ce cas là il faut effectivement récupérer le style vous-même. C'est très simple, pas besoin de demander aux devs : le CSS est toujours disponible côté client. Il est très facile de trouver la feuille de style, presque toujours appelée dans le <head> via une balise <link> (on peut aussi trouver du style directement dans la page, mais c'est plus rare, surtout pour ce genre de chose).

Exemple pratique pour trouver les CSS sur un de mes sites en développement : Scriptura.
1. Clic droit "afficher le code source de la page", le code source html interprété est disponible
2. faire un CTRL+F et rechercher les fichiers se terminant par ".css", il peut y en a plusieurs, comme dans mon cas, celui qui nous intéresse est celui-ci (il est ici minifié pour la production).

Si vous arrivez à trouver ce fichier par vous-même, il vous suffira de faire de même avec le site que vous cherchez à modifier pour trouver ses CSS.