Mettre un lien et sa puce cliquable à droite de la page ?

Bonjour,

Je souhaite mettre un lien "haut de page" à chaque fin d'un article pour que l'internaute puisse retourner en haut de la page à la fin de sa lecture.

Donc j'ai attribué une classe .hautdepage à chaque lien qui serviront à remonter en haut de page (original )

J'aimerais que ces liens aient une puce les précédents et soient alignés fer à droite de la page. Le mieux serait que cette puce soit cliquable si c'est possible, sinon je me contenterai d'un puce non cliquable.

Voici mon début pas très concluant :

CSS

a.hautdepage {
	display: block;
	background: transparent url(img/puce_haut_page.png) no-repeat;
	text-align: right;
}

HTML

<a href="#iddubody" class="hautdepage" title="Retourner en haut de la page">haut de page</a>

Le lien est bien fer à droite de la page mais la puce en background est fer à gauche...
Quelqu'un aurait-il une solution à me proposer ? Voire une autre technique ?

Bonjour !

Si ton lien ainsi que ta puce doivent se trouver tous les deux à droite, fait les flotter au moyen d'un float:right (à la place de ton text-align).
Si par contre ton lien se trouve à gauche et que ta puce se trouve à droite, je pense que ce sujet-ci peut t'intéresser

Merci beaucoup ça fonctionne parfaitement ça me donne ça :

a.hautdepage {
	display: block;
	background: transparent url(img/puce_haut_page.png) no-repeat;
	float: right;
	background-position: 0 60%;
	padding-left: 15px;
}

Par contre j'ai un soucis avec l'élément qui suit ce lien, c'est un titre H2 normalement il a une marge haute de 20px et maintenant il n'a plus de marge. Comment rétablir cette marge ? J'ai mis un clear:both sur les h2 mais ça ne fonctionne pas.

Voici les codes :

CSS

a.hautdepage {
	display: block;
	background: transparent url(img/puce_haut_page.png) no-repeat;
	float: right;
	background-position: 0 60%;
	padding-left: 15px;
}

h2 {
	margin: 20px 0 8px 7px;
	padding: 0 0 0 15px;
	color: #cec700;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px dotted #bdbbb1;
	background: transparent url(img/puce_h2.png) no-repeat;
}

HTML

<a href="#iddubody" class="hautdepage" title="Retourner en haut de la page">haut de page</a>

<h2>Titre h2</h2>

Modifié par tankia (21 Nov 2006 - 20:09)

C'est bon j'ai trouvé une solution, qui est de mettre un padding-top à 20px plutot qu'un margin-top sur l'élément h2 en plus d'un clear:both

Ah non j'ai un nouveau soucis, sous IE

Mon code en est à cet état :

CSS

a.hautdepage {
	display: block;
	background: transparent url(img/puce_haut_page.png) no-repeat;
	float: right;
	background-position: 0 60%;
	padding-left: 15px;
}

h2 {
	clear: both; /* Annule le float: right du lien haut de page */
	margin: 0 0 8px 7px; /* Je ne mets pas les 20 pixels de margin-top car ça ne fonctionne pas après le float: right du lien haut de page */
	padding: 20px 0 0 15px; /* 20 pixels en padding-top pour avoir une marge entre le lien haut de page et le titre h2 */
	color: #cec700;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px dotted #bdbbb1;
	background: transparent url(img/puce_h2.png) no-repeat;
	background-position: 0 20px; /* 20 pixels en position-top pour avoir la puce en background en face du titre h2 */
}

HTML

<a href="#iddubody" class="hautdepage" title="Retourner en haut de la page">haut de page</a>
<h2>Titre h2</h2>

Donc sous Firefox aucun soucis, par contre sous IE7 la puce_h2.png que j'ai mis en background à pour position 0px en top alors que j'ai mis 20px dans la css. Je ne comprends pas pourquoi...