jeudi 9 mai 2013

Flèches "Messages plus anciens" et "Messages plus récents" (Suite et fin, j'espère...)

 Cette méthode a cependant quelques inconvénients... Je me suis rendu compte aujourd'hui que les liens qui se trouvent sous le tableau (table) ou le DIV flottant deviennent inactifs. On peut parfois jouer sur le "z-index" à condition que ces liens se trouvent eux-mêmes dans une "couche" (layer) avec un z-index supérieur mais ce n'est pas toujours possible. Peut-être ce phénomène disparaîtrait-il en n'utilisant pas de tableau. Je vais voir si c'est possible. (Article #1 de la série)

Tous les articles concernant ce "bidouillage" sont visibles dans le libellé liens précédent et plus récents

Ce code est à placer après <div class='blog-pager' id='blog-pager'> Chez moi, c'est la deuxième occurrence qui se trouve à la ligne 1425 (Ça peut être différent chez vous, mon modèle étant allégé). Les modifications précédentes (voir précédents messages) ont été annulées.

> Je viens d'essayer: 
  1. le tableau (table) n'est en effet pas indispensable (voir nouveau code plus bas pour la flèche gauche).
  2. Par contre, le problème des liens n'est toujours pas résolu. Que manque-t-il?
Nouveau code flèche gauche et droite (le seul élément vraiment nouveau est en rouge):

<div style="text-align: left; position: fixed; top: 50%; right: 50%; width: 570px; margin: auto; visibility : visible;z-index : 1;">
<a href="#top" target="_self"><img alt="" src="http://dl.dropbox.com/u/19586410/arrow-transparent-rounded-up.gif" title="HOME - ACCUEIL" /></a></div>
<div style="text-align: right; position: fixed; top: 50%; left: 50%; width: 570px; margin: auto; visibility : visible;z-index : 1;">
<a href="#top" target="_self"><img alt="" src="http://dl.dropbox.com/u/19586410/arrow-transparent-rounded-up.gif" title="HOME - ACCUEIL" /></a></div>


Autres modifs: <div name="essai" a été changé en <div seulement. J'ai aussi mis le code pour les deux flèches dans le même widget HTML-Javascript.

Ayé! J'ai trouvé!

Il suffisait de rajouter height: 0px; dans le code et... plus de problèmes!

<div style="text-align: left; position: fixed; top: 50%; right: 50%; width: 570px; height: 0px; margin: auto; visibility : visible;z-index : 1;">
<a href="#top" target="_self"><img alt="" src="http://dl.dropbox.com/u/19586410/arrow-transparent-rounded-up.gif" title="HOME - ACCUEIL" /></a></div>

<div style="text-align: right; position: fixed; top: 50%; left: 50%; width: 570px; height: 0px; margin: auto; visibility : visible;z-index : 1;">
<a href="#top" target="_self"><img alt="" src="http://dl.dropbox.com/u/19586410/arrow-transparent-rounded-up.gif" title="HOME - ACCUEIL" /></a></div>

Aucun commentaire:

Enregistrer un commentaire