Menu accordéon, problème étrange...

Fermé

seb1972ca Messages postés 2 Date d'inscription mercredi 30 novembre 2011 Statut Membre Dernière intervention 30 novembre 2011 - 30 nov. 2011 à 15:18
seb1972ca Messages postés 2 Date d'inscription mercredi 30 novembre 2011 Statut Membre Dernière intervention 30 novembre 2011 - 30 nov. 2011 à 15:33

Bonjour,

Besoin d'aide d'un programmeur (e)... Sur une page web, j'ai ajouté 2 menus accordéons verticaux. Celui du haut va très bien et l'autre en-dessous non... Et je ne comprends pas pourquoi ! Vous pourriez me donner un coup de main svp ?

Mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<link rel="stylesheet" type="text/css" href="haccordion.css">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="haccordion.js">

/***********************************************
* Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<style type="text/css">

/*CSS for example Accordion #hc2*/

#hc2 li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 2px solid black;
background: #000;
}

#hc2 li .hpanel{
padding: 2px; /*Padding inside each content*/
background: #0099FF;
}

/*CSS for example Accordion #hc3*/

#hc3 li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 2px solid black;
background: #000;
}

#hc3 li .hpanel{
padding: 2px; /*Padding inside each content*/
background: #0099FF;
}

</style>
<script type="text/javascript">

haccordion.setup({
accordionid: 'hc2', //main accordion div id
paneldimensions: {peekw:'25px', fullw:'450px', h:'150px'},
selectedli: [-1, true], //[selectedli_index, persiststate_bool]
collapsecurrent: true //<- No comma following very last setting!
})

haccordion.setup({
accordionid: 'hc3', //main accordion div id
paneldimensions: {peekw:'25px', fullw:'450px', h:'150px'},
selectedli: [-1, true], //[selectedli_index, persiststate_bool]
collapsecurrent: true //<- No comma following very last setting!
})

</script>
</head>
<body>

<style>
div.liens {position:fixed;z-index:3;top:35px;left:7px;}
</style>

<div class="liens" style="width:110px; text-align:left; background-color: #fff; color:white; font-size: 12pt;
text-Decoration:none; font-family:Times new roman; font-weight:bold;">

<A HREF="http://phrasesetactionsmemorables.com/" title="Retour à l'accueil" TARGET="_self"
onmouseover="this.style.color='red'" onmouseout="this.style.color='#405ED7'"
<B>. Accueil</B> </A>

<p>
<A HREF="http://phrasesetactionsmemorables.com/bienvenue/" title="Bienvenue" TARGET="_self"
onmouseover="this.style.color='red'" onmouseout="this.style.color='#405ED7'"
<B>. Bienvenue</B> </A>
</p>

<style>
div.haccordion {position:fixed;z-index:10;top:100px;left:7px;}
</style>
<h3>Suivez-nous!</h3>
<br>
<div id="hc2" class="haccordion">
<ul>
<li style="border:2px solid blue">
<div class="hpanel">
<img src="http://eloik.com/a-f.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />
Si vous êtes un membre de Facebook, vous pouvez lire les phrases que les fans de la page postent en cliquant ici : <A HREF="www.facebook.com/phrasesmemorablesdenosenfants"
title="Suivez-nous sur Twitter" TARGET="_blank" onmouseover="this.style.color='red'" onmouseout="this.style.color='#405ED7'"
<B>Facebook</B> </A>
</div>
</li>
<li style="border:2px solid blue">
<div class="hpanel">
<img src="http://eloik.com/a-g.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />
Si vous êtes un membre de Google+, vous pouvez lire les phrases que nous repostons en cliquant ici : <A HREF="https://accounts.google.com/ServiceLogin?passive=1209600&osid=1&continue=https://plus.google.com/100957213668452002361/&followup=https://plus.google.com/100957213668452002361/"
title="Suivez-nous sur Twitter" TARGET="_blank" onmouseover="this.style.color='red'" onmouseout="this.style.color='#405ED7'"
<B>Google+</B> </A>
</div>
</li>
<li style="border:2px solid blue">
<div class="hpanel">
<img src="http://eloik.com/a-t.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />
Si vous êtes un membre de Twitter, vous pouvez lire les phrases que nous repostons en cliquant ici : <A HREF="https://twitter.com/Phrases_Enfants"
title="Suivez-nous sur Twitter" TARGET="_blank" onmouseover="this.style.color='red'" onmouseout="this.style.color='#405ED7'"
<B>Twitter</B> </A>
</div>
</li>
</ul>
</div>
</div>
<br>
<br>
<br>
<br>
<br>

<style>
div.haccordion3 {position:fixed;z-index:9;top:250px;left:7px;}
</style>

<h4>Liens d'intérêt</h4>
<br>
<div id="hc3" class="haccordion3">

<ul>
<li style="border:2px solid blue">
<div class="hpanel">
<img src="http://eloik.com/a-l.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />
Pour obtenir l'information sur nos livres et où et comment se les procurer, cliquez ici : <A HREF="http://phrasesetactionsmemorables.com/les-livres/"
title="Où se procurer les livres" TARGET="_blank" onmouseover="this.style.color='red'" onmouseout="this.style.color='#405ED7'"
<B>Nos livres</B> </A>
</div>
</li>
<li style="border:2px solid blue">
<div class="hpanel">
<img src="http://eloik.com/a-p.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />
Si vous avez une phrase mémorable d'enfant à partagez avec nous, faites-le en cliquant ici : <A HREF="http://phrasesetactionsmemorables.com/postez-une-phrase/"
title="Par ici pour poster votre phrase" TARGET="_blank" onmouseover="this.style.color='red'" onmouseout="this.style.color='#405ED7'"
<B>Votre phrase</B> </A>
</div>
</li>
<li style="border:2px solid blue">
<div class="hpanel">
<img src="http://eloik.com/a-a.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />
Vous êtes intéressé à recevoir un courriel indiquant qu'une nouvelle phrases a été posté sur le site ? Cliquez ici : <A HREF="http://phrasesetactionsmemorables.com/recevez-linfo-phrase/"
title="Recevez un courriel lorsqu'une nouvelle phrase est postée" TARGET="_blank" onmouseover="this.style.color='red'" onmouseout="this.style.color='#405ED7'"
<B>Alerte-Phrase</B> </A>
</div>
</li>
<li style="border:2px solid blue">
<div class="hpanel">
<img src="http://eloik.com/a-i.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />
Si vous voulez rejoindre les auteurs ou administrateurs, cliquez ici : <A HREF="http://phrasesetactionsmemorables.com/contact-2/"
title="Pour plus d'information ou si vous avez des questions" TARGET="_blank" onmouseover="this.style.color='red'" onmouseout="this.style.color='#405ED7'"
<B>Information</B> </A>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>

A voir également:

Menu accordéon, problème étrange...
Menu déroulant excel - Guide
Windows 11 menu démarrer classique - Guide
Canon quick menu - Télécharger - Utilitaires
Réinitialiser menu démarrer windows 10 - Guide
Menu demarrer windows 10 - Guide

1 réponse

Réponse 1 / 1

seb1972ca Messages postés 2 Date d'inscription mercredi 30 novembre 2011 Statut Membre Dernière intervention 30 novembre 2011
30 nov. 2011 à 15:33

Ce menu apparaîtra sur mon site, à gauche et il sera fixe : http://phrasesetactionsmemorables.com/

Discussions similaires

menu caché

Comment retrouver le bouton menu de Tv Tcl

Déblocage du mode hôtel Philips 20HF5234/10

Comment activer le Bluetooth sur une TV Samsung ?

les entrées et les sortées