Webdezign.tutoriaux.free.fr : Html | Css | Créer une scrollbar personnalisée

Vous êtes ici : Accueil > Html > Css > Créer une scrollbar personnalisée

Trouver une ressource

Trouvez une ressource parmi les 67 tutoriaux, 72 messages d'aide etc...

Lancer une recherche :

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Créer une scrollbar personnalisée

	Information sur le tutoriel/la source

Créer une scrollbar personnalisée
Catégorie : Css
Niveau : Débutant
Auteur : Mathieusub
Publication : le 07/03/2009 à 09:23:26
Note : Aucune note/5 (0 vote)

Etape 1 : Nous allons dans un premier temps créer le code Css, pour définir les dimensions et les couleurs de votre scrollbar.

Code :

#scroll {
width: 235px;
height: 200px;
overflow: auto;
position: relative;
scrollbar-face-color:#999999;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-highlight-color: #999999;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #999999;
scrollbar-3dlight-color: #999999;
}

Voici un shéma pour vous aidez à mettre les couleurs :

Etape 2 : Nous allons maintenant placer notre scrollbar dans une page html.
Code à placer entre les balises body :

Code :

<div id='scroll'>


Webdezign.tutoriaux.free.fr | Des tutoriaux pour tous les niveaux ! Webdezign.tutoriaux.free.fr | Des tutoriaux pour tous les niveaux ! Webdezign.tutoriaux.free.fr | Des tutoriaux pour tous les niveaux ! Webdezign.tutoriaux.free.fr | Des tutoriaux pour tous les niveaux ! Webdezign.tutoriaux.free.fr | Des tutoriaux pour tous les niveaux ! Webdezign.tutoriaux.free.fr | Des tutoriaux pour tous les niveaux !

</div>

Ce code n'est pas conforme aux normes CSS car ses attributs sont propres à Internet Explorer, donc vos scrollbars n'auront pas d'effets sur Firefox ou sur un autre navigateur...

Télécharger ce tutoriel au format pdf (2.28 Ko)

Ecrire un commentaire

Imprimer cette page

Flux Rss des tutoriaux de notre site

De l'aide sur le forum Html/Css

Visiter le site de l'auteur

Les commentaires

Il y a 0 commentaire(s) déjà posté(s)

Merci de bien vouloir nous donner votre avis sur ce tutoriel !
[ Pour cela vous devez être connecté avec votre compte ]