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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Aeternam Umbra le Mar 25 Déc 2012 - 18:23

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:
body {
background-image Non !-repeat;}
body {
font-family : "Tarjan Pro", "Times New Roman";
cursor: crosshair; }

.profil_contour
{
text-align: center;
text-color: #ffffff;
margin : 3px;
font-family: Helvetica, "sans-serif";
font-size: 15px;
font-weight: bold;
background-image: url("");
background-align: center;
background-color: #C9C9C9;
-moz-border-radius : 5px;
border-left : 4px #ffffff solid;
border-right : 4px #ffffff solid;
border-top : 2px #ffffff solid;
border-bottom : 2px #ffffff solid;
}

.avatar_contour
{
text-align: center;
text-color: #ffffff;
margin : 10px;
font-family:Helvetica, "sans-serif";
font-size: 15px;
font-weight: bold;
border-left : #ffffff 4px solid;
border-right : #ffffff 4px solid;
border-top : 2px #ffffff solid;
border-bottom : 2px #ffffff solid; ;
background-image: url("");
background-align: center;
background-color: white;
-moz-border-radius : 5px;
-moz-box-shadow : 0px 0px 3px;
}

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 */
}

.sujets_messages
{
text-align : center;
margin-top : 2px;
padding: 1.5px;
border: 1px solid white;
background-image: URL("http://www.noelshack.com/uploads/images/13202501257836_barre.png");
-moz-border-radius: 10px 10px 10px 10px;
color : #ffffff;
}

.derniers_sujets
{
text-align : center;
margin-top : 2px;
padding: 1.5px;
border: 1px solid white;
background-image: URL("http://www.noelshack.com/uploads/images/13202501257836_barre.png");
-moz-border-radius: 10px 10px 10px 10px;
color : #ffffff;
}

.desc
{
background: #C9C9C9;
border-left : black 4px solid;
border-right : black 4px solid;
border-top : 2px black solid;
border-bottom : 2px black solid;
margin-left:11px;
margin-right:11px;
color:#ffffff;
padding:5px;
padding-left:25px;
-moz-border-radius:11px;
-webkit-border-radius:11px;
font-size:11px;
font-weight:normal;
width:300px;
}

.desc:hover
{
background: #919191;
border-left : #ffffff 4px solid;
border-right : #ffffff 4px solid;
border-top : 2px #ffffff solid;
border-bottom : 2px #ffffff solid;
margin-left:11px;
margin-right:11px;
color:white;
padding:5px;
padding-left:25px;
-moz-border-radius:11px;
-webkit-border-radius:11px;
font-size:11px;
font-weight:normal;
width:300px;
}

.tuto{
display:block;
background: #C9C9C9;
text-align:center;
font-weight:normal;
font-size:12;
letter-spacing:2px;
color:black;
padding:1px;
margin-left : 10px;
background-position:left;
background-repeat:no-repeat;
margin-bottom:-3px;
width:120px;
border-left:3px solid black;
border-right:3px solid black;
-moz-border-radius: 5px;
}

.tuto:hover{
display:block;
background-color:#919191;
text-align:center;
font-weight:normal;
font-size:12;
letter-spacing:2px;
color:#ffffff;
padding:1px;
margin-left : 10px;
background-position:left;
background-repeat:no-repeat;
margin-bottom:-3px;
width:120px;
border-left:3px solid white;
border-right:3px solid white;
-moz-border-radius: 5px;
}

/* TITRES DES FORUMS */


.titreforum
{
margin-right : 30px; /* marge exterieur droite */
margin-left : 30px; /* marge exterieur gauche */
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 */
}

.titrecategorie
{
width: 400px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
-webkit-border-radius:50px 50px 0px 0px;
background-color: #919191;
border-right: 5px solid white;
border-left: 5px solid white;
border-top: 2px solid white;
text-align: center;
font-size: 14px;
height : 35px;
margin : auto;
margin-top : 10px;

}

.titrecategorie:hover
{
width: 400px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-topright: 40px;
-webkit-border-radius:40px 40px 0px 0px;
background-color: #C9C9C9;
border-right: 5px solid black;
border-left: 5px solid black;
border-top: 2px solid black;
text-align: center;
font-size: 14px;
height : 35px;
margin : auto;
margin-top : 10px;

}

.presentation1 {
font-family : Calibri;
font-variant : small-caps;
margin : 10px;
background-color : 2d2d2d;
-moz-border-radius-bottomright : 15px;
-moz-border-radius-topleft : 15px;
-moz-border-radius-topright : 15px;
-moz-border-radius-bottomleft : 15px;
border-left : black 6px solid;
border-right : black 6px solid;
border-top : black 6px solid;
border-bottom : black 6px solid;}

