Bonjour,
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 :
En ce qui concerne la feuille de style, les éléments apparant de la liste se présente à gauche - il y a également un menu de 200px de largueur aligné à droite - et l'information se place au centre en prenant la place restante. Voici le résultat :
Bien que le résultat soit probant sous ff comme ie, je rencontre quelques problemes :
# 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!
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 :
<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>En ce qui concerne la feuille de style, les éléments apparant de la liste se présente à gauche - il y a également un menu de 200px de largueur aligné à droite - et l'information se place au centre en prenant la place restante. Voici le résultat :
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;
}Bien que le résultat soit probant sous ff comme ie, je rencontre quelques problemes :
# 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!
