18073 sujets

Questions générales et questions de débutants

Concernant les <li> [Résolu]

Pages :
Bonjour à tous ,

En fait voici mon problème j'ai deux listes biens dictinctes et je souhaiterai
supprimer les puces sur les deux ...ce que je ne comprends pas c'est que sur la première 
list-style-type: none;
fonctionne très bien mais sur la seconde ça ne va pas ...

exemple:

<ul id="menugauche">
	<li id="mg"><a id="menu1" title="" accesskey="1" href=""target="blank">Port-Folio<span><img src="v_portfolio.jpg"></span></a></li>
	<li id="mg"><a id="menu2" title="" accesskey="2" href=""target="blank">Carnets<span><div style="position:absolute; left:-264px; top:0px;"><img src="v_carnet.jpg"></div></span></a></li>
	</ul>
tout ça dans un div ....
et dans la feuille de style j'ai ça 
#menugauche, li { /* utilisation de liste pour le menu */
list-style-type: none;  /* suppression des puces de liste */
margin:0;
padding:0;
}
et je ne comprends pas pourquoi cela ne fonctionne pas ...

dans mon autre div avec le li sans les puces (qui fonctionne donc) j'ai 
<ul id="menuhaut">
<li><a href="index.html" accesskey="1">Accueil</a> - </li>
<li><a href="securise.html">Espace privé</a></li>
</ul>


et dans le style : 
#menuhaut {
margin:0;
padding:0.1em 0.5em 0.1em 0;
list-style-type: none;
background-color:#108781;
color:white;
text-align:right;
}



Dcon voilà ce que je cherche à comprendre c'est comment supprimer ces puces...je ne vois pas...help please Smiley confus

franky
Modifié par franky (25 Aug 2005 - 19:08)
Avant de commencer à débugger tes CSS essaie de valider ton html parce que dans le code que tu donnes on voit déjà :
- 2 id identiques ("mg") sur 2 éléments,
- 1 espace manquant entre href="" et target="blank" à 2 reprises
- 1 div dans un span

Ça ne corrigera peut-être pas ton problème mais au moins tu seras sûr que ça ne vient pas de là.
C'est fait....
En effet rien à voir...

Je suis en plein test désolé pour les erreurs en html ...je tape tout à la main
( pas de soft genre dream) donc il arrive que je fasse des erreurs en effet...

merci pour ton aide
Tu as une , entre menugauche et li. Essaye de l'enlever pour voir.
#menugauche ul { /* ul fils de menugauche */
 list-style-type: display-none;
}

#menugauche ul li /* li fils de ul fils de menugauche


ne pas confondre avec la , => s'applique à la liste de sélecteurs

body, table, td, select {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
}


Édit par Igor: Merci de prendre soin de bien baliser les extraits de code
Modifié par Igor (23 Aug 2005 - 21:14)
Salut,

Ben non désolé ça ne marche pas, ça me déssepère...
Je ne sais vraiment pas si cela va être possible finalement..

Smiley decu

Merci pour ton aide
Il me semble que list-style-type de fonctionne pas avec les "<li>" par ici le site.

Il faudrait alors dans ta CSS plutot utiliser (à confirmer) :

#menugauche ul {
list-style-type: none; 
blablablablabla }

Édit par Igor: Merci de prendre soin de bien baliser les extraits de code

Je ne suis pas sur mais à essayer.
Modifié par Igor (23 Aug 2005 - 21:15)
Franky, pourrais-tu nous donner un lien vers le document posant problème ? Parce que là c'est difficile de te répondre si on n'a pas le contexte. Par exemple tu parles de 2 listes mais d'après ce que j'ai compris tu donnes le code de la 2nde en premier, c'est pas évident à analyser, surtout que l'ordre est très important dans une feuille de style.

Damino, #menugauche est déjà une liste donc je mettrais plutôt :
ul#menugauche {
    list-style-type: none;
}


[EDIT : mais c'est déjà ce que fait le code de Franky...]
Modifié par djfeat (23 Aug 2005 - 13:05)
Bonjour,

Bizarre cette différence de traitement sur le css :

#menugauche, li {


et

#menuhaut {


A mon avis il y a une piste à fouiller !
franky a écrit :
C'est fait....
En effet rien à voir...

Je suis en plein test désolé pour les erreurs en html ...je tape tout à la main
( pas de soft genre dream) donc il arrive que je fasse des erreurs en effet...

merci pour ton aide


Télécharge donc Arachnophilia, tu pourras le configurer pour inclure des portions de code à ta convenance, au moment où il faut et là où il faut !

Cela n'évite pas toutes les erreurs mais la coloration syntaxique te permet d'en visualiser un certain nombre.

Et c'est gratuit !
djfeat a écrit :
Franky, pourrais-tu nous donner un lien vers le document posant problème ? Parce que là c'est difficile de te répondre si on n'a pas le contexte. Par exemple tu parles de 2 listes mais d'après ce que j'ai compris tu donnes le code de la 2nde en premier, c'est pas évident à analyser, surtout que l'ordre est très important dans une feuille de style.

Damino, #menugauche est déjà une liste donc je mettrais plutôt :
ul#menugauche {
    list-style-type: none;
}