.presentation2
{
width: 400px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-radius:15px 15px 0px 0px;
background-color: #919191;
border-right: 5px solid white;
border-left: 5px solid white;
border-top: 2px solid white;
text-align: center;
font-size: 14px;
height : 35px;
margin : auto;
}

.presentation2:hover
{
width: 400px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-radius:15px 15px 0px 0px;
background-color: #C9C9C9;
border-right: 5px solid black;
border-left: 5px solid black;
border-top: 2px solid black;
text-align: center;
font-size: 14px;
height : 35px;
margin : auto;

}

.presentation3
{
border-right: 5px solid white;
border-left: 5px solid white;
border-top: 2px solid white;
border-bottom : 2px solid white;
background-color: #C9C9C9;
-moz-border-radius : 15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
}

.presentation3:hover
{
border-right: 5px solid black;
border-left: 5px solid black;
border-top: 2px solid black;
border-bottom : 2px solid black;
background-color: #7A7A7A;
-moz-border-radius : 15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;}


.titreforum:hover /* -> Quand on passe sur le titre avec le curseur */
{
letter-spacing : 4px; /* espacement de 4px entre chaque lettre */
margin-right : 30px; /* marge exterieur droite */
margin-left : 30px; /* marge exterieur gauche */
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 */
}

.down
{
position: fixed;
bottom :-0.5px ;
margin-left :105px;
background-image: url("");
opacity : 0.5
}

.down:hover
{
text-decoration : none !important;
position: fixed;
bottom :-0.5px ;
margin-left :105px;
background-image: url("");
opacity : 1
}

.top {
text-decoration : none;
position: fixed;
bottom :-0.5px ;
margin-left :-0.5px;
background-image: url("");
opacity : 0.5
}

.top:hover
{
text-decoration : none !important;
position: fixed;
bottom :-0.5px ;
margin-left :-0.5px;
background-image: url("");
opacity : 1
}

.titre1{
border-right: 1px solid white;
border-top: 1px solid white;
border-left: 1px solid white;
border-bottom: 1px solid white;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
font-family: Century Gothic;
margin: auto;
text-align: center;
font-weight : bold;
width: 370px
height : 202px;
}


.titre2{
border-right: 1px solid white;
border-top: 1px solid white;
border-left: 1px solid white;
border-bottom: 1px solid white;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
font-family: Century Gothic;
margin: auto;
text-align: center;
font-weight : bold;
width: 370px;
}

.navigationbycoma{
color: #B42000;
-moz-border-radius:14px;
border-bottom: 2px solid #615366;
border-left: 2px solid #615366;
border-right: 2px solid #615366;
border-top: 0px solid #686F82;
-moz-border-radius : 0px 0px 14px 14px;
text-shadow: 1px 1px 1px #FCE572;
font-family: Century Gothic;
font-weight : bold;
}

.navigationbycoma:hover{
-moz-border-radius:14px;
border-bottom: 2px solid #F0AFEA;
border-left: 2px solid #F0AFEA;
border-right: 2px solid #F0AFEA;
border-top: 0px solid #686F82;
-moz-border-radius : 0px 0px 14px 14px;
text-shadow: 1px 1px 1px #FCE572;
font-family: Century Gothic;
font-weight : bold;
}

.transparence
{
background-color: transparent;
border: none;
opacity: 0.5;
}

.transparence:hover
{
filter : overflow(opacity=100);
background-color: transparent;
border: none;
opacity: 1;
}

#ejs_texte
{
width: 200px;
height: 50px;
color: white;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
padding: 5px;
}


.postbody {
display: block;
text-align:justify;
padding-left: 20px;
padding-right: 20px;
}

tr.post td {padding-left: 20px;
text-align: justify;
}

textarea, .textarea.post, input.post {
-moz-border-radius:12px;
-webkit-border-radius: 12px;
}

.mainoption
{
-moz-border-radius:3px; /**** Border-radius signifie "rayon de la bordure", 10px le rayon de l'arrondissement *****/
-webkit-border-radius:3px; /*** webkit signifie "kit web", 10px le rayon de l'arrondissement ****/
-khtml-border-radius:3px; /*** pour linux ***/
-moz-box-shadow : 0px 0px 10px white;
}

.liteoption
{
-moz-border-radius:3px; /**** Border-radius signifie "rayon de la bordure", 10px le rayon de l'arrondissement *****/
-webkit-border-radius:3px; /*** webkit signifie "kit web", 10px le rayon de l'arrondissement ****/
-khtml-border-radius:3px; /*** pour linux ***/
-moz-box-shadow : 0px 0px 10px white;
}

