Affichage de listes imbriquées.

Bonjour,

Je planche actuellement sur le design d'un petite application. J'ai un problème sur cette portion :

<ul class="menu">
 <li>Personne1
  <ul>
    <li class="action1"><a href="page1.php?id=1">action1</a></li>
    <li class="action2"><a href="page2.php?id=1">action2</a></li>
   </ul>
 </li>
 <li>Personne2
  <ul>
    <li class="action2"><a href="page1.php?id=2">action1</a></li>
    <li class="action2"><a href="page2.php?id=2">action2</a></li>
   </ul>
 </li>
 ...
</ul>

J'aimerai afficher les liens sous forme d'image via CSS. J'aimerai également que ces images arrivent à la suite de personne1 et personne2, en inline. Un peu comme çça :
* Personne1
* Personne2

Pour l'instant, j'arrive à ce résultat :
* Personne1
* Personne2

avec ça :

ul.menu{
    height: 20px ;
    margin: 0 ;
    padding: 0 ;
    list-style-type: none ;
    display:inline;
    
    
}
ul.menu li{
    float:left;
}

ul.menu li a.action1{
    clear:left;
    
    width: 16px ;
    line-height: 20px ;
    display: block ;
    background: url(img/action1.png) no-repeat ;
    text-indent: -2000px;
    
}
ul.menu li a.action2{
    width: 16px ;
    line-height: 20px ;
    display: block ;
    background: url(img/action2.png) no-repeat ;
    text-indent: -2000px;
}

Je ne vois pas ce qui cloche et comment faire passer ces images à droite du texte !

Merci par avance pour tout conseil !
Modifié par barberousse (24 Jan 2011 - 20:34)

Essaie de mettre tes <li> .action1 et .action2 en float.

Merci pour cette réponse.

Concrètement, voilà comment je m'en suis sorti. J'ai légèrement modifié le code HTML :

<ul class="menu">
 <li class="personneNom">Personne1</li>
 <li class="personneAction">
   <a href="page1.php?id=1" class="action1">Action 1</a>
 </li>
 <li class="personneAction">
  <a href="page2.php?id=1" class="action2">Action 2</a>
 </li>
 <hr class="separation">
 <li class="personneNom">Personne2</li>
 <li class="personneAction">
   <a href="page1.php?id=2" class="action1">Action 1</a>
 </li>
 <li class="personneAction">
  <a href="page2.php?id=2" class="action2">Action 2</a>
 </li>
 <hr class="separation">
</ul>

Et j'ai appliqué ce CSS :

li.personneNom{
	float:left;	
}
li.personneAction{
	float: left;
	list-style-type: none
}
li.personneAction a.action1{
	width: 16px;
	background: url(img/action1.png) no-repeat ;
	display: block;
	text-indent: -2000px;
	float: left;
	margin-left:2px;
	margin-right:2px;	
}
li.personneAction a.action2{
	width: 16px;
	background: url(img/action2.png) no-repeat ;
	display: block;
	text-indent: -2000px;
	float: left;
	margin-left:2px;
	margin-right:2px	
}

.separation{
	clear: both;
	visibility: hidden;	
}

J'ai le rendu que je souhaite, mais je ne sais pas si c'est très académique. Ca m'embête un peu de faire intervenir un <hr />.
Modifié par barberousse (25 Jan 2011 - 09:15)