Navigation Horizontale + Ancres

Bonjour,

Cela fait maintenant un moment que je me force à bosser en XHTML Strict.
ex: Addlive , Groupe Terlat .

Le forum alsa et tous ses contributeurs est une mine d'informations pour tous ceux qui veulent avancer et se perfectionner dans une démarche professionelle de conception de sites web.

Hélas pour des aléas de recherche de résultats (je bosse à présent pour une petite agence web) et comme c'est souvent le cas, je délaisse un peu plus la validation XHTML au profit d'un code hybride pas souvent valide... ( ((. Veuillez m'en excuser aujourd'hui.

Si je viens poster un message sur ce forum c'est suite à une problématique que je souhaite résoudre. Je demande aujourdh'ui votre aide, car le cas est un peu vicieux. Je m'explique en 2 mots -> dans le titre, et plus en détails ci-dessous :

J'ai une barre de scroll horizontale qui contient des block (un <table de 1 ligne englobant dans chaque cellule un <a name > puis un div de contenu). Me demandez pas pourquoi j'ai mis des cellules (ça a réglé mon soucis de le faire fonctionner IE et Firefox mon cumul de div). Je me suis inspiré de cas concret sur http://www.brunildo.org/test/.

Le but de la manoeuvre est d'utiliser les ancres nommées afin de positionner la zone en overflow-x.

Plusieurs problèmes :

1 - Opera ne semble pas aimer le overflow-x --> il y a t-il une solution ?? ..
2- Je n'ai pas de mac à dispo.. Qqun pourrait-il me dire si cela fonctionne ? (sur safari et ff)
3 - vraissemblablement IE ne veut pas me scroller à droite sur les ancres....
C'est chiant. .masi je suis imposé de faire cette navigation..
3' - Sachant que j'ai réussi à faire fonctionner ce truc sur IE :

Modèle qui fonctionne

Merci pour les courageux ou les initiés...qui sauront trouver un truc et m'aider dans ce truc.

Donnez-moi vos conseils et trucs pratiques pour éviter de faire des erreurs (que j'ai surement fait).

URL pour tester :
Modifié par francis (22 Mar 2007 - 11:49)

Ah, les idées farfelues de design anti-ergonomique, sur lesquelles on sue dans le seul but d'être original et de perdre des clients.

Il me semble que ce genre de chose (contrôler le scroll) est faisable en Javascript.

On peut cependant rappeler les désavantages certains des blocs avec barres de défilement internes : pas d'accessibilité au clavier avec certains navigateurs (dont IE, il me semble), liens vers des ancres internes qui ne fonctionnent pas correctement, molette de la souris non fonctionnelle, etc.

Allez, bonne chance malgré tout, et pour la route deux indications :
- Pas de support de overflow-x et overflow-y dans Opera, Safari, Konqueror, et Firefox 1.0. Il s'agit de propriétés introduites par IE, reprises par Firefox (version 1.5 il me semble), et qui feront probablement partie de CSS 3.
- Il y a un tutoriel sur Alsacréations à propos des liens d'évitement... pour une meilleure compatibilité avec IE, le format d'ancre proposé est le suivant :

<a name="ancre" id="ancre" href="#"></a>

francis a écrit :
Je n'ai pas de mac à dispo.. Qqun pourrait-il me dire si cela fonctionne ? (sur safari et ff)

Sur Firefox, ça fonctionne pas trop mal... par contre, sur Safari, ça ne va pas du tout! C'est au point qu'il n'y a même pas de barre de défilement horizontale...

Merci pour vos réponses.

si je comprends bien ?

1. Sur Safari, Opera, Konqueror -> pas de support de overflow-x. (comment pourrais-je eventuellement pour un navigateur autre que IE (70% des users) dire que le overflow:auto (tant pis pour l'ascenseur grisé vertical) et pour IE de dire que overflow-x:scroll (juste celui-là)

2. je vais tester de rajouter le href="#" dans IE peut eter que ça me corrigera le bug qu'il ne veuille pas revenir à la première ancre.

3. Je vais tenter de bidouiller encore un peu.... ce truc là.

En tout cas merci bien à vous deux et à ceux qui ont lu ce message...
Modifié par francis (22 Mar 2007 - 17:17)

francis a écrit :
comment pourrais-je eventuellement pour un navigateur autre que IE (70% des users) dire que le overflow:auto (tant pis pour l'ascenseur grisé vertical) et pour IE de dire que overflow-x:scroll (juste celui-là)

À l'aide de commentaires conditionnels peut-être?

Petit rappel : overflow: auto ne signifie pas que l'on fait apparaitre deux barres de défilement : c'est le comportement d'un overflow: scroll.

Avec un overflow: auto :
- on aura une barre de défilement vertical si la hauteur du contenu dépasse la hauteur fixée pour l'élément ;
- on aura une barre de défilement horizontal si la largeur du contenu dépasse la largeur fixée pour l'élément (ou la largeur que l'élément aura prise automatiquement en s'adaptant à son conteneur, par exemple).

Dans la pratique, il y aura également quelques cas où, alors qu'on pensait que le contenu ne dépassait pas les dimensions de l'élément, on aura une barre de défilement non voulue : soit qu'on ait oublié un paramètre, soit que le comportement du navigateur soit inattendu ou même fautif. D'où l'intérêt, effectivement, des overflow-x et overflow-y.

Mais globalement et dans la plupart des cas un overflow: auto sera parfaitement fonctionnel (le design ainsi réalisé ne le sera pas, mais c'est un point que j'ai déjà abordé plus haut donc je n'y reviens pas).