Se connecter avec
S'enregistrer | Connectez-vous

list-style-type inactif

Dernière réponse : dans Programmation

Bonjour,
J'ai un souci: sur un menu le list-style-type ne marche pas, et sur une liste il marche, sur la même page html, et sur la même page css.
Voici les codes du menu (là où ça marche pas):
  1. <div id="leftbloc">
    

  2. 	<div id="profil">
    

  3. 	<img src="/profil/profil.jpg" width="57"/><br /><br />
    

  4. 		Prénom: <strong>Bidule</strong><br />
    

  5. 		Né le: <strong>date de naissance</strong><br />
    

  6. 	<br />
    

  7. 	<a href="/profil/index.php"><strong>Voir le profil</strong></a></p>
    

  8.             </div>
    

  9.  
  10.             <div id="menu">
    

  11. 	      <ul>
    

  12. 		<li><a href="/lien1.php">Lien 1</a></li>
    

  13. 		<li><a href="/lien2/index.php">Lien 2</a></li>
    

  14. 		<li><a href="/lien3/index.php">Lien 3</a></li>
    

  15. 		<li><a href="/lien4/index.php">Lien 4</a></li>
    

  16. 		<li><a href="/lien5/index.php">Lien 5</a></li>
    

  17. 	      </ul>
    

  18.              </div>
    

  19.  
  20. 	<div id="lastpicture">
    

  21. 	<p>Dernière photo :<br />
    

  22. 	<a href="/photos/lastpicture.jpg"><img src="/photos/thumb_lastpicture.jpg" height="76" /></a></p>
    

  23. 	</div>
    

  24. </div>

  1. #leftbloc {
    

  2. 	margin: 0;
    

  3. 	padding: 0 10px 0 10px;
    

  4. 	position: relative;
    

  5. 	float: left;
    

  6. 	width: 130px;
    

  7. 	height: 450px;
    

  8. 	color: #EEE;
    

  9. 	font-size: 11px;
    

  10. 	background: #444;
    

  11. }
    

  12.  
  13. #profil {
    

  14. 	margin: 0;
    

  15. 	padding: 0 0 0 10px;
    

  16. 	position: relative;
    

  17. 	float: left;
    

  18. 	text-align: left;
    

  19. 	line-height: 140%;
    

  20. 	text-indent: -10px;
    

  21. }
    

  22.  
  23. #profil a, #profil a:visited, #profil a:active {
    

  24. 	margin: 0;
    

  25. 	padding: 0;
    

  26. 	color: #EEE;
    

  27. 	text-decoration: underline;
    

  28. 	width: 100%;
    

  29. 	font-size: 11px;
    

  30. 	font-weight: normal;
    

  31. }
    

  32.  
  33. #profil a:hover {
    

  34. 	text-decoration: none;
    

  35. }
    

  36.  
  37. #profil img {
    

  38. 	margin: 10px 0 0 10px;
    

  39. 	padding: 0;
    

  40. 	border: 1px solid #DDD;
    

  41. }
    

  42.  
  43. #menu {
    

  44. 	margin: 0;
    

  45. 	padding: 10px 0 0px 0px;
    

  46. 	position: relative;
    

  47. 	float: left;
    

  48. 	width: 100%;
    

  49. 	text-align: left;
    

  50. 	border-top: 1px solid #888;
    

  51. 	border-bottom: 1px solid #888;
    

  52. }
    

  53.  
  54. #menu ul {
    

  55. 	margin: 0;
    

  56. 	padding: 0 0 10px 10px;
    

  57. 	list-style-type: square;
    

  58. }
    

  59.  
  60. #menu ul li {
    

  61. 	margin: 0 0 10px 0;
    

  62. 	padding: 0;
    

  63. 	line-height: 130%;
    

  64. }
    

  65.  
  66. #menu a, #menu a:visited, #menu a:active {
    

  67. 	margin: 0;
    

  68. 	padding: 0;
    

  69. 	color: #EEE;
    

  70. 	text-decoration: underline;
    

  71. 	width: 100%;
    

  72. 	font-weight: bold;
    

  73. }
    

  74.  
  75. #menu a:hover {
    

  76. 	text-decoration: none;
    

  77. }
    

  78.  
  79. #lastpicture {
    

  80. 	margin: 10px 0 0 0;
    

  81. 	padding: 0 0 0 10px;
    

  82. 	position: relative;
    

  83. 	float: left;
    

  84. 	text-align: left;
    

  85. }
    

  86.  
  87. #lastpicture img {
    

  88. 	margin: 5px 0 0 0;
    

  89. 	padding: 0;
    

  90. 	border: 1px solid #DDD;
    

  91. }

