Liens de la barre de navigation non cliquables avec CB latérale

[Jess Capa]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis la mise en place du code de la CB
Lien du forum : http://magicneverdies.forumactif.com/

Description du problème

Bonjour !

Je viens vers vous en désespoir de cause puisque mon problème ne date pas d'hier. J'ai essayé de le résoudre par tous les moyens. J'ai cherché dans les topics ici même et sur le net. Rien... Je précise que je suis une novice en matière de HTML, CSS, et javascript n'en parlons même pas... J'ai donc pu créer des soucis sans m'en rendre compte.

J'ai voulu installer une cb latérale sur mon petit fo, à insérer directement dans le template overall_header. Le voici :

Code:

<table style="position: fixed; width:800px; top: 27px; z-index:1000;">
    <tr>
      <td>
        <iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="1">
        </iframe>
      </td>
      <td style="vertical-align: bottom;">
        <img id="img_bouton" src="https://img11.hostingpics.net/pics/129020CBversion3.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='https://img11.hostingpics.net/pics/129020CBversion3.png')?'block':'none';this.src=(this.src=='https://img11.hostingpics.net/pics/129020CBversion3.png')?'https://img11.hostingpics.net/pics/568117CBversion4.png':'https://img11.hostingpics.net/pics/129020CBversion3.png';"/>
      </td>
    </tr>
  </table> 

J'y ai juste rajouté une ligne de css avec l'id "img_bouton", pour changer l'apparence du curseur au survol de la petite image permettant d'ouvrir la CB. De toute façon, avec ou sans le problème est le même...

Tout de suite, je me suis aperçue que les trois premiers liens de la barre de navigation situés sur la même ligne (sans toutefois toucher l'icône de la CB) étaient non cliquables. Il faut scroller la page pour que les trois premiers boutons deviennent cliquables. Comme si une surface invisible (comme la CB masquée) empêchait les liens d'apparaître. Je ne sais pas si je suis claire x)

Du coup j'ai voulu tenter d'une autre façon, en rentrant directement le code dans une feuille javascript. Peut-être que c'est bête mais bon, je ne voyais pas quoi tenter d'autre. Comme suit :

Code:

jQuery(document).ready(function () {
    jQuery('body').append('<table style="position: fixed; width:800px; top: 27px; z-index:1000;">
                          <tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">
                          <iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe>
                          </div></td><td style="vertical-align: bottom;">
                          <img id="img_bouton" src="https://img11.hostingpics.net/pics/129020CBversion3.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'https://img11.hostingpics.net/pics/129020CBversion3.png\')?\'block\':\'none\';this.src=(this.src==\'https://img11.hostingpics.net/pics/129020CBversion3.png\')?\'https://img11.hostingpics.net/pics/568117CBversion4.png\':\'https://img11.hostingpics.net/pics/129020CBversion3.png\';"/>
                          </td></tr></table>');
});

Le résultat (donc le problème) est identique. J'ai beau me creuser, je ne comprends pas d'où ça pourrait provenir. Vous auriez une idée ? S'il vous plait ?

PS: L'icône de la CB n'est PAS une bière, c'est de la bièraubeurre

EDIT: Je vous rajoute le code CSS de la CB, au cas où, mais je doute qu'il soit en cause... Si vous y trouvez des absurdités n'hésitez pas à me le dire...

Code:

#img_bouton {
 cursor: url('https://i.servimg.com/u/f62/19/68/80/61/curseu10.png'), pointer;
}

#chatbox_header .catBottom {
 border: none; /*Enlève la bordure*/
 background-image: none; /*Enlève image de fond*/
 background-color: black; /*Enlève couleur de fond*/
 height: 30px;}

#chatbox_header .catBottom .cattitle {
 font-size:20px
 margin-left: 30px;}

#chatbox_header .cattitle strong { display: none; }

#chatbox_header .cattitle:before { content: "Team Bièraubeurre ou Whisky Pur Feu ?!"; } 

#chatbox_header .cattitle { background:black;}

#chatbox_header .cattitle strong { visibility: hidden; }

body.chatbox {
  background-image: url("https://i.servimg.com/u/f62/19/68/80/61/fond_c12.jpg");
  background-color: black;
  background-size: cover ;
  margin-top: -1px;
  }

/*Pour cacher le lien pour accéder aux archives normal*/
#chatbox_option_with_archives a {
  font-size: 0;
}
#chatbox_option_with_archives a:before {
  content: "Voir les perles";
  font-size: 12px;
}
#chatbox_option_without_archives a {
  font-size: 0px;
}
#chatbox_option_without_archives a:before {
  content: "Beuglante";
  font-size: 12px;
}
#chatbox_option_co strong {
  font-size: 0px;
}
#chatbox_option_co strong:before {
  content: "Viens ! On est bien...";
  font-size: 12px;
}
#chatbox_option_disco {
  font-size: 0px;
}
#chatbox_option_disco:before {
  content: "Tout plaquer";
  font-size: 12px;
}