.forumline {
border : 3px white solid;
-moz-border-radius:8px;
}

.bodyline {
-moz-border-radius:50px;
}

a { text-decoration : none;
font-variant : small-caps;}

a:hover {
text-shadow : white 0px 0px 5px;
text-decoration: none !important;
font-variant: small-caps;
letter-spacing : 3px;
color : #ffffff;
cursor: help;
}

.formulaire1
{
font-family: Arial;
text-align: center;
font-size: 12px;
background-image : URL("http://www.noelshack.com/uploads/images/12046158663660_barre.png");
color: #FFFFFF;
border: 2px simple #303030;
padding : 3px;
-moz-border-radius-bottomright : 12px;
-moz-border-radius-bottomleft : 12px;
}

.formulaire {
font-family: Calibri, Arial;
text-align: center;
font-size: 12px;
background-image : URL("http://www.noelshack.com/uploads/images/16620543319446_barre.png");
color: black;
padding:3px;
-moz-border-radius-topright : 12px;
-moz-border-radius-topleft : 12px;
}

.contenue
{
font-family: Calibri, Arial;
text-align: center;
font-size: 12px;
background-color:#7A7A7A;
color: white;
text-shadow : white 0px 0px 7px;
border: 2px simple #303030;
padding:3px;
}

body.chatbox
{
background-image : url("http://www.noelshack.com/uploads/images/12395318524182_banniere.png")
}


Dernière édition par Aeternam Umbra le Mar 25 Déc 2012 - 20:39, édité 1 fois

Aeternam Umbra
Nouveau membre

Messages : 13
Inscrit(e) le : 19/11/2012

http://saintseiya-heritage.forumactif.org/
Aeternam Umbra a été remercié(e) par l'auteur de ce sujet.

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

Message par Dr. Sam le Mar 25 Déc 2012 - 18:35

Joyeux Noël rendeer

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,
Smile

Dr. Sam
*****

Masculin
Messages : 894
Inscrit(e) le : 28/06/2012

http://www.fa-aide.com/
Dr. Sam a été remercié(e) par l'auteur de ce sujet.

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

Message par Aeternam Umbra le Mar 25 Déc 2012 - 18:48

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.

Aeternam Umbra
Nouveau membre

Messages : 13
Inscrit(e) le : 19/11/2012

http://saintseiya-heritage.forumactif.org/
Aeternam Umbra a été remercié(e) par l'auteur de ce sujet.

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

Message par Dr. Sam le Mar 25 Déc 2012 - 19:01

Re coucou Smile

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 Very Happy!!

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

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 Wink


Cordialement,
Smile

Dr. Sam
*****

Masculin
Messages : 894
Inscrit(e) le : 28/06/2012

http://www.fa-aide.com/
Dr. Sam a été remercié(e) par l'auteur de ce sujet.

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

Message par Manumanu le Mar 25 Déc 2012 - 19:11

Bonjour,

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

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

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

Message par Dr. Sam le Mar 25 Déc 2012 - 19:19

Très bon point Very Happy!!

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 Wink

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 Wink


Cordialement,
Smile

Dr. Sam
*****

Masculin
Messages : 894
Inscrit(e) le : 28/06/2012

http://www.fa-aide.com/
Dr. Sam a été remercié(e) par l'auteur de ce sujet.

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

Message par Aeternam Umbra le Mar 25 Déc 2012 - 19:52

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 ^^

Aeternam Umbra
Nouveau membre

Messages : 13
Inscrit(e) le : 19/11/2012

http://saintseiya-heritage.forumactif.org/
Aeternam Umbra a été remercié(e) par l'auteur de ce sujet.

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

Message par Manumanu le Mar 25 Déc 2012 - 20:11

Enlève le :
Code:
border-bottom : 2px solid ; /* bordure droite */

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

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

Message par Dr. Sam le Mar 25 Déc 2012 - 20:19

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 Wink

Dr. Sam
*****

Masculin
Messages : 894
Inscrit(e) le : 28/06/2012

http://www.fa-aide.com/
Dr. Sam a été remercié(e) par l'auteur de ce sujet.

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

Message par Aeternam Umbra le Mar 25 Déc 2012 - 20:38

Merci!

Résolu!!!!

Joyeux Nowel et Bonne nuit!

Aeternam Umbra
Nouveau membre

Messages : 13
Inscrit(e) le : 19/11/2012

http://saintseiya-heritage.forumactif.org/
Aeternam Umbra a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum