me revoilou après une petite soirée de tests infructueux malheureusement
j'ai essayé de faire comme tu m'as dis mais j'ai du raté une étape malheureusement
après avoir tout retapé j'obtiens ca
mon code html
<!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=iso-8859-1" />
<title></title>
<style type="text/css">
<!--
#Logo {
position:fixe;
left:0;
top:20;
width:800px;
height:90px;
z-index:1;
margin-right: auto;
margin-left: auto;
}
#Centre {
position:relative;
left:0px;
top:0px;
width:800px;
height:500px;
z-index:2;
margin-right: auto;
margin-left: auto;
visibility: visible;
}
#Pied_de_page {
position:fixe;
left:0;
top:612;
width:800px;
height:24px;
z-index:3;
margin-right: auto;
margin-left: auto;
}
#navigation {
position:absolute;
left:0px;
top:0px;
width:160px;
height:500px;
z-index:5;
background-color: #9999CC;
margin-right: auto;
margin-left: auto;
visibility: visible;
}
#Contenu {
position:absolute;
left:181px;
top:0px;
width:619px;
height:500px;
z-index:6;
background-color: F7DEBB;
margin-right: auto;
margin-left: auto;
visibility: visible;
}
.Style4 {font-size: small
}
-->
</style>
<link href="CSS/Feuille-1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Menu.js"></script>
</head>
<body>
<div id="Logo"><img src="Images/Test logo Endy.jpg" width="800" height="90" /></div>
<div id="Centre">
<ul id="menus">
<li>Acceuil
</li>
<li>Endene
<ul class="Montre">
<li><a href="Bio.html">Bio</a></li>
<li><a href="Gouts.html">Goûts</a></li>
<li><a href="Palmares.html">Palmarès</a></li>
<li><a href="Stats.html">Stats</a></li>
</ul>
</li>
<li>Equipe
<ul>
<li><a href="Club.html">Club</a></li>
<li><a href="Competitions.html">Compétitions</a></li>
<li><a href="Calendrier.html">Calendrier</a></li>
<li><a href="Classements.html">Classements</a></li>
<li><a href="Equipe_nationale.html">Equipe nationale</a></li>
</ul>
</li>
<li>Goodies
<ul>
<li><a href="Photos.html">Photos</a></li>
<li><a href="Videos.html">Vidéos</a></li>
<li><a href="Interviews.html">Interviews</a></li>
<li><a href="Endene_vu_par.html">Endene vu par ...</a></li>
<li><a href="Vu_par_Endene.html">... vu par Endene</a></li>
<li><a href="Questions-reponses.html">Questions / Réponses</a></li>
</ul>
</li>
</ul>
<div id="Contenu">Acceuil</div>
</div>
<div id="Pied_de_page">
<p align="center"><span class="Style4"><strong></strong> © 2007 Tous droits réservés.</span></p>
</div>
</body>
</html>
mon code CSS (avec ton edit de rajouté)
.Menu_site {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: large;
font-style: normal;
line-height: normal;
font-weight: bolder;
color: #FFFFFF;
}
.Sous_menu_site {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
line-height: normal;
font-weight: normal;
color: #FFFFFF;
}
body {
margin: 0;
padding: 0;
background: #FFDBA9;
font: 100% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0px;
height: 500;
width: 160;
visibility: visible;
z-index: 6;
}
#menu dt {
cursor: pointer;
margin: 2px 0;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #F4BE74; /* Acceuil, Endene, Equipe, Infos, Goodies, Liens, Contact */
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #ffdba9; /* Fond des sous menus (fff -> blanc à l'origine)*/
}
#menu li a, #menu dt a {
color: #000; /* titre menu et sous menu */
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #F8D588; /* surbrillance sur le menu (eee à l'origine) */
}
.Cache
{
display: none;
}
.Montre
{
display: list-item;
}
et enfin mon code JS (je pense que mon problème vient de là)
// JavaScript Document
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
<dt onclick="javascript:montre();"><a href="Index.html">Accueil</a></dt>
<dt onclick="javascript:montre('smenu2');">Endene</dt>
<dt onclick="javascript:montre('smenu3');">Equipe</dt>
<dt onclick="javascript:montre();"><a href="Infos.html">Infos</a></dt>
<dt onclick="javascript:montre('smenu4');">Goodies</dt>
<dt onclick="javascript:montre();"><a href="Liens.html">Liens</a></dt>
<dt onclick="javascript:montre();"><a href="Contact.html">Contact</a></dt>
j'ai externalisé tout le JS mais maintenant je ne sais plus quoi mettre quand dans mon menu ca revoit directement à une page et non un sous menu (ex : pour envoyer à la page d'acceuil)
j'ai aussi peut etre mal lié mon fichier JS a ma page html
Après j'ai perdu tout la "mise en page" qu'il y avait dans le menu (pb CSS ? pas de compatibilité entre les 2 menus ?)
enfin voila j'avoue que plus ca va plus j'ai du mal deja que je partais pas de bien haut
en tout cas merci bien pour cette aide et j'espere ne pas trop t'agacer avec mes pb
Modifié par Yavimaya (01 Nov 2007 - 19:00)
. J'ai remis comme avant et ça ne change rien. Il doit falloir remettre la variable à zéro mais je ne sais pas comment il faut faire.
