Bonjour, quelqu'un pourrait-il m'aider à résoudre ce problème que vous avez dû rencontrer :
Je travaille sur un kit graphique pour un site associatif. Pour l'instant ça se passe nickel, en tout cas à 100% sur Firefox, mais sous IE j'ai un problème avec le menu déroulant.
Regardez sous FF puis sous IE, le menu sous IE semble "passer sous la bannière"...
http://www.fius.net/cfbf/index2
Je ne sais pas si je suis assez clair, voici le code xhtml et css :
*html
<!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" xml:lang="fr" lang="fr">
<head>
<title>© CFBF Picardie - Site Régional de la Confédération Française des Batteries Fanfares</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" media="screen" type="text/css" title="defaut" href="themes/defaut.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="3 days" />
<meta name="author" content="FIUS.net & Frederic Benard & Clement Dorion" />
<meta name="reply-to" content="fred@fius.net" />
<meta name="copyright" content="BFBF 2007" />
<meta name="lang" content="fr" />
<meta name="description" content="Site Régional de la Confédération Française des Batteries Fanfares" />
<meta name="keywords" content="CFBF,BF,Picardie,CFBF Picardie,BF Picardie,Batterie-Fanfare,Batterie-Fanfare Picardie" />
<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="conteneur">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 6</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
<li><a href="#">Sous-menu 4</a></li>
<li><a href="#">Sous-menu 5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 5</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
<li><a href="#">Sous-menu 4</a></li>
<li><a href="#">Sous-menu 5</a></li>
<li><a href="#">etc...</a></li>
<li><a href="#">etc...</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 4</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
<li><a href="#">Sous-menu 4</a></li>
<li><a href="#">Sous-menu 5</a></li>
<li><a href="#">etc...</a></li>
<li><a href="#">etc...</a></li>
<li><a href="#">etc...</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 3</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu5');">Menu 2</dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
<li><a href="#">Sous-menu 4</a></li>
<li><a href="#">Sous-menu 5</a></li>
<li><a href="#">etc...</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu6');">Menu 1</dt>
<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-menu 1</a></li>
<li><a href="#">Sous-menu 2</a></li>
<li><a href="#">Sous-menu 3</a></li>
<li><a href="#">Sous-menu 4</a></li>
<li><a href="#">Sous-menu 5</a></li>
<li><a href="#">etc...</a></li>
<li><a href="#">etc...</a></li>
<li><a href="#">etc...</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="index2.html" title="Retour à l'accueil">Accueil</a></dt>
</dl>
</div><!-- (fermeture du bloc "menu")-->
<div id="header"><!--banniere--></div>
<div id="corps"><!-- corps -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pretium, eros a dapibus ultrices, ligula arcu aliquam justo, congue gravida quam tortor eu metus. Etiam lacinia risus id sem. Pellentesque tellus. Aliquam ac erat vel ligula viverra lobortis. In hac habitasse platea dictumst. Duis accumsan. Nullam eget libero. Aliquam erat volutpat. Sed lectus lorem, commodo ut, elementum quis, molestie nec, tortor. Donec est massa, sollicitudin eget, aliquet sagittis, bibendum sed, libero. Nullam libero mi, dignissim in, vulputate sit amet, pharetra at, orci. Praesent pretium pulvinar risus.
In vel erat sit amet lacus ultricies congue. Nulla mattis dignissim tellus. Maecenas placerat tincidunt massa. Praesent dignissim nibh sit amet ipsum. Maecenas molestie neque non ipsum. Aenean nonummy. Morbi faucibus. Cras id lorem sed pede tincidunt lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent velit purus, aliquam vel, rhoncus facilisis, semper posuere, mi. Fusce sit amet ipsum at sem fringilla sollicitudin. Fusce est eros, dignissim id, venenatis id, fermentum vel, eros. Morbi aliquam feugiat mi. Aliquam eu elit.
Nulla suscipit libero. In eget turpis sit amet est eleifend feugiat. Proin sit amet dui eget urna euismod vulputate. Donec a turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc bibendum, lorem sit amet lacinia adipiscing, nunc diam blandit massa, sit amet sodales mi ante et metus. Vivamus a metus. Ut libero. Maecenas ultrices. Aenean placerat. Praesent quam libero, consequat sit amet, convallis eu, vulputate vehicula, arcu. Aliquam placerat velit id massa. Curabitur mollis.
Vestibulum mi. Sed id leo in libero molestie auctor. Suspendisse viverra dapibus magna. Donec sodales semper mauris. Donec vel nunc. Suspendisse potenti. Curabitur fringilla posuere nulla. Proin erat turpis, fringilla at, aliquet vitae, varius ac, neque. Donec a eros ut ipsum auctor commodo. Morbi rutrum dui ut metus. Nulla luctus lobortis tellus. Etiam enim. Nulla rhoncus tempus risus.
Duis ut nulla ut justo nonummy lobortis. Fusce tristique, dolor quis adipiscing elementum, felis urna mattis urna, lacinia placerat lacus ipsum vitae erat. Fusce porttitor mauris eu wisi. In mollis blandit ante. Cras eget urna eget lectus porta mollis. Ut congue molestie ipsum. Praesent et odio. In imperdiet, augue in congue varius, lectus lorem lacinia metus, ut facilisis dolor risus quis massa. Duis pharetra. Pellentesque eu nibh. Nulla lectus orci, tristique eu, imperdiet congue, scelerisque a, nisl. Mauris ut est sit amet mauris lacinia posuere. Morbi tempor aliquam lorem. Etiam consectetuer wisi quis nunc.
Vivamus tempor lorem. Nam est elit, pulvinar a, placerat vel, pulvinar non, ipsum. Phasellus scelerisque scelerisque enim. Proin sit amet nulla. Cras hendrerit massa quis erat. Nullam eros quam, pretium eu, cursus ut, consequat eget, libero. Praesent vitae mi non risus molestie consequat. Etiam commodo molestie lacus. Curabitur urna wisi, pharetra eu, lobortis dictum, faucibus et, mi. Praesent magna eros, ornare in, tincidunt et, ultrices vel, leo. Fusce ligula tellus, lobortis eu, volutpat vel, eleifend at, risus. In vehicula felis elementum erat. Nullam vehicula adipiscing ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nullam et ipsum eu urna suscipit ullamcorper. Fusce eros nunc, mollis vitae, venenatis vitae, condimentum vitae, pede. Quisque ac justo.
Ut sit amet arcu. Cras porttitor quam nec turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas rutrum urna ac nunc. Aliquam et mi. Nam condimentum. Etiam gravida congue ante. Aenean accumsan. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam aliquam, eros sit amet volutpat porttitor, neque justo molestie dui, vitae fringilla erat dolor sit amet orci. Maecenas est diam, congue at, suscipit quis, tempor quis, felis. Aenean id diam non neque hendrerit consectetuer. Morbi et odio. Etiam pretium neque sit amet dolor. Aliquam erat volutpat. Nunc interdum nisl id lectus. Curabitur quis ligula ut lectus elementum ultrices.
Sed tellus. Nullam id wisi. Sed vel metus sed lectus elementum porttitor. Praesent et dolor. Phasellus velit nulla, mollis euismod, blandit vitae, malesuada ac, felis. Donec lectus nisl, ullamcorper nec, malesuada ac, commodo sit amet, mi. Curabitur lacus dolor, condimentum ac, pulvinar vitae, lacinia sit amet, magna. Curabitur nec metus sit amet libero congue auctor. Pellentesque ut nunc quis augue nonummy aliquet. Integer luctus ante ac pede. Morbi viverra dui sit amet lacus.
Suspendisse laoreet libero quis diam. Mauris hendrerit laoreet nunc. Quisque non est. Nulla tempus. Cras dolor mi, imperdiet nec, tristique sed, aliquet sed, justo. Fusce augue metus, facilisis ac, tincidunt vitae, elementum ut, arcu. Nulla rhoncus urna quis turpis. Suspendisse tincidunt nunc quis eros. Quisque feugiat tellus sodales nunc. Mauris sit amet tellus. Aenean pede. Donec vestibulum metus vel sem. Curabitur pede. Morbi molestie tortor sit amet diam. Suspendisse potenti. Fusce at mauris ut tellus luctus fermentum. Etiam tempor, libero ac vulputate varius, est nisl sollicitudin risus, nec sagittis sapien ligula et wisi. Cras facilisis, felis in vehicula bibendum, diam nibh convallis magna, eu malesuada arcu libero id metus. Etiam justo est, suscipit nec, feugiat ac, ultrices a, pede. Suspendisse mollis.
Nunc aliquam, lacus at blandit faucibus, erat lorem interdum augue, vel aliquet dui elit vel sapien. Integer sapien nisl, rutrum a, dapibus vitae, condimentum sit amet, felis. Nunc tincidunt dolor nec pede. Duis ut diam in tortor placerat adipiscing. Phasellus malesuada eros eget mi. Vivamus leo eros, vulputate commodo, pellentesque vitae, egestas ut, lectus. Integer convallis, urna vel dictum luctus, nulla nibh molestie nulla, ac vehicula sem dolor et neque. Duis risus. Donec pretium, purus a rhoncus porttitor, sapien augue auctor purus, eu bibendum dui lorem quis lacus. Duis aliquam, mauris eget pharetra eleifend, lectus neque lobortis lorem, lacinia ultricies erat wisi ut risus. Praesent non lacus ut mi mattis adipiscing. Sed eu nunc. Aliquam elementum. Pellentesque nonummy interdum elit. Maecenas nec est. Nam lacinia neque ac elit. Nunc eu sapien. Nullam orci. Vivamus odio pede, consectetuer vitae, convallis a, ullamcorper id, arcu.
</p>
</div><!-- (fermeture du bloc "corps")-->
<div id="reflet"><p class="copy">© CFBF Picardie 2007, tous droits réservés</p></div>
</div><!-- (fermeture du bloc "conteneur")-->
</body>
</html>
*css
body {
margin: 0;
padding: 0;
background: #ff9900 url("bg.png") repeat-x;
font: 11px verdana, arial, sans-serif;
}
#conteneur {
margin: auto;
width: 860px;
}
#header {
margin: auto;
width: 860px;
height: 151px;
border-left: 1px solid #ff5b0f;
border-right: 1px solid #ff5b0f;
background: url("header.jpg") no-repeat top;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
z-index:100;
width: 860;
height: 33px;
background: url("bgmenu.png") no-repeat;
}
#menu dl {
float: right;
width: 100px;
margin: 0;
}
#menu dt {
cursor: pointer;
height: 28px;
padding-top: 5px;
text-align: center;
color: #fff;
font: 15px bold "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
#menu dd {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a {
color: #292929;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover {
background: #ff9900;
}
#menu dt a {
color: #ff9900;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu dt a:hover {
color: #fff;
}
#corps {
margin:auto;
padding: 0;
width: 860px;
border-left: 1px solid #ff5b0f;
border-right: 1px solid #ff5b0f;
border-bottom: 1px solid #ff5b0f;
background: #fff url("bgcorps.png") no-repeat;
}
#corps p {
padding: 30px 10px 20px 10px;
margin: 0;
text-align: justify;
}
#reflet {
margin: auto;
width: 860px;
height: 72px;
background: url("reflet.png") repeat-x;
}
.copy {
margin: 0;
color: #ff9900;
font-size: 10px;
text-align: right;
padding: 5px;
}
Merci d'avance,
Fiu
Afficher la suite
