28173 sujets

CSS et mise en forme, CSS3

Bonjour, j'ai un problème en faisant un menu en css.
J'ai des sous menus qui sont en fait des listes de liens.
Mais je n'arrive pas à aligner les icones de liste et les liens.
je mets une image pous que ce soit plus clair
http://img354.imageshack.us/img354/5231/menulj0.jpg

le css (en partie):
#menu ul li ul
{
  margin: 0px 0px 0px 50px;
  padding: 0px 0px 0px 0px;
  width: 166px;
  background: transparent;
  
}
#menu ul li ul li
{
  margin: 10px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  list-style-type: disc;
  list-style-position: inside;
  background: pink;
  width: 166px;
  float: left;

}

#menu ul li ul li a
{
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  background: lightgreen;
  width: 140px;
  float: right;
  position: relative; left: auto; right: auto

}


le html:

<div id='menu'>
	<h1>Navigation</h1>
	<ul>
		<li id='menu1'><a href="">Accueil</a></li>
		<li id='menu2'><a href="#">Photos</a>
			<ul id='smenu2'>
				<li id='smenu21'><a href="#">Intro</a></li>
				<li id='smenu22'><a href="#">Voyage en Californie</a></li>
				<li id='smenu23'><a href="#">Voyage à Vérone</a></li>
				<li id='smenu24'><a href="#">Séjour à Grindelwald</a></li>
				<li id='smenu25'><a href="#">Macros</a></li>
				<li id='smenu26'><a href="#">Divers</a></li>
			</ul>
		</li>
  </ul>
</div>



J'ai essayé de mettre un "display: inline;" mais dans ce cas, l'icone de liste en forme de disque disparait ...
float: left sur les li et float: right sur les a, ça fait un float de trop, non ?

De plus, je me demande si la puce ne se comporte pas comme un caractère lorsqu'on est en list-style-position: inside. Auquel cas, ça serait logique, avec le passage des a en flottant, d'avoir un retour à la ligne.
j'ai essayé un peu toutes les combinaisosn de float, mais ca ne change rien.

et sinon pour le list-style-position: inside, ca m'est un peu égal que cela soit inside ou outside, en fait ce que je veux c'est que le point et le lien soient alignés, mais j'y arrive pas...

en mettant outside au lieu de inside, ca me donne ca:

http://img377.imageshack.us/img377/6761/menuoutsidewd0.jpg

c'est pas aligné ...
juste pour dire que le
position: relative; left: auto; right: auto

n'a rien à foutre là, j'avais oublié de supprimer
mais ca ne change rien au pb
Bon j'ai fini par trouver une solution à mon problème

#menu ul li ul
{
  margin: 0px 0px 0px 50px;
  padding: 0px 0px 0px 0px;
  width: 166px;
  background: transparent;
  
}
#menu ul li ul li
{
  display:inline;
}

#menu ul li ul li a
{
  list-style-type: disc;
  list-style-position: outside;
  display:list-item;
  margin: 0px 0px 0px 0px;
  padding: 3px 0px 3px 0px;
  background: lightgreen;
  width: 166px;
}


en fait il fallait mettre display:list-item; dans le a

merci qd même mpop de m'avoir répondu Smiley biggrin