<Navigation> Personnaliser la barre de navigation Bouton_active<Navigation> Personnaliser la barre de navigation Bouton_hover<Navigation> Personnaliser la barre de navigation Fb-hover<Navigation> Personnaliser la barre de navigation Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
<Navigation> Personnaliser la barre de navigation EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
<Navigation> Personnaliser la barre de navigation EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
<Navigation> Personnaliser la barre de navigation EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
<Navigation> Personnaliser la barre de navigation EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
<Navigation> Personnaliser la barre de navigation EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
<Navigation> Personnaliser la barre de navigation EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
<Navigation> Personnaliser la barre de navigation EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
<Navigation> Personnaliser la barre de navigation EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment :
SSD interne Crucial BX500 2,5″ SATA – 500 ...
Voir le deal
29.99 €

Partagez
 

<Navigation> Personnaliser la barre de navigation

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://unigraph.forum-canada.net/index.htm
Gigi
Gigi
{ Membre }
{ Membre }

Féminin Messages : 108



<Navigation> Personnaliser la barre de navigation Empty
Une barre de menu personnalisée

Niveau: Facile | Par: Gigi | Validé par: Artefacts | En date du: Jeudi 6 mai

Bonjour à 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 cheers

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
MessageSujet: <Navigation> Personnaliser la barre de navigation   <Navigation> Personnaliser la barre de navigation EmptyVen 30 Avr 2010, 11:40
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



<Navigation> Personnaliser la barre de navigation Empty
FAQ


Q
Comment puis-je faire pour remplacer mes logos par du texte ?

R
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.


Q
À quoi correspond ".mainmenu", "a.mainmenu" et "mainmenu:hover" ?

R
.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.


Q
Pourquoi mon texte n'est-il pas centré même si je mets "text-align: center" ?

R
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
MessageSujet: Re: <Navigation> Personnaliser la barre de navigation   <Navigation> Personnaliser la barre de navigation EmptyVen 22 Juil 2011, 08:27
Revenir en haut Aller en bas
 

<Navigation> Personnaliser la barre de navigation

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» <Navigation> Mettre une Image sous la Barre de Navigation
» <Navigation> Barre de navigation fixée en haut de la fenêtre
» <Navigation> Barre de navigation qui disparait au scroll
» <Navigation> Barre de navigation au-dessus de la bannière
» <Navigation> Fixer la barre de navigation

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Le Header-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit