Forum de Graph, aide Html et Css
 
AccueilAccueil  FAQFAQ  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Go UP & Go BOTTOM CM

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Sweet Purple
Admin
avatar

Messages : 131
Date d'inscription : 12/07/2010
Age : 23

MessageSujet: Go UP & Go BOTTOM CM   Jeu 28 Avr - 23:31

KETSIA a écrit:
Go UP & Go BOTTOM. LET'S GO !


Niveau : Moyen
Auteur : Ketsia
A quoi sa sert ? A afficher deux petits boutons sur votre fenêtre, toujours présent ... Soit pour remonter au haut de la page, soit en pied de page.

Cet effet-là, vous avez sûrement dû le croiser quelque part... Voyons voir ? ... CSS Actif ? Ou même New York City Life ?
Voici le "chef d'oeuvre" en capture :
Spoiler:
 

Cela est un gros mystère pour vous ?
Pas de problème ... En faite, c'est vraiment très simple. Ce qui est le plus dur à faire ... C'est.... les petites images que vous allez installer ! Nous nous appelons pas tous Box&Shock ou Cosmopolitain hélas, pour ce qui est du graphisme ...

Commençons, commencons.

En étant sous le compte fondateur du forum, accédez à la feuille de style CSS.
Ajoutez-y ceci :

Code:
.upbottom {
position: fixed;
bottom : 0px ;
margin-left : 90% }


Le "fixed" est extrêmement important, sinon, il ne restera pas sur votre fenêtre au même endroit, quand on monte et descend.
Bottom ... Position zéro. Si vous le voulez en haut, il faudra remplacer "bottom" par "top".
Margin-left : Marge gauche. Si vous le voulez à gauche, il faudra juste remplacer "left" par "right".

Maintenant, passons à la partie la plus délicate... ( Ou pas ).

Héberger vos deux images. L'image qui sera pour "Aller en Haut", et la seconde pour "Allez en Bas".

Dernière étape ( la plus satisfaisante ).
Allez dans vos Templates > Général > overall_footer ( Bas de Page )
Descendez TOUT EN BAS.
Juste AVANT : le
Code:
</body>

Collez ceci & personnalisez-le.

Code:
<table class="upbottom"><tr><td><a href="#bottom"><img src="URL IMAGE POUR ALLEZ EN BAS" border="0" height="XX" width="XX"></a></td>
<td><a href="#top"><img src="URL IMAGE POUR ALLEZ EN HAUT" height="XX" width="XX"></td></tr></table>

Ajoutez donc les images que vous avez précédemment hébergés.
Height : Il faudra indiquer l'hauteur de votre image. Comme par exemple : height="20"
Pareil pour le width, qui représente la largeur !

Envoyez. Publiez. Et le tour est joué \o/
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://couleurs-en-folies.forumsactifs.net
 
Go UP & Go BOTTOM CM
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Couleurs En Folie :: Codage :: Astuce &' Aide :: Templates-
Sauter vers: