Problème de sous menu invisible

Question

SIILILLE

27 Apr 2007 à 10:53

Bonjour, je sollicite votre aide car j'ai un petit soucis! Je débute plus ou moins et j'ai un problème avec la mise en page que je souhaite adopter pour mon site : le code java fonctionne bien pour l'affichage du menu dans une page simple mais avec la mise en page que j'ai adopté, je ne parviens pas du tout à faire apparaitre mes sous menus! Est ce que vous sauriez quel est le problème et comment le résoudre? (je pense sans savoir vraiment que le problème viendrait des balises div mais je ne vois vraiment pas comment résoudre le problème.

Merci d'avance.

Désolé pour la gène occasionné par la mise en page.
Pour le sous-menu, j'ai déjà consulté ailleurs sur le site et sur le forum mais j'aimerais vraiment garder ce code java. Si la réponse est quelquepart sur le site merci de me rediriger pour que je puisse trouver.

Ci-joint le code de la page et les css et js.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
<link href="....css" rel="stylesheet" type="text/css">
</head>

	<body id="null">
	<script src="....js" type="text/javascript"></script>
	
		<div id="page">
			
			<div id="entete">
			</div>
		<div id="menu">
  <div id="menu_princ" class="monmenu">
<a href="#" class="item_menu_princ" id="1">...</a> | 
<a href="#" class="item_menu_princ" id="2">...</a> | 
<a href="#" class="item_menu_princ" id="3">...</a> | 
<a href="#" class="item_menu_princ" id="4">...</a> | 
<a href="#" class="item_menu_princ" id="5">...</a> | 
<a href="#" class="item_menu_princ" id="6">...</a> | 
<a href="#" class="item_menu_princ" id="7">...</a> |</div>
<div id="sm1" class="sousmenu" >
<span id="itemsousmenu">Scène Française : </span>
<a href="#">Sous menu 1.1</a> | <a href="#">Sous menu 1.2</a> | <a href="#">Sous menu 1.3</a> | <a href="#">Sous menu 1.4</a> | <a href="#">Sous menu 1.5</a> | <a href="#">Sous menu 1.6</a> | <a href="#">Sous menu 1.7</a></div>

<div id="sm2" class="sousmenu">
<span id="itemsousmenu">... : </span>
<a href="#">Biographie</a> | <a href="#">Discographie</a> | <a href="#">DVD</a> | <a href="#">Distinctions</a> | <a href="#">Liens</a></div>
<div id="sm3" class="sousmenu">
<span id="itemsousmenu">... : </span>
<a href="#">Biographie</a> | <a href="#">Discographie</a> | <a href="#">DVD</a> | <a href="#">Distinctions</a> | <a href="#">Liens</a></div>
<div id="sm4" class="sousmenu">
<span id="itemsousmenu">... : </span>
<a href="#">Biographie</a> | <a href="#">Discographie</a> | <a href="#">DVD</a> | <a href="#">Distinctions</a> | <a href="#">Liens</a></div>
<div id="sm5" class="sousmenu">
<span id="itemsousmenu">... : </span>
<a href="#">Sous menu 5.1</a> | <a href="#">Sous menu 5.2</a> | <a href="#">Sous menu 5.3</a> | <a href="#">Sous menu 5.4</a> | <a href="#">Sous menu 5.5</a> | <a href="#">Sous menu 5.6</a> | <a href="#">Sous menu 5.7</a></div>
<div id="sm6" class="sousmenu">
<span id="itemsousmenu">... : </span>
<a href="#">Biographie</a> | <a href="#">Discographie</a> | <a href="#">DVD</a> | <a href="#">Distinctions</a> | <a href="#">Liens</a></div>
<div id="sm7" class="sousmenu">
<span id="itemsousmenu">... : </span>
<a href="#">Biographie</a> | <a href="#">Discographie</a> | <a href="#">DVD</a> | <a href="#">Distinctions</a> | <a href="#">Liens</a></div>
</div>



			
			
			
			
			
						<div id="contenu">
				<div class="titre">...</div>
<p>...</p>
				<div class="soustitre">...</div>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>	
</div>
			
			<div id="pied">
				Copyright 2007 			</div>			
		</div>

		
	</body>
</html>

[code]
/*------------------------------- Style général du site ----------------------------------------*/
body
{
	margin: 0px;
	padding: 0px;
	text-align: center ;
	color: #616161;
	font-size: 11px;
	font-family: Verdana, "Trebuchet MS", helvetica, sans-serif ;
	background-color: #333333;
}

a
{
	color: #2d4293;
	text-decoration: none;
}

p
{
	font-size: 1em;
}

div
{
	font-size: 11px;				/* taille de la police par defaut du contenu */
}

/*------------------------------- Style de mise en page ----------------------------------------*/

div#page
{
	margin: 5px auto;
	left:0px;
	top:0px;
	width:775px;
	border: 1px solid gray;
	background-color: #CCCCCC;
	/*-moz-border-radius: 10px;*/
	z-index: 1;
}

div#entete
{
	background-image: url(pics/theme_entete.GIF);
	background-repeat: no-repeat;
	width: 100%;
	height: 110px;
}

.entete_titre
{
	font-size:25px;
	font-weight: bold;
	text-align: center;
	color: black;
	padding-top: 60px;
	border: 1px solid yellow;
}

/*------------------------------------ Structure Dynamique du Menu-------------------------*/
#menu {
	width: 100%;
	height: 40px;
	padding-left: 0px;
}
.monmenu
{
	margin: 0px 10px;
	height:20px;
	font-size:0.85em;
	background-image: url('../pics/monmenu.gif');
	background-repeat: no-repeat;
	position: absolute;
	left: 10px;
	width: 909px;
}
.sousmenu {
	margin: 0px 10px;
	width:1116px;
	height:15px;
	font-size:0.85em;
	background-image: url('../pics/monmenu.gif');
	background-repeat: no-repeat;
	position: absolute;
	visibility: hidden;
	left: 7px;
	top: 137px;
}

