j'utilise fréquemment sur mon site un dispositif d'affichage particulier utilisant javascript et offrant un aspect appréciable. Ce dispositif se compose de deux éléments : Une liste ordonnée et une 'div' servant de conteneur à l'information. Grace à javascript, le survol des éléments de la listes modifie le contenu de la 'div'. Or après la lecture de cet article, j'ai décidé de modifier ce dispositif en vue de permettre aux visiteurs utilisant ff mais ne disposant pas de l'environnement javascript de pouvoir accéder aux informations qu'il contient. Voici le résultat :
Code : Tout sélectionner
<ol class="LAD">
<li onmouseover="this.className='Active';" onmouseout="this.className='';">
<h3>Titre1</h3>
<div>Infos1</div>
</li>
<li onmouseover="this.className='Active';" onmouseout="this.className='';">
<h3>Titre2</h3>
<div>Infos2</div>
</li>
<li onmouseover="this.className='Active';" onmouseout="this.className='';">
<h3>Titre3</h3>
<div>Infos3</div>
</li>
</ol>Code : Tout sélectionner
ul.LAD li
{
list-style: none;
}
ul.LAD li h3
{
text-align: right;
width: 175px;
}
ul.LAD li div
{
position: absolute;
top: 515px;
left: 0;
width: auto;
padding: 0 20px;
margin: 0 195px 0 175px;
display: none;
}
ol.LAD li:hover div,
ol.LAD li.Active div
{
display: block;
}# D'abord un décalage de position du titre inférieurau survol des éléments des la liste sous ie. J'ai constaté que ce probleme ne se posait pas lorsque que le bord de li était définit à 1px ou plus ce qui n'est pas une solution en soit.
# Ensuite je désire insérer des fieldsets flottantes dans les divs d'information et faisant 50% de la taille du conteneur. Malheureusement, je ne trouve pas de solution satisfaisantes à ce probleme.
Voila. Si vous voyez des solutions ou au moins des conseils pour ces deux problemes, merci de vos réponses. Et bien sûr, si vous avez une idée pour faire cela autrement, you're welcome!