5568 sujets

Sémantique web et HTML

Ancre dans zone scrollable sous firefox

Bonjour,

J'ai déja beaucoup lu à ce sujet sur votre forum et dans la faq mais je ne trouve pas la réponse à mon problème. je me permets donc de vous soumettre mon problème.

J'ai dans ma page html un calque scrollable dans lequel j'ai plusieurs ancres. celle-ci sont définies et appelées dans le même calque. Tout fonctionne sous IE (6 et 7). Je peux même appeler ma page à partir d'une page externe avec le calque directement positionné sur la partie que je désire.

Sous Firefox (1.5.0.9) les ancres ne fonctionnent pas du tout.

J'ai parcouru ce site et vu que j'utilisais <a name="ancre"> qui ne fonctionne pas sous firefox. J'ai donc changé et mis un identifiant dans une balise <b> puisque tous les endroits où je voulais aller avait un titre en gras mais cela n'a pas fonctionné. J'ai pensé que c'était parce qu'on ne pouvait pas mettre un identifiant dans une balise de forme, j'ai donc mis une balise div : <div id="ancre"> à la place de mon <a name ..> original. Cela ne fonctionne toujours pas sous firefox, le calque ne bouge pas d'un poil. cela fonctionne toutefois toujours sous IE. J'ai pas tout perdu. Smiley lol

Je commence donc à me demander sérieusement s'il est possible d'utiliser une ancre dans un calque scrollable sous firefox. Merci par avance de votre réponse.
kangoo a écrit :
J'ai donc changé et mis un identifiant dans une balise <b> puisque tous les endroits où je voulais aller avait un titre en gras mais cela n'a pas fonctionné.

Si t'as un titre en gras, on utilisera plutôt un <hx> (h1, h2, etc.), et on le mettera en gras avec le CSS

kangoo a écrit :
J'ai pensé que c'était parce qu'on ne pouvait pas mettre un identifiant dans une balise de forme

La règle d'or en terme de développement, c'est de ne jamais penser, mais plutôt de lire la doc Smiley lol On peut mettre un id sur tout ce qu'on veut (même sur <html> s'il le faut).

kangoo a écrit :
Cela ne fonctionne toujours pas sous firefox, le calque ne bouge pas d'un poil.

C'est qu'il y a un problème ailleurs Smiley decu Et comme ma boule de crystal est cassée, si tout pourrais nous montrer la page, ce serait plus facile de voir Smiley smile
Modifié par FlorentG (15 Jan 2007 - 10:09)
L'« idéal » pour une ancre est la forme suivante :
<a href="" name="mon-ancre" id="mon-ancre"></a>


Mais pas sûr effectivement que l'on puisse afficher une zone précise d'un bloc avec barre de défilement en appelant une ancre. Il faudrait voir ce que ça donne avec les différents navigateurs. Là dessus, il me semble qu'il y a une solution simple : ne pas faire de bloc de contenu de hauteur fixe avec barre de défilement interne. Ceux-ci posent de nombreux problèmes d'ergonomie (le cas des ancres en étant un). Il est donc conseillé de les réserver à des contenus courts et précis (du moins si on tient absolument à les utiliser) et de laisser les contenus principaux se dérouler normalement dans la page.
FlorentG a écrit :


La règle d'or en terme de développement, c'est de ne jamais penser, mais plutôt de lire la doc Smiley lol On peut mettre un id sur tout ce qu'on veut (même sur <html> s'il le faut).


En fait je me suis remise récemment au html et je n'ai jamais trouvé sur le web un vrai manuel (javascript+css+html) de référence exhaustif où l'on pourrait trouver par exemple toutes les propriétés possibles d'une classe etc..


Je vous prépare un exemple.
kangoo a écrit :
je n'ai jamais trouvé sur le web un vrai manuel (javascript+css+html) de référence exhaustif

Bonjour,
Je pense qu'il faut que tu cherche des manuels indépendants les uns des autres, car tu ne trouveras jamais un manuel tout en un exhaustif. D'ailleurs exhaustif est un bien grand mot à mon humble avis Smiley langue , vu que les technologies évoluent quand même régulièrement entre les nouvelles balises, méthodes et surtout les versions navigateurs... Smiley sweatdrop

Par contre ...
Je pense qu'en CSS, il ya moyen de trouver un truc pas mal et en français en plus Smiley murf
Modifié par Cygnus (15 Jan 2007 - 12:06)
J'ai fait un petit exemple pour tester et bien je suis rassurée cela fonctionne sous firefox (cf code ci-dessous). Sinon auriez-vous une solution pour que le texte ne soit pas horriblement collé à droite. Pour éviter cela j'ai fait un second calque un peu décalé à l'intérier de calque qui scrolle, je commence à suspecter cette méthode de faire tout planter sous firefox.

merci pour vos liens.




<!DOCTYPE HTML "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	

<HTML>

<BODY>

zone scrollable :


<DIV style="{
position: absolute;
background-color: #aaaaaa; 
top: 100px; 
left: 100px; 
width: 300px;
height: 200px;
overflow: auto;
visibility: visible;
z-index: 0;
}">

<a href="#ancre1">lien vers ancre1</a><br>
<a href="#ancre2">lien vers ancre2</a><br>
<a href="#ancre3">lien vers ancre3</a><br>
<br><br>
<b id="ancre1">ancre1</b><br><br>
Ainsi, toujours poussés vers de nouveaux rivages, <br>
Dans la nuit éternelle emportés sans retour, <br>
Ne pourrons-nous jamais sur l'océan des âges <br>
Jeter l'ancre un seul jour ? <br>
<br>
<br>
Ô lac ! l'année à peine a fini sa carrière, <br>
Et près des flots chéris qu'elle devait revoir, <br>
Regarde ! je viens seul m'asseoir sur cette pierre <br>
Où tu la vis s'asseoir ! 
<br><br>
<b id="ancre2">ancre2</b><br><br>
Ainsi, toujours poussés vers de nouveaux rivages, <br>
Dans la nuit éternelle emportés sans retour, <br>
Ne pourrons-nous jamais sur l'océan des âges <br>
Jeter l'ancre un seul jour ? <br>
<br>
<br>
Ô lac ! l'année à peine a fini sa carrière, <br>
Et près des flots chéris qu'elle devait revoir, <br>
Regarde ! je viens seul m'asseoir sur cette pierre <br>
Où tu la vis s'asseoir ! 
<br><br>
<b id="ancre3">ancre3</b><br><br>
Ainsi, toujours poussés vers de nouveaux rivages, <br>
Dans la nuit éternelle emportés sans retour, <br>
Ne pourrons-nous jamais sur l'océan des âges <br>
Jeter l'ancre un seul jour ? <br>
<br>
<br>
Ô lac ! l'année à peine a fini sa carrière, <br>
Et près des flots chéris qu'elle devait revoir, <br>
Regarde ! je viens seul m'asseoir sur cette pierre <br>
Où tu la vis s'asseoir ! 
<br><br>
</DIV>


</BODY>
</HTML>

Modifié par kangoo (15 Jan 2007 - 13:40)
Administrateur
Bonjour Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Merci beaucoup pour vos liens.

J'ai enfin trouvé ce qui ne fonctionne pas. Ce n'était pas du tout lié aux calques mais j'avais fait des liens sur des images et cela ne fontionne pas pour les ancres sous firefox :

Cela fonctionne sous firefox :
<a href="#up">Up</a>


Cela ne fonctionne pas sous firefox :
<a href="#up"><img src="./img/up.gif"></a>



étonnant non ?
Sujet clos
Aller à