/*------------------------------------ Structure du contenu -------------------------*/

#contenu
{
	text-align: left;
	min-height: 400px;		/*hauteur minimum d'une page */
	padding: 5px 15px 5px 15px;	
}

/* for Internet Explorer */
* html #contenu 
{
	height: 400px;
}

div#pied
{
	background-image: url(pics/theme_pied.GIF);
	background-repeat: no-repeat;
	width: 100%;
	margin-top: 10px;
	height: 30px;
	color: white;
}
.titre
{
	padding-left: 25px;
	line-height: 25px;
	font-size: 1.4em;
	color: #006699;
	font-weight: bold;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #006699;
}

.soustitre
{
	margin-left: 15px;
	padding-left: 5px;
	color: #006699;
	font-weight: bold;
	border-bottom-width: 2px;
	border-left-width: 3px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #006699;
	border-left-color: #006699;
}

.vis {
	display: inline;
}
.invis {
	display: none;
}


// JavaScript Document
var num_items = 7;
function gestion(event){
    for (var i=1; i<= num_items; i++){document.getElementById("sm" + i).style.visibility="hidden";}
	document.getElementById("sm" + event.target.id).style.visibility="visible";
}
function gestion_msie(event){
    for (var i=1; i<= num_items; i++){document.getElementById("sm" + i).style.visibility="hidden";}
	document.getElementById("sm" + event.srcElement.id).style.visibility="visible";
}
function bouger(event)	{
	  if ((event.clientY <100)||(event.clientY > 200))
		{for (var i=1; i<= num_items; i++){document.getElementById("sm" + i).style.visibility="hidden";}}
}
function initialisation(){
	if (nav==1)
		{document.getElementById("doc").addEventListener('mousemove',bouger, false);
		for (var i=1; i<= num_items; i++)
			{document.getElementById(String(i)).addEventListener('mouseover',gestion, false);}
		}
	else
		{document.getElementById("doc").attachEvent('onmousemove',bouger);
		for (var i=1; i<= num_items; i++)
			{document.getElementById(String(i)).attachEvent('onmouseover',gestion_msie);}
		}
}
<!-- -------------------------------------------------------------- -->
var nav=2;
if (window.addEventListener)
	{	nav=1;
		window.addEventListener('load',initialisation,false);	 }
else
	{ 	window.attachEvent('onload',initialisation);	}
	
<!-- -------------------------------------------------------------- -->
function affiche() {
x=window.document.getElementById("art"+window.event.srcElement.id);
if (window.event.srcElement.tagName=="INPUT")
{
if (x.className=="vis"){x.className="invis";} else { x.className="vis";}

}
}

function mafonction(e) {
if (nom=='Microsoft Internet Explorer')
alert(window.event.srcElement.src);
else
alert(e.target.src);}

function initialisation() {
document.getElementById("image").onclick=mafonction;}

var nom=navigator.appName;
window.onload=initialisation;

Modifié par SIILILLE (27 Apr 2007 - 11:06)

Raphael

Administrateur

27 Apr 2007 à 10:56

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

Jean-Phi

27 Apr 2007 à 11:03

Tu m'appeles pas de fonction javascript pour afficher tes sous menus :

<a href="#" class="item_menu_princ" id="1"> Menu 1 </a>

Un p'tit onclick peut etre? Smiley biggrin

SIILILLE

27 Apr 2007 à 11:09

Plus besoin du onclick normalement parce que le code est fait pour ne plus avoir besoin du onclick. (sans mise en page aucune, le menu fonctionne)

Jean-Phi

27 Apr 2007 à 11:11

Ba désolé je ne maitrise pas trop le js donc je ne peux pas t'aider plus, mais par contre avec un onclick j'ai réussi à faire marcher ton truc, si tu veux, tu n'as qu'à me dire Smiley smile

Bonne recherche

SIILILLE

27 Apr 2007 à 11:15

Merci beaucoup, je vais encore chercher mais au cas où j'opterai pour ta solution. Encore merci.

Jean-Phi

27 Apr 2007 à 11:21

Par contre je suis curieux de connaitre ta solution Smiley cligne

SIILILLE

28 Apr 2007 à 12:08

Jean-Phi, tu as gagné!
On peut donc dire que le problème est résolu.

Jean-Phi

29 Apr 2007 à 21:26

Comment ça j'ai gagné ? tu as du passer par un onclick ? Smiley biggrin

Sujet clos

Questions générales et questions de débutants

Problème de sous menu invisible