Discussion :

[Olivier Regnier]

Bonjour

Mon site personnel est quasiment terminé, il me reste à mettre en place les scripts CGI.

Cependant, je rencontre quelques petits soucis à savoir:

Avec Firefox:

Si je passe la souris par exemple sur le mot Actualités, j'obtiens une ligne. Le titre h3 se comporte comme un lien hors ce n'est pas le cas enfin presque

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<h3><span class="haut">[<a href="#">haut</a>]</span><a id="m_1">Actualités</a></h3>

Est-ce un problème de code car je ne l'obtiens pas sous IE7 voir IE6 ?

Avec Internet Explorer 6:

Impossible de visualiser le contenu du site de haut en bas

Voici le lien vers la feuille de style pour ie6 afin de permettre la position fixe pour le logo, menu et le moteur de recherche.

Logiquement, sous tous les titres h3 et h4, j'ai une petite bordure qui devrait apparaître mais je ne la vois pas, voici le code CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
h3, h4 {
border-bottom:1px solid #f3f3f3;
}

Voici le lien vers le site et la feuille de style.

[clb56]

Cependant, je rencontre quelques petits soucis à savoir:

Avec Firefox:

Si je passe la souris par exemple sur le mot Actualités, j'obtiens une ligne. Le titre h3 se comporte comme un lien hors ce n'est pas le cas enfin presque

L'élément a étant présent et avec un contenu alors les styles définis dans la css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
a:link    { color:#990000; text-decoration:underline; background:white; }
a:visited { color:#990000; text-decoration:underline; background:white; }
a:hover   { color:black;   text-decoration:underline; background:white;}
a:active  { color:#990000; text-decoration:underline; background:white; }

S'y appliquent

on a d'ailleurs le même résultat avec Opera et Safari windows

Le plus simple c'est de faire des ancres vides

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<h3><span class="haut">[<a href="#">haut</a>]</span><a id="m_1"></a>Actualités</h3>

Il y aurait un vrai avantage à placer différemment l'ancre dans le flux, si elle se trouve avant le lien "haut" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<h3><a id="m_1"></a><span class="haut">[<a href="#">haut</a>]</span>Actualités</h3>

Alors ce sera plus utile en terme de passage de focus dans le cadre d'une navigation clavier (passage de lien en lien via la touche tab)

Par ailleurs je te conseille une syntaxe plus robuste pour ces ancres :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="#m_1" id="m_1" name="m_1"></a>

c'est très important si tu veux t'assurer un fonctionnement sans problème quelque soit l'agent utilisateur

Sinon la syntaxe <a href="#"> pour le retour haut de page n'est pas fameuse et il vaut mieux faire une ancre très classique comme décrit ci dessus placée en début de flux du document :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="#haut" id="haut" name="haut"></a>

+ liens

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="#haut">Haut</a>

[Olivier Regnier]

Merci pour toutes ces informations

J'ai suivi ton conseil en tout cas, je n'y ai jamais pensé



PS: je suis vraiment content tout fonctionne