Gigi
{ Membre }
Messages : 108
| Une barre de menu personnalisée Niveau: Facile | Par: Gigi | Validé par: Artefacts | En date du: Jeudi 6 maiBonjour à tous ! Je ne crois pas que ce tutoriel à été proposé et j'espère qu'il servira :] Donc tout d'abord, voici un exemple de résultat final : - Spoiler:
Pour ce code, il faut mettre ces éléments dans la feuille de style : - Code:
-
.mainmenu - Code:
-
a.mainmenu - Code:
-
a.mainmenu:hover Ensuite, il suffit de rajouter des propriétés : Ex : - Code:
-
filter:alpha(opacity=50); -moz-opacity:0.5;opacity: 0.5; Pour un effet d'opacité . - Code:
-
border: 1px dotted #D69198 ; Pour une bordure en pointillés de cette couleur. - Code:
-
background-color : #F2C4C9; Pour un fond en cette couleur. - Code:
-
font-style:italic; Pour mettre en italique. Comme vous pouvez le remarquer, il y a une multitude de possibilités Pour finir, voici un exemple de code en entier [ celui qui a été utilisé dans l'exemple ] : - Code:
-
.mainmenu{ font-size : 10px; color : #5f4037; }
a.mainmenu{ text-decoration: none; color : #5f4037; background-color: #D69198; border-bottom: 1px solid #5f4037; filter:alpha(opacity=50); -moz-opacity:0.5;opacity: 0.5; }
a.mainmenu:hover{ text-decoration:none; color : #5f4037; background-color : #F2C4C9; border-bottom: 1px solid; color : #5f4037; filter:alpha(opacity=100); -moz-opacity:0.5;opacity: 1; }
Voilà, c'est fini, si vous avez des questions, n'hésitez pas, même si je ne suis pas très douée en CSS, j'essaierai d'y répondre =D Pour cela, merci de vous diriger vers la section Aide CSS&HTML | | |
|
Kaiji
Blanche-Neige
Messages : 5578
| FAQ Comment puis-je faire pour remplacer mes logos par du texte ? C'est très simple, d'abord, il faut allez dans "Le panneau d'administration -> Dans l'onglet "Affichage" -> Gestion des images -> Mode Avancé" ; là il faut supprimer les icônes qui representent ce qu'il y a dans la barre : " Accueil, Calendrier ,Galerie, FAQ, Rechercher, Membres, Groupes, Profil, Messagerie, Nouveau Message , Déconnexion/Connection, Inscription " Après on enregistre. Ensuite aller dans "En-tête & Navigation" et cocher non à cette question : Afficher seulement des images dans la barre des liens. Et enregistrer. Voilà, logiquement il n'y a plus d'image dans cette barre. À quoi correspond ".mainmenu", "a.mainmenu" et "mainmenu:hover" ? .mainmenu : C'est la barre de navigation, sans actions, que l'on voit tout le temps. a.mainmenu : C'est la barre de navigation qui s'active UNIQUEMENT en présence d'un lien. mainmenu:hover : C'est quand la souris passe sur la barre de navigation. Pourquoi mon texte n'est-il pas centré même si je mets "text-align: center" ? Quand on supprime les images qui correspondent aux images de la barre de navigation, une image transparente s'enregistre automatiquement dans le menu des images, même si on met "non" dans la gestion de l'entête et de la barre de navigation, pour " Afficher seulement des images dans la barre des liens :". Le mieux est de mettre un padding de l'autre côté du mot, pour commencer. Pour ce faire, il faut rajouter "padding-right: 15px;" dans la feuille de style, dans le code du .mainmenu. Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici : http://www.css-actif.com/f17-aide-css-xhtml | | |
|