#chatbox_members .online {
  font-size: 0px;
  text-align:left;
  padding-left: 10px;
  margin-top:10px;
  font-variant: small-caps;
}

#chatbox_members .online:before {
  content: "Devraient RP :";
  font-size: 12px;
  color: white;
  text-shadow: 1px 1px 10px black;
  font-weight: bold;
  }
#chatbox_members .away {
  font-size: 0px;
  text-align:left;
  padding-left: 10px;
  margin-top:20px;
  font-variant: small-caps;
}
#chatbox_members .away:before {
  content: "Font dodo :";
  font-size: 12px;
  color: black;
  text-shadow: 1px 1px 10px white;
  font-weight: bold;
}

#chatbox .msg{word-wrap: break-word;}
#chatbox .user, #chatbox .date-and-time{white-space: nowrap;}

#chatbox .date-and-time {
  color:#4F4C4B;
}

/*Partie centrale de la chatbox où il y a les messages*/
#chatbox {
  padding-top: 10px;
}

#chatbox_footer {
  height: 36px!important;
}
/*Barre du bas*/
#chatbox_footer .catBottom {
  border: none; /*Enlève la bordure*/
  background-image: none; /*Enlève image de fond*/
  background-color: transparent; /*Enlève couleur de fond*/
  height: 29px;
}

/*Bouton Aide tout à gauche*/
#chatbox_footer #help-button {
  background-color: black;
  color: #A48038;
  border: none;
  box-shadow: 0px 0px 10px #C1AC81;
  margin-right: -30px;
}

/*Bouton Gras*/
#chatbox_footer .text-styles label[title="Gras"] {
  background-color: black;
  color: #A48038;
  border: none;
  box-shadow: 0px 0px 10px #C1AC81;
}
/*Bouton Italique*/
#chatbox_footer .text-styles label[title="Ital."] {
  background-color: black;
  color: #A48038;
  border: none;
  box-shadow: 0px 0px 10px #C1AC81;
}
/*Bouton Surligné*/
#chatbox_footer .text-styles label[title="Soulig."] {
  background-color: black;
  color: #A48038;
  border: none;
  box-shadow: 0px 0px 10px #C1AC81;
}
/*Bouton Barré*/
#chatbox_footer .text-styles label[title="Barré"] {
  background-color: black;
  color: #A48038;
  border: none;
  box-shadow: 0px 0px 10px #C1AC81;
}
/*Bouton Couleur de police*/
#chatbox_footer #divcolor {
  background-color: black;
  color: #A48038;
  border: none;
  box-shadow: 0px 0px 10px #C1AC81;
}
/*Bouton Smiley*/
#chatbox_footer #divsmilies {
  background-color: black;
  color: pink;
  border: none;
  box-shadow: 0px 0px 10px #C1AC81;
}

/*Texte avant le message*/
#chatbox_footer label[for="Message"] {
  background-color: none;
  color: none;
}
/*Champ texte pour le message*/
#chatbox_footer #message {
  background: black;
  color: white;
  font-size:12px;
  border: none;
  box-shadow: 0px 0px 20px #C1AC81;
}
#chatbox_footer #submit_button {
  background-color: black;
  color: #A48038;
  border: none;
  box-shadow: 0px 0px 50px #C1AC81;
}

#chatbox_footer ,.chatfootertable {
height:36px !important;
}
.text-styles input#message
{
height:30px !important;
width:500px !important;
margin-top: 6px !important;
border-radius: 10px !important;
}
.chatfootertable #help-button, #chatbox_footer table.text-styles{
  margin-top: -6px !important;
}

.chatfootertable {
  margin-left: 0px;
}

.chatbox_row_1 {
  padding:5px
  border:1px solid #000;
}
.chatbox_row_2 {
  padding:5px
  border:1px solid #000;
}

/* Message de connexion CB */
.msg span[style*="green"] strong {
    color: #9F590C; /* couleur */
    text-shadow: 1px 1px 15px black;
    font-variant: small-caps; /* petites majuscules */
}

/* Message de déconnexion CB */
.msg span[style*="red"] strong {
  color: #403B38; /* couleur */
  text-shadow: 1px 1px 2px #000;
  font-variant: small-caps; /* petites majuscules */
}

Par avance, merci !

[Jess Capa]

Up !

[Invité]

Bonjour Jess Capa

il est normal vous avez un tableau qui fait 800px !!





en modifiant à 50px c'est ok




voilà c'est tout

[Jess Capa]

Rho la boulette !! >< Je me ficherais bien des baffes parfois...
Merci beaucoup pour cette réponse rapide ! Je mets en résolu