Clip et Liste ul li en float et display: inline;

Bonjour,

J'ai la liste suivante :

<ul>
<li id="ardoise">Ardoise</li>
<li id="codebarre">Code Barre</li>
</ul>

Je met cette liste en display: inline et float: left.

Puis je cache les textes "Ardoise" et "Code Barre" par avec des CLIP.

Je met donc des images en background et pousse les textes hors de la boîte avec un padding-left.

ul{
float: left;}
li{
display: inline; list-item :none;}
li#ardoise {
background-image: url(ardoise.gif);
background-repeat: no-repeat;
background-position: top left;
padding-left: 358px;
position: absolute;
clip: rect(auto 358px 94px auto);
clip: rect(auto, 358px, 94px, auto);
height: 94px;
}
li#codebarre{
background-image: url(codebarre.gif);
background-repeat: no-repeat;
background-position: top left;
padding-left: 358px;
position: absolute;
clip: rect(auto 358px 94px auto);
clip: rect(auto, 358px, 94px, auto);
height: 94px;
}

Et là cela merde, les images se superposent, les clips ne font plus leur effet et le texte apparaite en plus.

testé sous mozilla et IE6.

Des idées ?

Merci !

Les problèmes rencontrés sont prévisibles, vu l'utilisation de position:absolute sur les <li>: cette propriété les fait s'empiler les uns sur les autres

Une position:relative sur <ul> n'y changera rien. Une série de clip successifs n'est possible que si **chaque** élément clipé a son propre conteneur en position relative.

C'est aisé à réaliser dans une liste de liens (<li> en position relative, les <a> en position absolue).

Ici... il faudrait utiliser un <li><span>...</span></li>, avec <li> en position relative et <span> en position absolue.

Reste à voir si c'est vraiment utile : pour quelle raison veux-tu utiliser le clipping ici ? Est-ce que de simples <img src="..." alt="..."> dans les <li> ne conviendraient pas mieux ?

Oui j'ai surtout réfélchis en terme d'accéssibilité après avoir mis en application les CLIP sur un logo suite à ton tutorial.

C'est pour une série de vignette qui permettent d'afficher des images. Je voulais surtout les mettre en background de CSS pour permettre de faire des hover avec des effets d'opacité sur les images. Voila pourquoi je me suis dit qu'il pouvait être bon de mettre un texte et de cacher ce texte par les clips.

Qu'en penses tu ?