Pbl avec panneau latéral

[Sophi@]

Bonjour,

J'ai épluché les sujets du forums, et trouvé ce petit tutoriel et code: http://fdf.aidactif.fr/tutopanneau/normal-droite.htm

Seul soucis, c'est que quand je le met dans ma pa, mon message de ma pa, j'ai bien le bouton ouvrir qui apparait mais c'est tout. Je click dessus rien ne se passe. Du coup je me demandais, si j'ai pas fait une erreur, s'il y a un codage à ajouter dans le CESS...
Je pensais que ça fonctionnerais comme la CB mais visiblement c'est pas le cas.

Lien vers mon forum: http://perditioncity.forumactif.org

Le code que j'ai mis sur ma pa:

Code:

<table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">
<div class="subtitle">Les Postes à Pourvoir</div>
<font style="text-align: justify">Nous avons choisis de vous proposer des postes à pouvoir au lieu des habituels prédéfinis. Le concept est simple, un prénom, un nom, une fonction, et une petite histoire. C'est un rôle à incarner, où vous aurez une grande liberté dans la rédaction de son histoire, jusqu'au choix de l'avatar. Suivez les petits cailloux ci-dessous.
<b>RESISTANCE</b> <i>veux-tu incarner le chef?</i> <a href="http://perditioncity.forumactif.org/t195-la-resistance-la-cinquieme-colonne">Cliiiick.</a>
<b>MAFIA</b> <i>tu veux braconner?</i> <a href="http://perditioncity.forumactif.org/t90-les-maitres-de-l-ombre-le-syndicat-du-crime">Click!!</a>
<b>LES RICHOUS</b> <i>tu veux te la péter?</i> <a href="http://perditioncity.forumactif.org/t499-le-pouvoir-les-familles-regnantes-de-la-citadelle">Par ici!</a></font>
</div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>

Et mon CSS:

Code:

/* LATERAL */
.panneau{
background:#391717;
border: #391717;
box-shadow: #3a3a3a;
position: fixed;
width: 50px;
height: 100px;
top: 700px;
left: 0px;
padding: 3px;
}
.panneau:hover {
width: 200px;
height: 100px;
box-shadow: #3a3a3a;
}

J'ai testé sans ajout CSS, et même le code vierge sur la pa, sans rien ajouté, mais ça ne fonctionne toujours pas.

Merci d'avance.

[[AoH]Insane]

Bon, alors premièrement, comme dans ton code tu as écrit ceci:

Code:

<div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">

Tu dois donc interpeller l'élément par son ID, et en CSS, l'interpellation .panneau fait référence à la classe d'un objet quelconque sur une page HTML. Pour interpeller l'ID en CSS, il faut utiliser le dièse (#) devant le nom mis dans le code. Sinon, tu peux toujours changer le mot id dans ton code pour class. Par contre, comme tu as utilisé un JavaScript avec un document.getElementById(), je te conseil de changer ton CSS, aussi, change l'ID dans ton code. Comme tu utilise la ChatBox, qui as probablement le même ID puisque le code de base proposé sur FA est ainsi fait, lors du clique sur cet onglet, la ChatBox va s'ouvrir simultanément. Par exemple, met panneaudeux, ce qui donnerais ces codes entier:

Code:

<table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneaudeux" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">
<div class="subtitle">Les Postes à Pourvoir</div>
<font style="text-align: justify">Nous avons choisis de vous proposer des postes à pouvoir au lieu des habituels prédéfinis. Le concept est simple, un prénom, un nom, une fonction, et une petite histoire. C'est un rôle à incarner, où vous aurez une grande liberté dans la rédaction de son histoire, jusqu'au choix de l'avatar. Suivez les petits cailloux ci-dessous.
<b>RESISTANCE</b> <i>veux-tu incarner le chef?</i> <a href="http://perditioncity.forumactif.org/t195-la-resistance-la-cinquieme-colonne">Cliiiick.</a>
<b>MAFIA</b> <i>tu veux braconner?</i> <a href="http://perditioncity.forumactif.org/t90-les-maitres-de-l-ombre-le-syndicat-du-crime">Click!!</a>
<b>LES RICHOUS</b> <i>tu veux te la péter?</i> <a href="http://perditioncity.forumactif.org/t499-le-pouvoir-les-familles-regnantes-de-la-citadelle">Par ici!</a></font>
</div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneaudeux\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>

Et pour le CSS

Code:

/* LATERAL */
#panneaudeux{
background:#391717;
border: #391717;
box-shadow: #3a3a3a;
position: fixed;
width: 50px;
height: 100px;
top: 700px;
left: 0px;
padding: 3px;
}
#panneaudeux:hover {
width: 200px;
height: 100px;
box-shadow: #3a3a3a;
}

