menu et puce

Version imprimable

menu et puce

Bpnjour,

Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
.ssmenu li a {
font-weight:bold;
text-decoration:none;
color:#FF8811;
width: 100%;
padding-top:5px;
padding-left:13px;
}
.ssmenu li {
  list-style-type: disc;
  color:#FF8811;
  margin-left:-20px;
}
.ssmenu {/*on définit un conteneur pour le ss-menu*/
width: 100%;
font-family: verdana, arial;
font-size: 95%;
text-align: left;
margin-left:3px;
font-weight:bold;
}

Et voici le code HTML :

Code:

1
2
3
4
5
6
7
8
 
		<div class="ssmenu">
		<ul >			
		    <li><a href="theme_connaissance.html">Représentation des connaissances</a></li>
			<li><a href="theme_economique.html">Evaluation économique</a></li>
			<li><a href="theme_socio_technique.html">Evaluation socio-technique</a></li>
		</ul>
		</div>

Le problème, c'est que ma puce est calée en bas et mon texte en haut (vu que par exemple représentation de connaissances s'écrit sur deux lignes).
Quel est le problème, je ne comprends vraiment pas.
Merci d'avance

12/03/2005, 21h10
mr32

j'ai essayé ton code, y a pas de problème...
essaye de donner plus d'info, ou donne un lien sur ta page que l'on puisse y regarder :)

autant pour moi, sur Firefox ça marche bien, sous IE parcontre ça bug :)

le problème vient de là

Code:

width: 100%;

je te propose comme solution:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .ssmenu li a { font-weight:bold; text-decoration:none; color:#FF8811; padding-top:5px; } .ssmenu li { list-style-type: disc; color:#FF8811; margin-left:-20px; padding-left:13px; } .ssmenu {/*on définit un conteneur pour le ss-menu*/ width: 100%; font-family: verdana, arial; font-size: 95%; text-align: left; margin-left:3px; font-weight:bold; }

14/03/2005, 10h07
babafredo

J'ai essayé ce que tu m'as dit mais ça ne change rien!
:roll:
15/03/2005, 11h24
Invité
Utilise une puce en background de tes LI, en supprimant celle de départ et en faisant un petit padding pour décaler ton texte afin qu'il ne se superpose pas à la puce. Pour une puce de 5px / 5px :
Code:

1 2 3 4 5 LI { padding-left:15px; background:url(puce.gif) left no-repeat; }
Ca devrait suffire ;)
15/03/2005, 17h28
babafredo

Merci pr ton aide, cela marche avec en plus un petit background-position pour rectifier la hauteur de la puce.
Merci :lol: