Marvin Le Rouge a écrit :
@clb56 : Après tests, je ne vois vraiment pas comment ta méthode pourrait marcher, puisque
a) le lien en question n'aurait a priori pas de contenu, ce que je trouve étrange d'un point de vue sémantique
b) comment le lien, qui serait un descendant du li, pourrait-il influer sur son parent ou ses "siblings" ?
NB : Oui j'ai bien réussi à faire un lien qui recouvre tout le li. Mais ça ne marche pas sous IE Win (oh mon dieu quelle surprise )
à propos de a)
Le lien en question a tout son sens si tu lui en donnes un de contenu. En fait en terme de structuration html ce que tu souhaites s'énoncerait très bien ainsi :
<ul>
<li class="idli">
<h3>Titre</h3>
<img src="img.jpg" alt="texte de remplacement" />
<p>
Texte de commentaire de l'image
</p>
<p>
Texte de commentaire de l'image
</p>
<p>
Texte de commentaire de l'image
</p>
<a href="page.html">goto page</a>
</li>
</ul>
à propos de b)
Il y a effectivement quelques points à régler et les bug de IE ont un charme fou
Celà dit, rien d'insurmontable.
Il faut donner une hauteur à <li>, mettre un background à <a> (ça règle le problème pour IE, évidemment le background doit être transparent), se débrouiller pour faire disparaitre le texte du lien dans la version stylée.
Proposition de css :
.idli {
position:relative;
height:15em;
}
.idli a {
text-decoration:none;
text-indent:-5000px;
display:block;
position:absolute;
top:0;
left:0;
z-index:1000;
width:100%;
height:100%;
background:url(transparent.gif);
}
testé avec FF, opera, IE6 (le tout sous windows)
L'important de tout ceci à mon sens c'est que l'intégité du document html est complètement préservée.
++