Bonjour à toutes et tous,
j'ai fait un menu en html/css.
Cependant, je ne sais pas pourquoi, le menu est décalé du haut de la cellule.
Pour plus de compréhension, voici mes codes :
CSS
Code :
- #menu{
- width:150px;
- }
- .menu, .sousmenu{
- text-align: right;
- }
- .menu{
- height:18px;
- width:150px;
- color:#fff;
- padding-bottom: 10px;
- top:auto;
- font-family:arial,sans-serif;
- font-size:12px;
- text-decoration:none;
- }
- .sousmenu{
- height:14px;
- width:170px;
- padding: 0px;
- color:#ffffff;
- text-align: right;
- }
- .menu a{
- display:block;
- width:100%;
- height:100%;
- color:#fff;
- font-family:arial,sans-serif;
- font-size:12px;
- text-decoration:none;
- }
- .sousmenu a{
- display:block;
- width:100%;
- height:100%;
- color:#666666;
- font-family:Garamond;
- font-size:18px;
- text-decoration:none;
- }
- .sousmenu a:hover, .sousmenu a:active, .sousmenu a:focus{
- color:#ffffff;
- }
|
HTML
Code :
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="robots" content="index, follow" />
- <meta name="keywords" content=" "/>
- <meta name="description" content=" "/>
- <title></title>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
- <script type="text/javascript" src="js/copie_functions.js"></script>
- <style type="text/css">
- <!--
- body {
- margin-top: 0px;
- }
- -->
- </style></head>
- <body bgcolor="#333333">
- <table width="1050" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #000; height: 421px; min-height: 421px;">
- <tr>
- <td colspan="3" style="height: 50px; min-height: 50px; max-height: 50px;"></td>
- </tr>
- <tr>
- <td width="183" valign="top"><div id="menu">
- <div class="menu" id="menu1" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
- <div id="sousmenu1" style="display:none"><br>
- <div class="sousmenu"><a href="#">théâtre</a></div><br>
- <div class="sousmenu"><a href="#">enfance et jeunesse</a></div><br>
- <div class="sousmenu"><a href="#">poésie</a></div><br>
- <div class="sousmenu"><a href="#">traduction</a></div><br>
- <div class="sousmenu"><a href="#">inédits</a></div><br>
- <div class="sousmenu"><a href="#">autres publications</a></div><br>
- </div>
- <div class="menu" id="menu2" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
- <div id="sousmenu2" style="display:none"><br>
- <div class="sousmenu"><a href="#">saison 2010-2011</a></div><br>
- <div class="sousmenu"><a href="#">saison 2009-2010</a></div><br>
- <div class="sousmenu"><a href="#">archives</a></div><br>
- </div>
- <div class="menu" id="menu3" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
- <div id="sousmenu3" style="display:none"><br>
- <div class="sousmenu"><a href="#">lacoop</a></div><br>
- <div class="sousmenu"><a href="#">projets pour la scène</a></div><br>
- <div class="sousmenu"><a href="#">enseignement/Ateliers</a></div><br>
- <div class="sousmenu"><a href="#">radio</a></div><br>
- </div>
- <div class="menu" id="menu4" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
- <div id="sousmenu4" style="display:none"><br>
- <div class="sousmenu"><a href="#">à l'affiche</a></div><br>
- <div class="sousmenu"><a href="#">nouvelle publication</a></div><br>
- <div class="sousmenu"><a href="#">impromptus</a></div><br>
- </div>
- <div class="menu" id="menu5" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
- <div id="sousmenu5" style="display:none"><br>
- <div class="sousmenu"><a href="#">presse</a></div><br>
- <div class="sousmenu"><a href="#">liens</a></div><br>
- <div class="sousmenu"><a href="#">contact</a></div><br>
- </div>
- </div></td>
- <td width="800" valign="top" style="width: 665px; background: #fff;">contenu</td>
- <td width="17" style="background: #000;"> </td>
- </tr>
- </table>
- </body>
- </html>
|
Javascript
Code :
- function afficheMenu(obj){
- var idMenu = obj.id;
- var idSousMenu = 'sous' + idMenu;
- var sousMenu = document.getElementById(idSousMenu);
- /*****************************************************/
- /** on cache tous les sous-menus pour n'afficher **/
- /** que celui dont le menu correspondant est cliqué **/
- /** où 4 correspond au nombre de sous-menus **/
- /*****************************************************/
- for(var i = 1; i <= 5; i++){
- if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
- document.getElementById('sousmenu' + i).style.display = "none";
- }
- }
- if(sousMenu){
- //alert(sousMenu.style.display);
- if(sousMenu.style.display == "block" ){
- sousMenu.style.display = "none";
- }
- else{
- sousMenu.style.display = "block";
- }
- }
- }
|
Pour voir le résultat : http://www.la-grange-sardieres.fr/ [...] tion2.php#
Sous IE il y a également un problème, lorsque je clique sur un menu pour le dérouler, on attend un clique et l'image est entourée.
Pourriez-vous m'aider s'il vous plait ?
Merci beaucoup et bonne soirée
