Pb d'ancre sur safari

bonjour
j'ai ajouté dans une balise div contenant une série d'articles (donc avec scroll) une simple navigation par ancres pour se déplacer d'un article à l'autre.
cela marche très bien sur firefox mais pas du tout sur safari (et je ne parle même pas d'IExpl-biiiip !!...) :
les liens ne déclanchent aucun scroll...

voici la partie html :

  <div id="PresseAjax" class="popPresse">
	<a id="Art1" href="#Art2"><img src="images/bas.gif" class="boutonAncre" alt="article suivant"/></a>
	<h2>Aden</h2><h4>12 Mars 2003</h4><img src="images/rdpAjax_Aden.gif" alt="article Aden"/>
	<hr>
    	<a id="Art2" href="#Art3"><img src="images/bas.gif" class="boutonAncre" alt="article suivant"/></a>
	<a href="#Art1"><img src="images/haut.gif" class="boutonAncre" alt="article précédent"/></a>
	<h2>Libération</h2><h4>13 Mars 2003</h4><img src="images/rdpAjax_Libe1.gif" alt="article Libération 1"/>
	<hr>
	<a id="Art3" href="#Art4"><img src="images/bas.gif" class="boutonAncre" alt="article suivant"/></a>
    	<a href="#Art2"><img src="images/haut.gif" class="boutonAncre" alt="article précédent"/></a>
	<h2>Libération</h2><h4>20 Mai 2003</h4><img src="images/rdpAjax_Libe2.gif"" alt="article Libération 2"/>
	<hr>
    	<a href="#Art3"><img src="images/haut.gif" class="boutonAncre" alt="article précédent"/></a>
	<a id="Art4"></a>
	<h2>Zurban</h2><img src="images/rdpAjax_Zurban.gif" alt="article Zurban"/>
  </div>

et la partie css :

.popPresse {
z-index: 10;
position: absolute;
top: 0;
left: 50%;
width: 520px;
height: 100%;
margin-left: -260px;
padding: 0;
text-align: center;
overflow: auto;
background: white;
color: red;
line-height: 0;
}
.popPresse h2 {
margin-top: 1.5em;
}
.popPresse h4 {
font-weight: normal;
}
.popPresse hr {
width: 75%;
}
.boutonAncre {
z-index: 100;
float: right;
border: none;
}

je débute et passe encore des heures pour mettre en place le moindre bouton !!
mais là il y a un truc qui m'échappe... qui ne doit pas être bien compliqué vu que je n'en ai pas trouvé trace dans les posts...
non ?!
Modifié par spidflinch (08 Aug 2006 - 19:52)

Pour que ton ancre fonctionne le mieux possible, il faut l'associer à un nom (name), mais aussi à un identifiant (id).

<a name="ancre" id="ancre">...</a>
<a href="#ancre">Lien vers l'ancre</a>

A noter que tu peux très bien te passer de balises <a></a> pour créer une ancre (mais il semblerait qu'IE ne le gère pas parfaitement).

<h2 id="ancre">...</h2>
<a href="#ancre">Lien vers l'ancre</a>

Modifié par 84mickael (09 Aug 2006 - 00:36)

Quelques petites critiques par rapport à ton code HTML :

Puisque tu fermes tes balises <img>, tu peux aussi remplacer tes balises <hr> par <hr />. J'ignore pourquoi mais il est recommandé de laisser un espace avant le />, donc tu peux corriger aussi tes balises <img />.

Tu utilises des <h4> pour les dates ce qui ne me semble pas pertinent pour 2 raisons :
- il n'y a pas de <h3> ;
- tes <h4> ne sont pas une sous-partie de ton <h2>.

A ta place je les encadrerai simplement par des marques de paragraphes (<p>...</p>)
Modifié par 84mickael (09 Aug 2006 - 03:14)

Bonjour,

84mickael a écrit :
J'ignore pourquoi mais il est recommandé de laisser un espace avant le />

Cet espace (optionnel) permet à d'anciens navigateurs de reconnaître la balise.

Par exemple, NS4.7 ignore les <br/> sans espace.

merci pour vos réponses... mais le problème n'est pas résolu !

j'aimerais bien vous en dire plus, mais mon message est systématiquement publié tronqué, et je n'arrive pas à utiliser les balises code qui ne semblent pas reconnues...


Modifié par spidflinch (09 Aug 2006 - 12:43)

spidflinch a écrit :
et je n'arrive pas à utiliser les balises code qui ne semblent pas reconnues...

Curieux, et à la main, en encadrant ton code avec [ code] ton code [ /code] (sans les espaces) ?

- ça a marché ! merci !! -

j'ai donc modifié mon code html comme suit (j'ai déduit que les img nécessitaient aussi un espace...) :

<div id="PresseAjax" class="popPresse">
	<a id="Art1" name="Art1" href="#Art2"><img src="images/bas.gif" class="boutonAncre" alt="article suivant" /></a>
	<h2>Aden</h2><h4>12 Mars 2003</h4><img src="images/rdpAjax_Aden.gif" alt="article Aden" />
	<hr />
    	<a id="Art2" name="Art2" href="#Art3"><img src="images/bas.gif" class="boutonAncre" alt="article suivant" /></a>
	<a href="#Art1"><img src="images/haut.gif" class="boutonAncre" alt="article précédent" /></a>
	<h2>Libération</h2><h4>13 Mars 2003</h4><img src="images/rdpAjax_Libe1.gif" alt="article Libération 1" />
	<hr />
	<a id="Art3" name="Art3" href="#Art4"><img src="images/bas.gif" class="boutonAncre" alt="article suivant" /></a>
    	<a href="#Art2"><img src="images/haut.gif" class="boutonAncre" alt="article précédent" /></a>
	<h2>Libération</h2><h4>20 Mai 2003</h4><img src="images/rdpAjax_Libe2.gif"" alt="article Libération 2" />
	<hr />
    	<a href="#Art3"><img src="images/haut.gif" class="boutonAncre" alt="article précédent" /></a>
	<a id="Art4" name="Art4"></a>
	<h2>Zurban</h2><img src="images/rdpAjax_Zurban.gif" alt="article Zurban" />
  </div>

quelques précisions :
• je suis sur MacOS 10.3.9, Safari 1.3 et Firefox 1.0.6
• ma balise div est en fait une popup sans nouvelle fenêtre réalisée à l'aide du script de Olivier Patry, modifié pour y ajouter un bouton de fermeture (lien de type popOn) :

function pop()
{
    var liens = document.getElementsByTagName('area');
    for (var n = 0; n < liens.length; ++n) {
	// Si le lien a une classe de type pop
        switch (liens[n].className) {
			case 'popOff':
	// on extrait l'id de la popup à partir du href
            var pop = document.getElementById(liens[n].href.substring(liens[n].href.lastIndexOf('#') + 1));
	// si la popup existe on l'affiche (display block)
            if (pop) {       
                pop.style.display = 'none';
                liens[n].onclick = function() {
                    thisPopup = document.getElementById(this.href.substring(this.href.lastIndexOf('#') + 1))
                    thisPopup.style.display = (thisPopup.style.display == 'none') ? 'block' : 'none';
                    return false;
                };
		// on efface la popup en cliquant dessus
                pop.onclick = function()
                {
                    this.style.display = 'none';
                };
            }; break
			case 'popOn':
	// on extrait l'id de la popup à partir du href
            var pop = document.getElementById(liens[n].href.substring(liens[n].href.lastIndexOf('#') + 1));
	// si la popup existe on l'affiche (display block)
            if (pop) {       
                pop.style.display = 'none';
                liens[n].onclick = function() {
                    thisPopup = document.getElementById(this.href.substring(this.href.lastIndexOf('#') + 1))
                    thisPopup.style.display = (thisPopup.style.display == 'none') ? 'block' : 'none';
                    return false;
                };
            }; break

        }
    }
}
 
window.onload = pop;

elle donc incluse dans une div principale du style css suivant :

.fondAjax {
z-index: 0;
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 320px;
margin-top: -160px;
margin-left: -400px;
}

Modifié par spidflinch (09 Aug 2006 - 13:23)

hum.... je vois... tout ce code, tout de suite, ça refroidit !...
en attendant vos nombreuses réponses, j'ai continué à bosser sur d'autres choses...
...et mon problème d'ancre s'est résolu tout seul !!! si si !!...
je le mets sur le compte d'un comportement quelque peu erratique de DW sur lequel je m'arrache les cheveux régulièrement : la prévisualisation en navigateur se fait parfois de façon bizarrement incorrecte, et il me faut tourner autours (tester la page hors DW, l'ouvrir dans un autre éditeur, copier l'intégralité du code dans un nouveau document,... et autres incantations vaudous qui à vrai dire me font rire jaune...) avant que le problème disparaisse comme il est venu...