[Résolu]Conflit CSS / image pour la barre de menu
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
[Résolu]Conflit CSS / image pour la barre de menu
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.
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 :no-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
Re: [Résolu]Conflit CSS / image pour la barre de menu
Joyeux Noël
Voici la partie de code qui compose les modifications du menu principal:
Cordialement,
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,
Re: [Résolu]Conflit CSS / image pour la barre de menu
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.
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.
Re: [Résolu]Conflit CSS / image pour la barre de menu
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,
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,
Re: [Résolu]Conflit CSS / image pour la barre de menu
Bonjour,
Je me permet d'intervenir pour dire de remplacer -moz-border-radius par border-radius, afin d'être compatible avec tous les navigateurs.
Je me permet d'intervenir pour dire de remplacer -moz-border-radius par border-radius, afin d'être compatible avec tous les navigateurs.
Re: [Résolu]Conflit CSS / image pour la barre de menu
Très bon point !!
Effectivement, dans la partie de code de votre menu,
Alors il faut remplacer ceci par:
Mais en même temps vous pouvez supprimer toute la partie de code du menu, puisque vous aller les remplacer par des images
Cordialement,
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 ) */
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,
Re: [Résolu]Conflit CSS / image pour la barre de menu
Enlève le :
- Code:
border-bottom : 2px solid ; /* bordure droite */
Re: [Résolu]Conflit CSS / image pour la barre de menu
Sérieusement,
Enlève toute cette parti de code de ton CSS:
Comme sa tu est sur qu'il n'y a pas d'interference avec tes image et tout
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
Re: [Résolu]Conflit CSS / image pour la barre de menu
Merci!
Résolu!!!!
Joyeux Nowel et Bonne nuit!
Résolu!!!!
Joyeux Nowel et Bonne nuit!
Sujets similaires
» probleme Barre de Menu assemblage d'image.
» Menu personnalisé (barre de navigation) : changement de l'image au passage de la souris
» délimitation blanche autour des catégories, image en-tête, barre menu.
» [Résolu] Insision - Plus de barre de défilement pour le widget "Dernier sujets".
» barre d'outils pour post d'un nouveau sujet
» Menu personnalisé (barre de navigation) : changement de l'image au passage de la souris
» délimitation blanche autour des catégories, image en-tête, barre menu.
» [Résolu] Insision - Plus de barre de défilement pour le widget "Dernier sujets".
» barre d'outils pour post d'un nouveau sujet
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum