Transparence de barre de navigation qui ne fonctionne plus

[Félina13]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Opera
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 28/09/2021
Lien du forum : http://feli.forumactif.org/

Description du problème

Bonjour,

Aujourd'hui j'ai modifié la page d'accueil de mon forum. Et j'avais au préalable ma barre de navigation en transparence. J'ai toujours le code affiché au sein de ma CSS. Et je ne comprend pas car la transparence ne se fait plus depuis.

Aurai-je oublié quelque chose ?

Code:

a.mainmenu {
    opacity: 0.3;
}
a.mainmenu:hover {
    opacity: 1;
}

Voici ma CSS entière en code

Code:

.mainmenu[href="/groups"]{
  display:none;
} /* rendre la page GROUPES de la barre de navigation invisible */

/**ajout pour stat sur ligne message etc**/
.d-none{display: none;}

/****début du http://www.epicode-entraide.com/t2038-message-bouton-selectionner-le-contenu *****/
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }
/****fin du http://www.epicode-entraide.com/t2038-message-bouton-selectionner-le-contenu*****/


td.row1, td.row2, td.row3 {
      background: url('http://ekladata.com/SbzzSsUk075obq_RagNc5v42jE0.png');
}


/****début http://www.epicode-entraide.com/t12547-liste-des-membres-2-batty*****/
.LSbatty_titre {
  margin:15px auto;
  width:100%;
}

.LSbatty_titre  th {
  margin-bottom:5px;
  padding:5px 0;
  text-transform:uppercase; /*texte en majuscule*/
  font-family:Arial; /*police du titre*/
  font-size:16px; /*taille du texte*/
  background:#00c1b8; /*couleur fond titre*/    
  color:#fff; /* Couleur du texte */
  font-weight:normal; /*Retiré le gras du titre*/
}

.LSbatty_corp{
  position:relative;
  width:100%;
  height:120px;
  padding:10px 0;
  font-family: arial; /*Police générale*/
}

.LSbatty_image{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  width:120px; /*Largeur de l'espace pour l'avatar*/
  height:120px; /*hautteur de l'espace pour l.avatar*/
  background: #ccc; /*couleur de fond s'il n'y a pas d'image*/
  border-radius:100px;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(68,74,115,0.5); /*ombre autour de l'avatar*/
}

.LSbatty_image img{
  width:120px; /*Largeur de l'image avatar*/
}


.LSbatty_pseudo{
  position: absolute;
    top: 0;
    left: 60px;
    width: calc(100% - 60px);
    width: -webkit-calc(100% - 60px);
    width: -moz-calc(100% - 60px);
    height: 35px;
    background: #ababab;/*couleur de fond par défaut (membre non validé)*/
    padding: 5px 65px;
    font-size: 20px; /*Taille du texte*/
    text-align: left;
    margin: 10px 0;
    box-sizing: border-box;
}

.LSbatty_pseudo span strong{
  color:#fff; /*Couleur du pseudo (membre validé)*/
}

.LSbatty_pseudo a {
  font-size:14px;
  text-transform: uppercase; /*Pseudo en majuscule*/
  color:#fff; /*Couleur du pseudo (membre non validé)*/
}

.LSbatty_pseudo img{
  height:14px; /*Hauteur des images MP et site web*/
}

.LSbatty_pseudo a strong{
  font-weight:normal; /*Retiré le gras sur les pseudo*/
}

.LSbatty_infos{
    position: absolute;
    top: 40px;
    left: 120px;
    width: calc(100% - 120px);
    width: -webkit-calc(100% - 120px);
    width: -moz-calc(100% - 120px);
    height: 80px;
    padding: 10px 5px;
    font-size: 14px; /*taille du texte*/
    box-sizing: border-box;
}

.LSbatty_infos div{
  display: inline-block;
  vertical-align: top;
  width: 23%;
  height:50px;
  margin: 5px;
  background:#fff; /*couleur de fond des infos*/
}

.LSbatty_infos div span{
  display:block;
  background: #ccc; /*couleur de fond des titres infos*/
  margin-bottom: 5px;
  padding:3px;
}

.LSbatty_pagination{
    margin: auto;
    padding: 10px;
    width: 100%;
    background:#f9eee0; /*couleur fond pagination*/
}