[EDIT : mais c'est déjà ce que fait le code de Franky...]



Effectivement tu as raison je mets ce truc en ligne ...
: http://franck.sacco.free.fr/test/accueil.html

voilà et merci encore à tous pour ce coup de main ...


Smiley smile
Ah bah voilà, tout de suite ça va mieux Smiley smile

Tu as un */ en trop à la ligne 129.

En prenant soin de valider HTML et CSS tu t'en serais rendu compte tout seul.
En fait cele ne marche pas sous IE ....les puces sont apparentes uniquement sous IE ....Y'a til une solution ?

Merci
Pour la 3e fois : valide ton code !

La syntaxe correcte c'est :

list-style-type: none;


et non :

list-style-type: display-none;
djfeat a écrit :
Pour la 3e fois : valide ton code !

La syntaxe correcte c'est :

list-style-type: none;


et non :

list-style-type: display-none;


J'ai validé mon code...du moins en grande parti...Sur tes conseils...mais j'ai toujours ce satané décalage sous IE j'ai mis en ligne l'image pour que ce soir plus parlant .. je vais continuer à chercher d'où cela peut provenir ..

C'est super frustant tout ça

Smiley decu
Bonjour,

Moi je dis oulalala ya de l'ordre a mettre dans tes listes. C'est l'embrouilamini dans ton <ul id="menugauche">. J'ai fait bcp de nettoyage et te propose ceci. L'idée étant de pouvoir déplacer ton text-align:center. Pour cela j'ai dissocié le tas de code qu tu attribues a UL que moi j'attribue a un bloc parent DIV pour ne laisser (presque) plus que text-align:center dans l'UL :


#menugauche {
position: absolute;
height: 282px;
width: 216px;
background: transparent url(coco1.jpg) top left no-repeat;
}

#menugauche ul {
list-style-type:none;
text-align:center;
}

#menugauche li{
display: inline;
}


Et surtout :


<div id="menugauche">

<ul>

<li ><a id="menu1" title="" accesskey="1" href="" target="blank">Port-Folio<span></span></a></li>
<li ><a id="menu2" title="" accesskey="2" href="" target="blank">Carnets<span></span></a></li>
<li ><a id="menu3" title="" accesskey="3" href="" target="blank">News</a></li>
<li ><a id="menu4" title="" accesskey="4" href="http://culturgraphe.free.fr/blog/index.php" target="blank">Le Blog Culturgraphe</a></li>
<li ><a id="menu5" title="" accesskey="5" href="" target="blank">Contact</a></li>

</ul>

</div>


Ca marche sur IE6 FF/mac et Safari j'ai pas testé sur les autres mais ya pas de raisons…

Qu'en penses-tu ?
Modifié par zzzazzz (25 Aug 2005 - 10:36)
zzzazzz a écrit :
Bonjour,

Moi je dis oulalala ya de l'ordre a mettre dans tes listes. C'est l'embrouilamini dans ton <ul id="menugauche">. J'ai fait bcp de nettoyage et te propose ceci. L'idée étant de pouvoir déplacer ton text-align:center. Pour cela j'ai dissocié le tas de code qu tu attribues a UL que moi j'attribue a un bloc parent DIV pour ne laisser (presque) plus que text-align:center dans l'UL :



Ca marche sur IE6 FF/mac et Safari j'ai pas testé sur les autres mais ya pas de raisons…

Qu'en penses-tu ?


bah écoute je te remercie , c'est vrai que cela aère un peu le code ( pardon je ne suis pas encore spécialiste du genre
Smiley smile

Mais tu peux vérifier par toi même il n'y a aucun changement notoire..

Merci
Franky

Sur l'ancienne version du code en supprimant la partie bug sous IE5
ça marche 

#menugauche {
       display: inline;  /*correction pour IE5 et IE5.5 */
}


Mais c'est pas le but non plus Smiley biggrin

Donc mystère ... Smiley cligne
Pages :
Sujet clos
Aller à