Et voici les codes de la liste (là où ça marche):
  1. <div id="rightbloc">
    

  2. 	<p class="archives"><strong>Archives photos :</strong><br />
    

  3. 	<ul>
    

  4. 		<li><a href="archives/octobre2006.html" class="archive">Octobre 2006</a></li>
    

  5. 		<li><a href="archives/novembre2006.html" class="archive">Novembre 2006</a></li>
    

  6. 		<li><a href="archives/decembre2006.html" class="archive">Décembre 2006</a></li>
    

  7. 		<li><a href="archives/janvier2007.html" class="archive">Janvier 2007</a></li>
    

  8. 		<li><a href="archives/fevrier2007.html" class="archive">Février 2007</a></li>
    

  9. 		<li><a href="archives/mars2007.html" class="archive">Mars 2007</a></li>
    

  10. 		<li><a href="archives/avril2007.html" class="archive">Avril 2007</a></li>
    

  11. 		<li><a href="archives/mai2007.html" class="archive">Mai 2007</a></li>
    

  12. 		<li><a href="archives/juin2007.html" class="archive">Juin 2007</a></li>
    

  13. 	</ul>
    

  14. </div>

  1. #rightbloc {
    

  2. 	margin: 0;
    

  3. 	padding: 2px 0 0 10px;
    

  4. 	width: 140px;
    

  5. 	height: 450px;
    

  6. 	position: relative;
    

  7. 	text-align: left;
    

  8. 	color: #EEE;
    

  9. 	line-height: 150%;
    

  10. 	font-size: 12px;
    

  11. 	float: left;
    

  12. 	font-weight: normal;
    

  13. 	background: #444;
    

  14. }
    

  15.  
  16. #rightbloc ul {
    

  17. 	margin: 10px 0 0 30px;
    

  18. 	padding: 0;
    

  19. 	list-style-type: square;
    

  20. }
    

  21.  
  22. #rightbloc ul li {
    

  23. 	margin: 0;
    

  24. 	pading: 0;
    

  25. 	font-size: 11px;
    

  26. }
    

  27.  
  28. #rightbloc a, #rightbloc a:visited, #rightbloc a:active {
    

  29. 	margin: 0;
    

  30. 	padding: 0;
    

  31. 	color: #EEE;
    

  32. 	text-decoration: underline;
    

  33. }
    

  34.  
  35. #rightbloc a:hover {
    

  36. 	text-decoration: none;
    

  37. }

Je serais reconnaissant si vous y jetiez un ti coup d'oeil rapide, juste histoire de me donner une piste pour que je comprenne où ça coince.
Merci.

Autres pages sur : list style type inactif

Lassé par la pub ? Créez un compte

Je n'ai pas regardé en détail, mais juste un truc m'étonne : pourquoi tu attribues ton 'list-style-type' à tes <ul> et pas directement à tes <li> ?

Sinon, tu as essayé en "neutralisant" les 'margin' et 'padding' ? C'est à dire en ne précisant d'abord aucune valeur (pour laisser au navigateur le soin de gérer par lui-même), puis en indiquant des valeurs à "0" ? Parfois, il peut arriver que la puce soit en dehors des limites du bloc qui contient la liste à cause de certaines combinaisons de 'margin' et 'padding'.. Surtout que la puce se retrouve généralement en dehors de la liste, la valeur de list-style-position' étant par défaut 'outside'..

Même remarque pour l'usage de 'float' : c'est une sorte de mise à l'écart du flux régulier, pas aussi prononcée que 'position: absolute' puisque le flux régulier contourne l'objet en 'float' et ne peut donc aucunement le chevaucher, mais pour le reste c'est du kif.. Quant à un objet en 'float' avec une largeur à 100%, ça me parait être une bonne source d'erreurs...

Tous tes objets du bloc gauche sont en 'float: left' dans un bloc qui est déjà lui-même en 'float: left'.. Je ne suis pas certain que ce soit très bon.. A mon avis, ils devraient être déclarés en 'display: block' (retour à la ligne après chaque objet) et être en 'position: relative' si besoin..

Mais je n'ai pas regardé plus loin qu'un survol de ton code ;) ..

:jap: 

you were right.... j'ai mis tous les margin et padding du bloc menu en commentaire et les puces sont apparues. o, je le saurais la prochaine fois. J'ai également supprimé les float:left; inutiles mais ca avait rien changé. au moins c'est fait.
Merci beaucoup. bonne journée à toi.
Lassé par la pub ? Créez un compte

Créer un nouveau sujet