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
Menu démarrer windows 11 - Guide
Canon quick menu - Télécharger - Utilitaires
Menu demarrer - Guide
Menu contextuel windows 11 - 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

les entrées et les sortées

mon ordi marque press the esc key for startup menu

Accéder au menu Advanced Bios PC portable HP

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

Discussions similaires

Newsletters