Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

15 septembre 2009 2 15 /09 /septembre /2009 20:44
Toujours en rapport avec les menus déroulants en css sans javascript, voici comment leur insérer des images pour faire des boutons presonnalisés.
Tout d'abord, rappel sur les trois articles :
                   - Un menu déroulant horizontal (html CSS) sans javascript
                   - Un menu déroulant vertical (html CSS) sans javascript
                   - Positionnement dans la page d'un menu déroulant en css et html>


Voici comment insérer des images pour personnaliser vos boutons, l'exemple ici s'illustre sur le menu vertical, mais c'est le même principe sur le menu horinzontal.
Voici un exemple :





Il suffit de modifier la dernière partie du code (le css).
Voir en dessous du code les explications.

<style type="text/css"><!--
#menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 li{ float: left; margin: 0px; padding: 0; border: 0;}

#menuDeroulant1 li:hover > .sousMenu1 { display: block; }

#menuDeroulant1 .sousMenu1{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant1 .sousMenu1{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 .sousMenu1 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 li{ float: left; width: 100px; margin: 0; padding: 0; border: 0; font-size:12px;}

#menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 100; z-index:1000;}

#menuDeroulant1 li a:link, #menuDeroulant1 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/1.jpg); margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant1 li a:hover { background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/4.jpg); }
#menuDeroulant1 li a:active { background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/3.jpg); }
#menuDeroulant1 .sousMenu1 li a:link,#menuDeroulant1 .sousMenu1 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/2.jpg);}
#menuDeroulant1 .sousMenu1 li a:hover{ background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/3.jpg);}
--></style>





Il y a 4 images :



1 : Image présente dans l'exemple pour le bouton de la catégorie non-activée par la souris.



2 : Image présente dans l'exemple pour le bouton de lien dans le sous-menu de la catégorie, non-activé par la souris.



3 : Image présente dans l'exemple pour le bouton de lien dans le sous-menu de la catégorie, activé par la souris.



4 : Image présente dans l'exemple pour le bouton de la catégorie activée par la souris.



Il suffit maintenant de modifier les URL en orange par les images de votre choix.

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

mamzelle.B 21/11/2009 18:25


Merci beaucoup, bonne soirée


mamzelle.B 17/11/2009 00:59


Bonsoir,
Je cherche un article proposant des compteurs de visites mais sans en trouver !
Pourrais-tu me donner le lien de l'article s'il existe sur ton blog ?
Merci d'avance


Christelle Vinsonneau 21/11/2009 15:00


Et bien voici : http://photo.graph.over-blog.com/article-compteurs-de-visites-gratuit-sans-pub-sans-javascript-et-personnalisable-39776453.html