[Résolu]Conflit CSS / image pour la barre de menu

[Aeternam Umbra]

Bonjour/bonsoir

Je travaille sur le graphisme de mon forum et je désire changer ma barre de menu (accueil/membre/connexion/déconnexion/etc.)

Dans mon PA/gestion des images, les cases sont "vides". J'en déduis que la barre de menu est générée par le CSS.
Cependant, je ne suis pas du tout experte dans le CSS et je ne retrouve pas les lignes correspondantes.

Je vous demande votre aide pour identifier les lignes de codes qui génèrent ma barre de menu et m'indiquer comment modifier/supprimer pour que ma barre de menu soit liée aux images que j'uploadrai plus tard.

Merci de votre lecture.

Spoiler:

[Dr. Sam]

Joyeux Noël

Voici la partie de code qui compose les modifications du menu principal:

Code:

a.mainmenu
{
border-bottom : 2px solid ; /* bordure droite */
font-variant : small-caps; /* texte mis en majuscule */
-moz-border-radius : 5px; /* bords arrondis ( firefox ) */
font-size : 15px; /* taille du texte */
color : #ffffff; /* couleur du texte */
text-shadow : 0px 0px 5px #ffffff; /* ombre du texte */
text-align : center; /* position du texte */
}

a.mainmenu:hover
{
letter-spacing : 4px; /* espacement de 4px entre chaque lettre */
border-bottom : 2px solid #ffffff; /* bordure droite */
font-variant : small-caps; /* texte mis en majuscule */
-moz-border-radius : 5px; /* bords arrondis ( firefox ) */
font-size : 15px; /* taille du texte */
color : #ffffff; /* couleur du texte */
text-shadow : 0px 0px 5px #ffffff; /* ombre du texte */
text-align : center; /* position du texte */
}


Cordialement,

[Aeternam Umbra]

Joyeux Noel aussi ^^

Merci de cette réponse, qui confirme ce que j'avais deviné, mais... du coup, je ne vois pas ce que je dois modifier pour que mes images apparaissent?

Désolée si je casse les pieds, je ne suis juste pas -encore- bien manier (voir pas du tout) le CSS.

[Dr. Sam]

Re coucou

Vous ne me cassez pas les pieds, bien au contraire il faut poser des questions pour être bien outillé ce qui est super de votre part !!

Alors pour mettre une image à la place des liens, tu n'aura pas besoin de prendre le CSS en question, même que tu pourrais totalement l'éffacer, ce que tu devrais faire.

Maintenant rend toi sur ton panneau d'administration:
panneau d'administration --> Affichage --> Images et couleurs --> Gestion des images --> (Mode avancé) Par la suite tu pourra mettre le lien de t'ai image ...

Une fois les images misent en place, il faudra enlever les lien qui vont apparaitrent à coter des images. Pour se faire, rend toi encore une fois dans ton panneau d'administration:
Panneau d'administration --> Affichage --> Page d'accueil --> En-tête & Navigation --> Afficher seulement des images dans la barre des liens : Cochez oui


Cordialement,

[Manumanu]

Bonjour,

Je me permet d'intervenir pour dire de remplacer -moz-border-radius par border-radius, afin d'être compatible avec tous les navigateurs.

[Dr. Sam]

Très bon point !!

Effectivement, dans la partie de code de votre menu,

Code:

a.mainmenu
{
border-bottom : 2px solid ; /* bordure droite */
font-variant : small-caps; /* texte mis en majuscule */
-moz-border-radius : 5px; /* bords arrondis ( firefox ) */
font-size : 15px; /* taille du texte */
color : #ffffff; /* couleur du texte */
text-shadow : 0px 0px 5px #ffffff; /* ombre du texte */
text-align : center; /* position du texte */
}
 
a.mainmenu:hover
{
letter-spacing : 4px; /* espacement de 4px entre chaque lettre */
border-bottom : 2px solid #ffffff; /* bordure droite */
font-variant : small-caps; /* texte mis en majuscule */
-moz-border-radius : 5px; /* bords arrondis ( firefox ) */
font-size : 15px; /* taille du texte */
color : #ffffff; /* couleur du texte */
text-shadow : 0px 0px 5px #ffffff; /* ombre du texte */
text-align : center; /* position du texte */
}

Code:

-moz-border-radius : 5px; /* bords arrondis ( firefox ) */

Comme vous le voyez, cela n'est compatible qu'avec Firefox

Alors il faut remplacer ceci par:

Code:

border-radius : 5px; /* bords arrondis compatible avec tout les navigateur */

Mais en même temps vous pouvez supprimer toute la partie de code du menu, puisque vous aller les remplacer par des images


Cordialement,

[Aeternam Umbra]

Hello hello

merci merci pour tous vos conseils, ma barre de menus est toute belle! Yeah!

Enfin, presque.. Un détail: j'ai une moche barre blanche qui traine sous ma barre... et je ne sais pas quoi toucher ^^'



Une idée?

Merci, merci ^^

[Manumanu]

Enlève le :

Code:

border-bottom : 2px solid ; /* bordure droite */

[Dr. Sam]

Sérieusement,

Enlève toute cette parti de code de ton CSS:

Code:

a.mainmenu
{
border-bottom : 2px solid ; /* bordure droite */
font-variant : small-caps; /* texte mis en majuscule */
-moz-border-radius : 5px; /* bords arrondis ( firefox ) */
font-size : 15px; /* taille du texte */
color : #ffffff; /* couleur du texte */
text-shadow : 0px 0px 5px #ffffff; /* ombre du texte */
text-align : center; /* position du texte */
}
 
a.mainmenu:hover
{
letter-spacing : 4px; /* espacement de 4px entre chaque lettre */
border-bottom : 2px solid #ffffff; /* bordure droite */
font-variant : small-caps; /* texte mis en majuscule */
-moz-border-radius : 5px; /* bords arrondis ( firefox ) */
font-size : 15px; /* taille du texte */
color : #ffffff; /* couleur du texte */
text-shadow : 0px 0px 5px #ffffff; /* ombre du texte */
text-align : center; /* position du texte */
}

Comme sa tu est sur qu'il n'y a pas d'interference avec tes image et tout

[Aeternam Umbra]

Merci!

Résolu!!!!

Joyeux Nowel et Bonne nuit!