.LSbatty_pagination a {
  color:#fff; /*Couleur texte pagination*/
}

.LSbatty_pagination span{
  color:#fff; /*Couleur texte pagination*/
}

/*Mise en page du copyright (Lien)- NE PAS SUPRIMER-*/
.LSbatty_copyright {
  margin:5px auto; /*marge*/
  text-align: center; /*aligner le copyright*/
}

.LSbatty_copyright a{
font-size:11px;
text-decoration:none!important; /*suppression du soulignement par défaut*/
}

.LSbatty_copyright:hover a{
text-decoration:none!important; /*suppression du soulignement par défaut*/
color:#A400D1!important; /*deuxième couleur*/
}
/****fin http://www.epicode-entraide.com/t12547-liste-des-membres-2-batty*****/


/****début soulignement liens*****/
a:link
{
text-decoration:none;
}
/****fin soulignement liens*****/


/***** DEBUT de la Limitation de signature pour les membres *****/
.signature_div img {
  max-height:198px;
  max-width:760px;
  text-align : center;
}

.signature_div
{
  max-height:198px;
 max-width:760px;
  text-align : center;
 overflow:auto;
}
/***** FIN de la Limitation de signature pour les membres  *****/

 /* --------------DEBUT https://forum.forumactif.com/t325685-ajouter-des-boutons-haut-bas ----------------*/
.boutonhautbas {
    bottom: 40px;
    right: 10px; /* remplacez right par left pour afficher les boutons à gauche */
    position: fixed;
    z-index: 100;
}
 /* --------------FIN https://forum.forumactif.com/t325685-ajouter-des-boutons-haut-bas ------------------*/