En espérant avoir aidé

[AoH]Insane

[benneke]

Hello,

+1 pour [AoH]Insane

Mais je voudrais ajouter ceci :
il y a aussi un souci avec les antislash '\' dans le javascript.
Actuellement si on prend le résultat du code dans la console de firebug ou de safari il met caractère illégal dans le code.

Le code corrigé sans les antislash serait :

Code:

        <table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneaudeux" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">
        <div class="subtitle">Les Postes à Pourvoir</div>
        <font style="text-align: justify">Nous avons choisis de vous proposer des postes à pouvoir au lieu des habituels prédéfinis. Le concept est simple, un prénom, un nom, une fonction, et une petite histoire. C'est un rôle à incarner, où vous aurez une grande liberté dans la rédaction de son histoire, jusqu'au choix de l'avatar. Suivez les petits cailloux ci-dessous.
        <b>RESISTANCE</b> <i>veux-tu incarner le chef?</i> <a href="http://perditioncity.forumactif.org/t195-la-resistance-la-cinquieme-colonne">Cliiiick.</a>
        <b>MAFIA</b> <i>tu veux braconner?</i> <a href="http://perditioncity.forumactif.org/t90-les-maitres-de-l-ombre-le-syndicat-du-crime">Click!!</a>
        <b>LES RICHOUS</b> <i>tu veux te la péter?</i> <a href="http://perditioncity.forumactif.org/t499-le-pouvoir-les-familles-regnantes-de-la-citadelle">Par ici!</a></font>
        </div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('panneaudeux').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/></td></tr></table>

les antislash servent juste pour dire au navigateur de ne pas interpréter le caractère après l'antislash. Dans le cas présent, pas besoin d'échapper les simples guillemets.

[Sophi@]

Merci beaucoup, pour vos réponses aussi rapide, et votre aide.

Alors, [AoH]Insane j'ai corrigé le codage. Mais ça n'a rien changé. Ensuite j'ai suivis benneke et modifié le codage, et à présent ça varie bien entre ouvrir et fermer selon le clik mais le texte n'apparaissait pas. Ensuite j'ai réfléchi, puis modifier le CSS qui donnait des info contradictoire, width et height et une fois ces infos enlevée boom mon texte est apparu, ensuite j'ai pu corriger les petites erreurs.

Du coup, un grand merci.

Juste une petite question subsidiaire.
Si on voulait ajouter un autre petit panneau latéral pour par exemple les top-site, on fait comment pour régler la hauteur, afin d'éviter la superposition? Et sinon, serait-il possible d'intégrer un code d'onglet au sein même du panneau latéral? Juste pour voir les différentes options.

[benneke]

Si vous souhaitez ajouter un autre panneau, il faut mettre le même code en modifiant l'id en panneautrois par exemple et régler les placements en css, mais la il faut chercher ;-)
Pour ajouter un système d'onglets a l'intérieur ce doit être possible, j'y réfléchis cet aprem et essaye de vous pondre qqch ce soir!

Bonne journée

[Sophi@]

Oky merci beaucoup!

[Automne]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif