Besoin d aide en css
bilgbakland
Messages postés
4
Statut
Membre
-
bilgbakland Messages postés 4 Statut Membre -
bilgbakland Messages postés 4 Statut Membre -
Bonjour à tous,
J ai besoin d'aide pour mon site déjà en ligne visible via lien: https://energyperformances.net/
En effet je dois modifier l apparence du menu ( Accueil, ------- , Contact) en fonction des couleurs du logo:
j explique:
à l état initiale
le background du menu global est au violet comme c'est le cas actuellement.
a l'état dessus et cliqué
la couleur du background doit changer en fonction de la charte graphique du logo
au clique sur accueil , le background passe au rouge (#E2001A), si possible le texte en blanc..
au clique sur a propos , le background passe au bleu (#0E71B4), si possible le texte en blanc.. ........
ainsi pour le reste des rubrique du menu...
Sur ce , je vous laisse en espérant vous relire très prochainement.
merci
/* ============================= header ====================== */
header {width:360px;float:left}
#logo {display:block;text-indent:-9999px;background:url(../images/logo.png) 0 0 no-repeat;width:280px;height:153px}
#menu {padding-top:122px}
#menu > li {width:100%;overflow:hidden;padding-bottom:4px}
#menu > li > a {display:inline-block;font-size:26px;line-height:54px;height:56px;color:#fff;background:#622181;text-decoration:none;position:relative;letter-spacing:0px;cursor:pointer}
#menu > li > a span {display:block;background:#96BF0D;position:absolute;width:100%;height:100%;top:0;left:0}
#menu > li > a strong {position:relative;display:block;padding:0 95px 0 40px;height:56px}
#menu > li > a:hover, #menu > li > a.active {color:#000}
#menu > li > a:hover strong, #menu > li > a.active strong{}
/* =============================FIN ====================== */
J ai besoin d'aide pour mon site déjà en ligne visible via lien: https://energyperformances.net/
En effet je dois modifier l apparence du menu ( Accueil, ------- , Contact) en fonction des couleurs du logo:
j explique:
à l état initiale
le background du menu global est au violet comme c'est le cas actuellement.
a l'état dessus et cliqué
la couleur du background doit changer en fonction de la charte graphique du logo
au clique sur accueil , le background passe au rouge (#E2001A), si possible le texte en blanc..
au clique sur a propos , le background passe au bleu (#0E71B4), si possible le texte en blanc.. ........
ainsi pour le reste des rubrique du menu...
Sur ce , je vous laisse en espérant vous relire très prochainement.
merci
/* ============================= header ====================== */
header {width:360px;float:left}
#logo {display:block;text-indent:-9999px;background:url(../images/logo.png) 0 0 no-repeat;width:280px;height:153px}
#menu {padding-top:122px}
#menu > li {width:100%;overflow:hidden;padding-bottom:4px}
#menu > li > a {display:inline-block;font-size:26px;line-height:54px;height:56px;color:#fff;background:#622181;text-decoration:none;position:relative;letter-spacing:0px;cursor:pointer}
#menu > li > a span {display:block;background:#96BF0D;position:absolute;width:100%;height:100%;top:0;left:0}
#menu > li > a strong {position:relative;display:block;padding:0 95px 0 40px;height:56px}
#menu > li > a:hover, #menu > li > a.active {color:#000}
#menu > li > a:hover strong, #menu > li > a.active strong{}
/* =============================FIN ====================== */
2 réponses
-
Bonjour,
personnellement je passerais par les pseudo-éléments child (first-child / nth-child / last-child)...
normalement comme ci-dessous, cela devrait fonctionner sauf erreur de ma part :
remplacer :
#menu > li > a span {display:block;background:#96BF0D;position:absolute;width:100%;height:100%;top:0;left:0}
par :
/*pour ACCUEIL*/
#menu > li:first-child > a span {display:block;background:#E2001A;position:absolute;width:100%;height:100%;top:0;left:0}
/*pour A PROPOS*/
#menu > li:nth-child(2) > a span {display:block;background:#0E71B4;position:absolute;width:100%;height:100%;top:0;left:0}
/*pour PRODUITS*/
#menu > li:nth-child(3) > a span {display:block;background:#622181;position:absolute;width:100%;height:100%;top:0;left:0}
/*pour SERVICES*/
#menu > li:nth-child(4) > a span {display:block;background:#6F6;position:absolute;width:100%;height:100%;top:0;left:0}
/*pour CONTACTS*/
#menu > li:last-child > a span {display:block;background:#f93;position:absolute;width:100%;height:100%;top:0;left:0}
remplacer :
#menu > li > a:hover, #menu > li > a.active {color:#000}
par :
#menu > li > a:hover, #menu > li > a.active {color:#fff;}
cordialement, -
CELA MARCHE MERCIIIIIIII ,
sauf que pour la rubrique contact au clicque le background retour à l état initial, c 'est à dire au violet.
Déjà pour ce qui a été fait , je mets en ligne tout à l heure...
c cool merci,