/*** DEBUT DU Qui est en ligne ***/
/**QEEL par Cheshire Cat**/
.qeel h1{
  margin-top:60px;
  margin-bottom:0px;
  background-color:#00c1b8;
  text-align:center;
  font-family: 'Kalam';
  font-size:25px;
  color:#ffffff;
  text-transform:uppercase;
  letter-spacing:5px;
}
.qeel h2{
  text-align:center;
  font-size:20px;
  color:#00c1b8; /*sous titre apres le titre QEEL */
}
.qeel .bloc{
  font-size:12px;
  color:#de2828;
  display:block;
  overflow:auto;
  width:250px;
  height:350px;
  margin:auto;
  text-align:justify;/*
  border-left:2px solid #f43526;
  border-right:2px solid #f43526; */
  background-color:#fffcf7;
  padding-left:6px;
  padding-right:6px;
  background-image:url(http://ekladata.com/ROPAb2edFnLOQE38nfhP8jcJRO8.png); /*ajout d'image de fond x3 bloc*/
}
.qeel .membresco24{
  margin-left:-5px;
  color:#000000; ----------------------
  font-size:12px;
}
.qeel .legend{
  top:5px;
  margin-bottom:20px;
  margin-left:13px;
  margin-right:13px;
  padding-top:10px;
  padding-left:8px;
  padding-right:8px;
  border-top:2px solid #FAEDD2; /*la petite ligne de séparation legendes et noms de groupes*/
  /*background-color:#fffcf7*/
  text-align:center;
  background-image:url(http://ekladata.com/ROPAb2edFnLOQE38nfhP8jcJRO8.png); /*ajout d'image de fond */
}
.qeel .credit{
  font-size:10px;
  float:right;
}

.bloc td.row1 {      /* neutre, sans fond bleu gris ou autre */
  background : none;
}

.legend .gensmall{      /* retrait des crochets entre groupes */
  font-size:0px;
}

.legend .gensmall a{
  font-size:16px;
  padding-right:10px;
}

/************************************************* FIN DU Qui est en ligne ***/

.sous-forum a img{
position: absolute; margin-left: -20px;
}




/********CATEGORIES*********/
.tleCAT .tcat{display: none;}
a.nav img{display: none;} /* ne pas répéter le nom des titres des catégories qui sont déjà mis en image */

.stpentour {
  width:100%;
}
  .tleCAT {
    text-align:center;
    position:relative;
    height:50px;
    margin-left:-520px;
  }
.tleCAT h2 {
    text-transform: uppercase;
    margin-left: 500px;
    font-size: 45px;
    color: #eaeaea;
    text-shadow: 0px 1px 2px #000;
    font-family: 'Sniglet';
}
.mdlCAT {
    width: 900px;
   min-height: 195px;
    margin: 0 auto;
    background-color: rgba(250, 250, 250, 0.7);
    box-shadow: 1px 1px 8px #454545;
    margin-bottom: 20px;
}
::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
  .newsmessages .imgFRM{
    margin:15px;
    position: absolute;
   /* width:200px;
    height:200px;*/
  pointer-events: none;
  }
  .tleFRM {
    position: absolute;
    height: 50px;
  text-decoration:none;
  }
 .tleFRM a:first-child{
    text-decoration: none !important;
    color:#454545;
    font-family: 'Sniglet';
    font-size: 20px;
    border-bottom: 1px solid #9fc5c1;
    margin-left: 214px;
    position: relative;
    top: 15px;
    text-transform: uppercase;
  }
.tleFRM a:hover {
    background: #00c1b8;
}
.descFRM {
    position: relative;
    width: 400px;
    height: 120px;
    margin-left: 205px;
    top: 29px;
    padding: 5px;
    font-family: 'Sniglet';
    font-size: 12px;
    overflow: auto;
    color: #454545;
    line-height: 18px;
}
.separation {
    text-align: center;
    position: relative;
    left: 640px;
    top: 34px;
    width: 20px;
}
  .right {
    float:right;
    margin:5px;
  }
  .sjtFRM {
     font-family: 'Sniglet';
    text-transform: lowercase;
    font-size: 12px;
    margin-top: -100px;
    text-align: center;
    margin-right: 46px;
    width: 150px;
    border-bottom: 1px solid #9fc5c1;
  }
  .lastpost {
    font-family:'Sniglet';
    font-size:12px;
    color:#454545;
    margin-top:30px;
  }
.lastpost a {
    font-family: 'Sniglet';
    font-size: 12px;
    color: #454545 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    /*font-style: italic;*/
}
.lastpost a:hover {
    background: #00c1b8;
}
.ava-dernier {
    float: right;
    margin-right: -251px;
    margin-top: -80px;
    background: #eaeaea;
    border: 5px solid #9fc5c1;
    height: 80px;
    overflow: hidden;
    right: 0;
    transition: 0.8s all;
    filter: grayscale(50%);
    transform: rotate(45deg);
    width: 80px;
    z-index: 9;
}
  .ava-dernier:hover {
    transition: 0.8s all;
    filter:grayscale(0%);
    opacity:1;
  }
  .ava-dernier img {
width: 178%;
    position: relative;
    left: -0px;
    top: -30px; /*-83*/
    transform: rotate(-45deg);
}
.sousforumFRM {
  width:880px;
  margin-top:60px;
  margin-left:10px;
}
.sousforumFRM a {
    border-top: 1px solid #9fc5c1;
    text-decoration: none !important;
    color: #454545 !important;
    font-size: 12px;
    text-transform: uppercase;
}
.sousforumFRM a:hover {
    background: #00c1b8;
}




******************** FIN DES CATÉGORIES  ************/////


    /*************************************** début PAGE ACCUEIL *************************************** */
/***********************************************/
/*              Codage Page d'accueil         */
/*          Réalisé par  :copyright: Mäven              */
/* https://tambouille-raleuses.forumactif.com/ */
/*                                            */
/***********************************************/

#paFeli *::-webkit-scrollbar{width: 2px; background: #ffffff;}
#paFeli *::-webkit-scrollbar-thumb{background-color: #ffffff;}
#paFeli *::-webkit-scrollbar-track{background-color: #111; border: 0px solid #ffffff;}
/*
#paFeli {/*
 /*************************** PAGE D'ACCUEIL - ARTEMIS - EPICODE  ***************************/
:root {--color-background-black: #131313;
--color-background-white: #FFFFFF;
--color-background-red: #cd2f30;}

.page_accueil_ls1 {
  width: 850px;
  height: 385px;
  background: #dedede;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px;
  position: relative;
}

.page_accueil_ls1 > h1 {
  width: 318px;
  height: 75px;
  background: var(--color-background-black);
  margin: 0;
  color: white;
  font: 16px oswald;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 27px 10px 0 60px;
  position: relative;
  line-height: 18px;
 
 
}

.page_accueil_ls1 > h1 > div {
  background: var(--color-background-red);
  width: 52px;
  height: 52px;
  -webkit-transform:rotate(50deg);
      -ms-transform:rotate(50deg);
          transform:rotate(50deg);
  position: absolute;
  top: 11px;
  left: 5px;
}

.page_accueil_ls1 > h1 > div > img {
  width: 60px;
  height: 60px;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin-left: -3px;
  margin-top: -3px;
}

.page_accueil_ls1 > h2 {
  width: 495px;
  height: 75px;
  background: url(https://zupimages.net/up/19/29/8zr1.jpg);
  background-size: 100%;
  background-position: bottom center;
  margin: 0;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 18px;
  font: 20px oswald;
  text-transform: uppercase;
  line-height: 40px;
 
}

.page_accueil_ls1 > h2 > span {
  display: block;
  width: 310px;
  height: 40px;
  background: rgba(251,251,251,0.5);
  margin: 0 auto;
}

.contexte_accueil {
  width: 335px;
  height: 145px;
  background: var(--color-background-black);
  color: white;
  font: 13px calibri;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 5px 15px;
  text-align: justify;
  line-height: 11px;
  margin: 8px 0;
}

.contexte_accueil > p {
  width: 100%;
  height: 100px;
  overflow: auto;
  margin: 0;
  text-align: justify;
  color: white;
  font: 13px calibri;
  line-height: 11px;
}

.contexte_accueil span {
  width: 100%;
  display: block;
  text-align: center;
  font: 17px oswald;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
 
 
}

.contexte_accueil span strong {
  font-weight: normal;
  color: var(--color-background-red);
  font-style: italic;
}

.staff_accueil_ls1 {
  width: 295px;
  height: 145px;
  background: var(--color-background-white);
  margin: 8px 0 0 -10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
 
}

.staff_accueil_ls1 > h3 {
  margin: 0;
  width: 100%;
  font: 35px oswald;
  text-transform: uppercase;
  color: var(--color-background-red);
  text-align: center;
 
}

.staff_accueil_ls1 > h3 > span {
  display: block;
  font: 14px oswald;
  color: var(--color-background-black);
  margin-top: -10px;
 
}

.staff_hover {
  width: 70px;
  height: 70px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 5px solid var(--color-background-red);
  position: relative;
  margin: 1px;
}

.staff_hover img {
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
    object-fit: cover;
}

.staff_hover > div {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  color: white;
  font: 16px oswald;
  text-transform: uppercase;
  text-align: center;
  line-height: 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 5px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
 
}

.staff_hover > div > a {
  dispplay: block;
  color: white;
  font: 11px oswald;
  text-decoration: none;
}

.staff_hover:hover > div {
  visibility: visible;
  opacity: 1;
}

.navig_accueil_ls1 {
  width: 180px;
  height: 145px;
  background: #eeeeee;
  margin-top: 8px;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 10px;
  padding-bottom: 5px;
 }

.navig_accueil_ls1 > a {
  display: block;
  width: 160px;
  height: 18px;
  background: var(--color-background-red);
  margin: auto;
  color: var(--color-background-black);
  text-decoration: none;
  text-transform: uppercase;
  font: 11px arial;
  font-weight: bold;
  margin-bottom: 3px;
  line-height: 19px;
}

.navig_accueil_ls1 a:nth-of-type(2n+1) {
  background: var(--color-background-black);
  color: white;
}

.predefinis_ls1 {
  width: 445px;
  height: 70px;
  background: var(--color-background-red);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 7px;
}

.predefinis_ls1 img {
  width: 50px;
  height: 50px;
  border: 3px solid var(--color-background-white);
  margin: 0 3px;
}

.events_ls1 {
  width: 370px;
  background: var(--color-background-black);
  height: 70px;
}

.events_ls1 > h4 {
  width: 145px;
  float: left;
  position: relative;
  color: var(--color-background-red);
  font: 32px oswald;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

.events_ls1 > h4 > span {
  display: block;
  color: white;
  font: 12px calibri;
  text-transform: lowercase;
  margin-top: -5px;
  z-index: 1;
  position: relative;
  text-align: center;
}

.events_ls1 > h4 > img {
  width: 50px;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  position: absolute;
  top: 5px;
  right: 0;
  z-index: 0;
}

.events_ls1 > p {
  width: 200px;
  height: 50px;
  background: var(--color-background-white);
  float: right;
  margin: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font: 11px calibri;
  color: var(--color-background-black);
  box-sizing: border-box;
  padding: 3px;
  text-transform: uppercase;
  overflow: auto;
  text-align: justify;
}

.partos_ls1 {
  width: 100%;
  height: 42px;
  background: #eeeeee;
  margin-top: 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 5px;
}

.partos_ls1 img {
  margin: 0 2px;
}

.credits_epicode {
  font: 10px calibri;
  color: black;
  text-transform: uppercase;
  position: absolute;
  right: 2px;
  bottom: 0;
  opacity: 0.7;
}

.credits_epicode > a {
  text-decoration: none;
  color: black;
}
}
 /****************************************  FIN PAGE ACCUEIL ****************************************/

 /*********************************  DEBUT  BARRE NAVIGATION OPACITE *************************/
a.mainmenu {
    opacity: 0.3;
}
a.mainmenu:hover {
    opacity: 1;
}
 /*********************************  FIN  BARRE NAVIGATION OPACITE **************************/



 /*********************************  DEBUT pour la loupe sur les messages  **************************/

/*Le bouton pour l ouverture de la fenetre*/
.M14_open_Body
{
width: 16px;
height: 16px;
right: 10px;
float: right;
cursor:pointer;
}
/*Le bouton pour la fermeture de la fenetre*/
.M14_close_Body
{
position: absolute;
width: 16px;
height: 16px;
top: 10px;
right: 10px;
cursor:pointer;
}
/*On place les transitions sur les messages*/
.postbody
{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*La fenetre agrandie*/
#M14_Effet_body.postbody
{
/*On donne une position relative*/
position: relative;
/*On demande une marge negative a gauche pour la correction de la fenetre*/
left:-80px;
/*La couleur de fond*/
background: white;
/*La couleur de police*/
color:black;
/*La taille de police*/
font-size:14px;
/*On donne un espace conséquent si besoin peut etre supprime*/
padding: 20px 30px 10px 10px;
/*on agrandit sur la largeur et la hauteur sur la plupart des navigateurs*/
-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
  /*la couleur de bordure*/
border:2px solid #006699;
  /*Les bordures arrondies sur la plupart des navigateurs*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}



 /*********************************  FIN  pour la loupe sur les messages **************************/





/*Avatar citation*/
img.M14_Img_Citation
{
height: 16px;/*hauteur de l avatar*/
width: 16px;/*largeur de l avatar*/
vertical-align: middle;/*on aligne l avatar*/
margin-right:8px;/*on decale de la moitie de la largeur de l avatar*/
border-radius: 16px;/*on arrondi l avatar*/
  /*LES TRANSITIONS AU SURVOL*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*au survol de l avatar des citation on augmente la taille*/
img.M14_Img_Citation:hover
{
height:48px;
width:48px;
}


/*finAvatar citation*/

Merci pour votre aide !

[Toryudo]

Bonjour !

Si vous regardez justement la partie du code concerné, avec quelques lignes juste au-dessus :

Code:

.credits_epicode > a {
  text-decoration: none;
  color: black;
}
}
 /****************************************  FIN PAGE ACCUEIL ****************************************/

 /*********************************  DEBUT  BARRE NAVIGATION OPACITE *************************/
a.mainmenu {
    opacity: 0.3;
}
a.mainmenu:hover {
    opacity: 1;
}

Je ne sais pas si vous voyez, mais pour le CSS correspondant à .credits_epicode > a, vous avez deux lignes avec un caractère } qui se suivent (ligne 4 et 5 sur mon exemple). C'est ce qui embête le CSS suivant, qui permet justement aux .mainmenu d'être transparents. Du coup, vous n'avez qu'à retirer une de ces lignes avec un caractère } et ce sera bon !

[Félina13]

parfait, j'avais un soucis pour fermer une balise aussi mais ce n'était pas à cet endroit donc j'ai pu régler les 2 problèmes.

merci Toryudo