lien de navigation interne à droite

aleka · Message par **aleka** » 18 nov. 2008, 22:28

Bonjour,
Je voudrais placer sur mes pages un lien de "retour en haut de page" sous forme d'une icône.
Il paraît plus pratique pour celui qui consulte le site que ce lien soit en fin de section, c'est-à-dire à droite, en fin de ligne.
Mais que j'utilise un lien sur une image ou sur une expression "retour en haut de page", le problème est que c'est toute la ligne que se retrouve liée (réactive) et non pas uniquement la partie utile en fin de ligne.
Quand il n'y a pas d'alignement à droite, seule l'expression est réactive.

Ci-joint le code utilisé :

Code : Tout sélectionner

<br>
<a href="#HautPage" title="retour en haut de page"><img
 src="images/hautpage.jpg" alt="retour en haut de page"
 align="right" hspace="10"></a><br>

Qu'en pensez-vous ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)

Message par **Ymai** » 18 nov. 2008, 23:11

Bonjour
Mon opinion serait qu'il faut passer par un positionnement par CSS qui permet beaucoup plus de choses que le simple align="right".
Sans doute un positionnement relatif.
Quelque chose comme:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>titre</title>
</head>
<body>bla bla <br>
<div style="position: relative; left: 800px;">
<a href="#HautPage" title="retour en haut de page">
<img src="images/hautpage.jpg" alt="retour en haut de page"></a>
</div>
<br>
<br>
<br>
bla bla bla
</body>
</html>

mais en mieux

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/2008111317 Ubuntu/8.04 (hardy) Firefox/3.0.4

aleka · Message par **aleka** » 18 nov. 2008, 23:46

Merci,
Si j'ai bien compris il faudrait définir un style CSS et tâtonner pour faire disparaître cet effet secondaire négatif.
Je vais essayer avec mes faibles compétences ...

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Wysigot 6.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Message par **Ymai** » 18 nov. 2008, 23:51

Il y a ici plein de surdoués quie ne manqueront pas de corriger et de compléter.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/2008111317 Ubuntu/8.04 (hardy) Firefox/3.0.4

Gagea · Message par **Gagea** » 19 nov. 2008, 07:40

Si c'est une icône, donc une image, tu pourrais peut-être utiliser float: right; Je l'ai fait sur toutes les pages de mon site pour l'icône "Retour accueil" que j'ai ainsi placée en haut à droite de mon contenu.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 19 nov. 2008, 12:11

( les <br> ce n'est pas bien !

)

Je suggère de mettre plutôt qlq chose en "fixed", cela veut dire que le retour sera toujours visible à l'écran, genre:

#retour {
position:fixed;
left:90%;
top:90%;
}
<p id="retour"><a href="#">Haut</a><br /><a href="/index.html">Accueil</a></p>

Bien entendu, 2 petites icônes feront l'affaire

aleka · Message par **aleka** » 19 nov. 2008, 17:45

Merci beaucoup pour vos réponses.
J'ai expérimenté. Je voulais comparer les deux solutions, flottant vs fixe, mais ce n'est pas évident car je n'arrive pas à définir les 2 styles simultanément, un des deux "disparaît" de la feuille de style, ceci alors qu'ils sont évidemment appliqués à des objets différents. Mais ce n'est pas un gros pb puisque de toute manière il n'en restera qu'un seul quand j'aurai choisi.
J'ai 2 questions :
1) quand on définit une icône liée avec une position fixe, margin.left permet de la positionner horizontalement. Qu'en est-il du positionnement vertical, ceci afin que l'icône se retrouve bien dans le coin droit inférieur de l'écran, pour entraver le moins possible la lecture de la page. L'utilisation du paramètre "marge haute" fait disparaître l'icône de l'écran
2) comment faire disparaître la bordure bleue de l'image liée quand on utilise un style conseillé par vous ? dans l'aide ils parlent d'utiliser la boîte de dialogue "Propriétés du lien" mais je ne vois pas comment faire...

PS : L'ajout d'éléments à la feuille de style (externe heureusement, merci pour les tutoriels) me permet de voir que si je comprends bien l'intérêt d'une feuille de style (expérience de MS Word), je ne maîtrise pas assez le dispositif (éléments constitutifs, organisation....). Il me faudra me (re)plonger là-dedans en dehors de l'urgence.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 19 nov. 2008, 21:03

1) Regarde sur mon site, j'ai mis en pratique ta demande

2) rajoute border:none; dans la déclaration css des éléments concernés.
attention cela peut avoir été provoqué par l'ordre des déclarations. La dernière déclaration (trop générale) pouvant effacer des déclarations d'éléments spécifiques placé avant genre:

#toto a {
border: none;
}
...
a {
border: 2px red solid;
}

toto devrait avoir un cadre rouge...

aleka · Message par **aleka** » 20 nov. 2008, 00:07

merci

Fabrice.Tres.Net a écrit :1) Regarde sur mon site, j'ai mis en pratique ta demande

J'ai regardé le site sur le vol libre, consulté plusieurs pages mais je ne vois pas ce genre d'images fixes. (s'il s'agit bien d'une réponse à ma question n°1)

Fabrice.Tres.Net a écrit :2) rajoute border:none; dans la déclaration css des éléments concernés.
attention cela peut avoir été provoqué par l'ordre des déclarations. La dernière déclaration (trop générale) pouvant effacer des déclarations d'éléments spécifiques placé avant genre:

je vais essayer. A priori il n'y a pas de déclarations multiples.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Wysigot 6.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 20 nov. 2008, 00:47

C'est en bas à droite !

c'es

Code : Tout sélectionner

<p id="retour">
<a href="#" title="Haut de page"><img src="/images/icones/nuage.gif" alt=""/></a>
<a href="/index.php" title="LAVL"><img src="/images/icones/lavl20x58.png" alt=""/></a>
</p>

Comme le site est centré je positionne le bloc en fonction du centre qui reste au centre de la page !
Le css:
#retour {
width:40px;
position:fixed;
bottom:20px;
left:50%; margin-left:405px; /* au centre puis décaler à droite de 405px*/
}
#retour img {
display: bloc;
margin:5px 0;
}

aleka · Message par **aleka** » 20 nov. 2008, 18:39

Merci.

Fabrice.Tres.Net a écrit :C'est en bas à droite !

En fait cette image n'apparaît pas sur un un ordinateur que j'utilise, avec un affichage en basse résolution et avec IE7. On la devine quand on en connaît l'existence car il y a à la limite de l'écran un petit bout d'image bleu auquel réagit le curseur.
En revanche je la vois très bien actuellement sur un autre ordi avec un affichage en 1024x768 avec IE7 ou Firefox 3.0.1. C'est l'objectif que j'avais mais ça me donne d'autres idées pour une meilleure discrétion/visibilité.

J'ai juste eu le temps d'implémenter la suppression de la bordure bleue, ça fonctionne et ça fait une différence !

J'hésitais entre une image fixe et une image flottante pour le "retour en haut de page". Je vais choisir en fonction de la discrétion/visibilité et de la compatibilité avec les configs d'affichage, le dernier critère favorisant a priori l'image flottante. Ceci étant donné que je ne peux consacrer bcp plus de temps à ce qui n'est qu'un détail dans le site pour lequel j'ai des questions plus importantes à régler (j'aimerais bien arriver un jour très prochain à une première version satisfaisante du point de vue de la fonctionnalité, de l'ergonomie, de la sécurité en plus du contenu évidemment...).
encore merci

à +

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

Geckozone