Ecartement entre la puce et le texte[résolu]

Bonjour,

Je me doute que le sujet a dù être vu et revu mais je n'ai pas trouvé de solution. Comment indiquer l'écartement entre le texte et la puce sous IE. Firefox met un écartement correct. Je suis parvenu à réglé la marge grâce au FAQ mais là je patauge.

Merci de votre aide.
Modifié par nelumbo (25 Nov 2006 - 17:13)

Hello,

Essaye d'appliquer un padding-left sur les <li> de tes <ul>.

ul li{ padding: 0 0 0 10px}

ça ne fonctionne pas.

Ben je viens de tester.

Dans un premier temps applique une bordure sur tes li pour voir si tu les atteinds bien.

 ul li{borber: 1px solid green}

Ensuite," pour mon cas perso", j'ai du faire des styles pour IE pour obtenir le même résultat visuel que sur Ffox , dans un premier temps avec des !important et ensuite tu déplace la règle pour IE (la seconde) via des commentaires conditionnels.

 
ul li{
padding: 0 0 0 4px !important;      /*Pour Firefox*/
padding: 0 0 0 27px                    /*Pour IE*/ 
}            

Modifié par Hum (25 Nov 2006 - 15:41)

Aucune bordure n'apparait !

J'utilise en fait 2 directive pour gérer mes puces:

ul {
    list-style-type: disc;
    list-style-image: url(image/puce.gif);
    list-style-position: inside;
    padding-left: 5px;
    margin-left: 5px;
    text-align: left;
    }

.flecherouge {
    list-style-image: url(image/puce3.gif);
    list-style-position: inside;
    padding-left: 5px;
    margin-left: 5px;
    text-align: left;
   }

Le probleme vient peut etre de là

Ce qui aiderai, ce serait que tu donnes la partie HTML correspondante à ton css.

Mais si en appliquant une bordure sur tes li tu la vois pas c'est pas bon, en l'occurence je ne vois pas de bordure dans ton code là.

Puisque tu applique une image en guise de puce , tu peux virer :

list-style-type: disc;

Si ta classe .flecherouge est donnée à tes li mets le list-style-image là et non sur les deux styles.
Modifié par Hum (25 Nov 2006 - 16:38)

Puisque c'est une image que tu utilises, pourquoi ne pas tout simplement créer l'espace dans celle-ci plutôt que d'essayer de le faire dans ta css?

ul {
    list-style-image: url(image/puce.gif);
    list-style-position: inside;
    padding-left: 5px;
    margin-left: 5px;
    text-align: left;
    borber: 1px solid green;
      }

.flecherouge {
    list-style-image: url(image/puce3.gif);
    list-style-position: inside;
    padding-left: 5px;
    margin-left: 5px;
    text-align: left;
    borber: 1px solid green;
   }

Le code html correspondant une liste de puce:

...acé se distingue notamment par la
profusion.... </p>
<ul class="flecherouge">
  <li><a href="animaux/phenix.japon.php">Ph&eacute;nix
du japon</a></li>
  <li><a href="forum/">Parlons animaux</a></li>
</ul>
<script type="te....

largowin a écrit :
Puisque c'est une image que tu utilises, pourquoi ne pas tout simplement créer l'espace dans celle-ci plutôt que d'essayer de le faire dans ta css?

C'est une solution, mais j'obtiendrai un espace beaucoup plus important sur firefox.


Il commence à me gonfler IE.

J'opte pour ta solution Largowin !
Je vais essayé de trouver un équilibre entre les deux.

Merci, beaucoup pour votre aide.

nelumbo a écrit :


C'est une solution, mais j'obtiendrai un espace beaucoup plus important sur firefox.

Tu peux faire deux images différentes, une pour Firefox et une autre pour Explorer.

largowin a écrit :
Tu peux faire deux images différentes, une pour Firefox et une autre pour Explorer.

Ca me parait un peu bourrin.

Il me semble que le support de "list-style-image" est un peu bancal. Pourquoi ne pas utiliser "background-image" ? Le résultat sera a priori plus consistant.

a écrit :
Il me semble que le support de "list-style-image" est un peu bancal. Pourquoi ne pas utiliser "background-image" ? Le résultat sera a priori plus consistant.

J'ai du récupérer ce code dans le fin fond de la toile

-------------------------------------------------------

a écrit :
Tu peux faire deux images différentes, une pour Firefox et une autre pour Explorer.

Comment ?

Avec le "hack" (qui n'en est pas tout à fait un puisqu'il s'agit d'un argument valide) !important

En CSS, si un attribut est répété deux fois au sein d'une même class ou id c'est le dernier nommé qui sera appliqué. Dans le code ci-dessus, !important indique que peu importe si un attribut est répété, celui appliqué sera celui qui contient la règle !important. Sauf que IE ne comprend pas cette règle... Il applique donc la dernière règle.

Par exemple:

ul {

    list-style-image: url(image/puce.gif)!important;
    list-style-image: url(image/puce_ie.gif);
    list-style-position: inside;
    padding-left: 5px;
    margin-left: 5px;
    text-align: left;
    borber: 1px solid green;
      }

cool, je vais tester ça .

Sacré IE.

largowin a écrit :

Tu peux faire deux images différentes, une pour Firefox et une autre pour Explorer.

Au lieu de faire juste un !important sur le padding, toi tu veux faire un !important sur un background-image (inapproprié), et du coup deux images différentes.

Pourquoi faire simple quand on peut faire compliquer

La différence est que tu devra certainement quand même jouer aussi sur les padding de mainère separées car en background-image ton image sera dessous ton texte de <li>, et non avant celui ci, comme avec un list-style-image...tu devra donc decaler ton texte.

Voilà ce que je te propose

ul.flecherouge         /*Pour positionner la liste <ul>*/
{
    margin: 0 0 0 5px;
    text-align: left;
}

ul.flecherouge li       /*Pour styler tes éléments de liste <li>*/
{
    list-style-image: url(image/puce.gif);
    padding: 0 0 0 5px!important;
   padding: 0 0 0 25px;

}

HTML

<ul class="flecherouge">

  <li><a href="animaux/phenix.japon.php">Ph&eacute;nix

du japon</a></li>

  <li><a href="forum/">Parlons animaux</a></li>
</ul>

Modifié par Hum (26 Nov 2006 - 01:01)

Hum a écrit :

Pourquoi faire simple quand on peut faire compliquer

T'as tout à fait raison. J'ai proposé cette façon de faire parce que j'avais encore en tête un positionnement d'image... Un peu de recul ne fait jamais de tort finalement..