CSS 2 menus differents

Bonjour

je suis nouveau et je tiens qd meme a vous féliciter : bravo pour votre excellent site !

J ai crée qques menus en CSS depuis que je vous ai découvert et j avoue ne pas avoir eu bcp de problemes jusqu à aujourd hui ou j ai un cas bien precis.

Je voudrais créer 2 menu bien distinct, l un en haut de page avec un défilement des sous menu vers le bas et l autre menu se trouvant en bas avec un deffilement des sous menu en haut.

J ai deja commencé et cela donne : http://mc-hosting.com/events/home.php

Alors mon gros probleme c est qu en 1280 c est nickel par contre sur une definition autre c est la cata. (sur IE, je n ai pas checké firefox)

J ai bien compris que se serait une histoire de positionnement (mais si je change le absolute pour une autre choix c est pire)

Un grand merci d avance à tous


voici le CSS

<style type="text/css" media="screen">
<!-- 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
/* placement du menu, à modifier selon vos besoins */
position:absolute;
top: 250px;
left: 10px;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 184px;
position:relative;
margin-right:5px;
font-family:"Comic Sans MS",verdana;
font-size:11px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
}
#menu dd {
display: none;
border: 1px solid gray;
margin-top:5px;
background-color:#FFFFFF;
}
#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 li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}

#menu_b {
top: 625;
left: 161;
z-index:100;
width: 100%;
}
#menu_b dl {
float: left;
width: 184px;
position:relative;
margin-right:5px;
font-family:"Comic Sans MS",verdana;
font-size:11px;
}
#menu_b dt {
cursor: pointer;
text-align: center;
font-weight: bold;

width:184px;

}
#menu_b dd {
border: 1px solid gray;
position:relative;
bottom:2em;
width:184px;
background-color:#FFFFFF;
}
#menu_b li {
text-align: center;
}
#menu_b li a, #menu_b dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu_b li a:hover, #menu_b dt a:hover {
background: #eee;
}
-->
</style>

et l HTML (avec du PHP pour la génération des li)

<div id="menu">
	<dl>
		<dt onMouseOver="javascript:montre();"><a href="" title="Retour à l'accueil">QUI SOMMES-NOUS ?</a></dt>

	</dl>
	
	<dl>			
		<dt onMouseOver="javascript:montre('smenu1');">TEAM BUILDING</dt>
			<dd id="smenu1">
				<ul>
										<li><a href="show_event.php?project_id=15">evenemment20</a></li>
										<li><a href="show_event.php?project_id=14">evenemment1</a></li>
									</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onMouseOver="javascript:montre();"><a href="">NOS REALISATIONS</a></dt>
	</dl>

	
	<dl>	
		<dt onMouseOver="javascript:montre('smenu3');">FÊTES À THÈMES</dt>
			<dd id="smenu3">
				<ul>
										<li><a href="show_event.php?project_id=17">even_soireeth_fr1</a></li>
									</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onMouseOver="javascript:montre();"><a href="">DEMANDE D'INFOS</a></dt>

	</dl>
</div>
<div id="menu_b">
	<dl>
		<dt onMouseOver="javascript:montre();"><a href="" title="Retour à l'accueil">HOME PAGE</a></dt>

	</dl>
	
	<dl>			
		<dt onMouseOver="javascript:montre('smenu6');">FAMILY DATE</dt>
			<dd id="smenu6">
				<ul>
														</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onMouseOver="javascript:montre();"><a href="">PRÉSENTATION DE PRODUITS</a></dt>
	</dl>

	
	<dl>	
		<dt onMouseOver="javascript:montre('smenu8');">SAINT-NICOLAS</dt>
			<dd id="smenu8">
				<ul>
															<li><a href="show_event.php?project_id=18">pppp</a></li>
										<li><a href="show_event.php?project_id=19">saint nicolas2</a></li>
										<li><a href="show_event.php?project_id=20">nico100</a></li>
									</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onMouseOver="javascript:montre('smenu9');">RÉFÉRENCES</dt>
	</dl>
</div>

Modifié par phoelis (11 Apr 2006 - 11:15)