Bonjour,
Alors cette fois, voici mon problème .
J'ai beau le regarder sous toute les coutures, impossible de faire passer ce menu sur tout les div ..
Alors voici mon code :
index.htm
ensuite voici mon css
voici le problème en image !
sous IE 6.0 :
http://img480.imageshack.us/img480/7545/ie7rl.png
sous FF 1.5 :
http://img480.imageshack.us/img480/9193/ff6bt.png
Merci d'avance
Modifié par Fijer (15 Jan 2006 - 03:30)
Alors cette fois, voici mon problème .
J'ai beau le regarder sous toute les coutures, impossible de faire passer ce menu sur tout les div ..
Alors voici mon code :
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Movie Factory, Communauté internationale de Videos BF</title>
<link href="format.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
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';}
}
//-->
</script>
</head>
<body>
<div id="global">
<div id="entete">
<div id="box_connection">
<form method="post">
<span class="txt_input">Login :</span> <input type="text" class="input_txt" name="login" />
<span class="txt_input">Password :</span> <input type="password" class="input_txt" name="mdp" />
<input type="submit" class="input_sub" name="connecter" value="OK" />
</form>
</div>
</div>
<div id="banniere"></div>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
<div id="entete_centre"></div>
<div id="milieu_centre">test</div>
<div id="pied_centre"></div>
</div>
</body>
</html>
ensuite voici mon css
/* CSS Document */
html,body {
background-color:#FFFFFF;
text-align:left;
margin:0;
padding:0;
}
#global {
width:923px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#entete {
width:923px;
height:53px;
background-image:url(images/Header_01.jpg);
background-repeat:no-repeat;
}
#banniere {
width:923px;
height:202px;
background-image:url(images/Banniere_02.jpg);
}
#menu {
width:923px;
height:40px;
background-image:url(images/Menu_03.jpg);
width: 100%; /* précision pour Opera */
}
#entete_centre {
z-index:20;
width:923px;
height:19px;
background-image:url(images/ent_centre_04.jpg);
}
#milieu_centre {
z-index:20;
width:923px;
height:2px;
background-image:url(images/milieu_centre_05.jpg);
}
#pied_centre {
z-index:20;
width:923px;
height:45px;
background-image:url(images/pied_06.jpg);
clear:both;
}
/* MISE EN FORME DES IMPUTS */
.input_txt {
width:100px;
height:10px;
border:1px solid black;
font-size:10px;
}
.input_sub {
border: 1px solid black;
font-family:"Courier New", Courier, monospace;
font-size:10px;
margin-bottom:2px;
margin-left:10px;
}
.txt_input {
font-family:"Courier New", Courier, monospace;
font-size:12px;
font-weight:bold;
text-align:right;
padding-left:10px;
}
/* ------------------------ */
#box_connection {
margin:0;
padding:0;
text-align:right;
padding-right:30px;
padding-top:18px;
}
#box_connection form {
margin: 0;
}
/* MENU */
dl, dt, dd, ul, li {
margin: 0;
padding-left: 0;
list-style-type: none;
}
#menu {
z-index:100;
padding-left:10px;
background-repeat:no-repeat;
}
#menu dl {
float: left;
width: 8em;
margin: 0;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
a {text-decoration: none;
color: black;
color: #222;
}
/* ----- */
voici le problème en image !
sous IE 6.0 :
http://img480.imageshack.us/img480/7545/ie7rl.png
sous FF 1.5 :
http://img480.imageshack.us/img480/9193/ff6bt.png
Merci d'avance
Modifié par Fijer (15 Jan 2006 - 03:30)