Discussion :

[Antaya]

Bonjour chers codeurs,

j'aimerais mettre un lien "#top" à droite d'un titre et je n'y arrive pas. J'ai essayé de plusieurs manières, mais le mieux que j'ai pu faire, c'est qu'il soit à droite, mais sous le titre. Voici l'un des codes que j'ai essayé :



CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
h2 {
    padding-top: 0.6em; 
    border-bottom: solid 1px #663333;
    font-family: Tahoma;
    font-weight: normal;
    font-size: 18px;
    color: #25285A;
}
 
.top { 
    float: right;
    border: 0px none;
    display : inline;
}

HTML :

Code :

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

<h2>Titre de paragraphe<a href="#top"><img class="top" src="images/top.gif" alt="Haut de la page"></a></h2>

Je ne sais pas si j'ai oublié quelques chose, mais si vous avez une idée, je suis preneur !
Merci à l'avance.

[Bisûnûrs]

Tu dois inverser ton code HTML, donc mettre ton lien avant le titre dans le cas d'utilisation d'un float:right.

[Erwan31]

Tu dois inverser ton code HTML, donc mettre ton lien avant le titre dans le cas d'utilisation d'un float:right.

Oui mais d'avantage pour éviter certains problèmes d'ergonomie et de
référencement que pour des raisons d'affichage.
"Avant", ça veut dire qu'il vaut mieux qu'il se trouve à l'extérieur du titre comme ceci:

Code :

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

1
2
<a href="#top"><img class="top" src="images/top.gif" alt="Haut de la page" height="" width=""></a>
<h2>Titre de paragraphe</h2>

Ne pas oublier de préciser la taille de l'image avec les attributs HTML.

2 exemples d'effets nuisibles:
> Le lien haut de page compris dans le titre en fait parti, il sera donc pris en
compte par les moteur d'indexation avec le titre lui-même avec toutes les
conséquence négatives que cela entraine...
> Les outils de génération de TOC (Table Of Content > sommaire) à partir
des titres du document tel que ceux présents en fonctionnalités dans les
logiciels de synthèses vocales extrairont aussi le texte haut de page.

Lorsqu'une lecture linéaire du contenu est effectuée (via un lecteur d'écran
par exemple) sans avoir une vue d'ensemble de la page, il est ergonomiquement
plus logique de placer ce lien avant le titre (et non après ou à l'intérieur).

Pour expliquer la solution de Bisunurs, étant donné qu'un élément flottant est
sorti du flux normal vis à vis de son conteneur, le titre viendra se placer en
haut de son conteneur et le lien flottant (c'est une des caractéristique des
flottants) à droite et en haut de son conteneur.

[Antaya]

Wow, merci pour ces bons conseils... finalement je vais le mettre ailleur mon lien "top". Inutile de risquer une meilleur ergonomie ou bon référencement. Je suis vraiment heureux d'avoir découvert ce forum ce soir! J'y ai lu plusieurs bonnes idées.

Juste une dernière question très stupide : pourquoi spécifier la taille de l'image quand elle est de la bonne grandeur de toute façon ? Et si ces params sont préférables, puis-je les mettre dans le CSS à la place?

Merci.

[Erwan31]

Inutile de risquer une meilleur ergonomie ou bon référencement.

Tu veux dire inutile de risquer de dégrader l'ergonomie ou un bon référencement je suppose?

Juste une dernière question très stupide : pourquoi spécifier la taille de l'image quand elle est de la bonne grandeur de toute façon ? Et si ces params sont préférables, puis-je les mettre dans le CSS à la place?

Non c'est une bonne question.
Parce que certains navigateurs pour mobiles s'en servent d'une part pour savoir s'ils peuvent ou non afficher l'image et d'autre part pour déterminer la mise en page du document avant que l'image soit chargée.
Eviter d'implémenter ces propriétés en CSS puisque ce genre d'information
sera perdu et inexploitable en cas d'absence de prise en compte de CSS par
certains User Agents (Navigateurs, lecteurs d'écran, etc) et plus particulièrement certains
navigateurs mobile.

[Antaya]

Que de bons conseils : simples, concis et surtout primordiaux.
Milles mercis.