Bonjour à tous

Voila mon pb :

Sur mon forum (phpbb), l'ensemble des boutons permettant l'accès direct aux différentes pages commence à être trop "placard", donc je souhaite passer par un menu déroulant horizontal.

J'ai trouvé ici celui qui me plaît : http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

Il est en place (sous la bannière), seulement voila, lors du déploiement des sous-menus, il décale vers le bas le forum en fonction du nombre de lignes des sous-menus.

Pour l'instant je l'ai mis dans un <td> avec la bonne hauteur, comme ça plus de décalage, mais ça fait un gros vilain vide en dessous du menu

Ce que je souhaiterais, c'est que le déploiement des sous-menus se fasse "par-dessus" le reste du forum (qui est dans une table) au lieu de le décaler, et bien sûr que se soit compatible Firefox, IE, Opéra, etc

Est-ce possible ?
Comment faire ?
Qu'ai-je mal fait ou pas compris ?

Voila le code du fichier "overall_header.tpl"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="icon" href="animated_favicon1.gif" type="image/gif" >
{META}
{NAV_LINKS}
<title>{SITENAME} :: {PAGE_TITLE}</title>
<link rel="stylesheet" href="templates/printemps/{T_HEAD_STYLESHEET}" type="text/css">
<link rel="stylesheet" type="text/css" href="./../templates/picker/picker.css" media="screen">
<link rel="stylesheet" type="text/css" href="./templates/{HYPERCELL_PATH}/hypercell.css" media="screen">
<!--[if IE]> 
<style type="text/css" media="screen">
/* This experiment is try to emulate the :hover pseudo-class
   and its dynamic effect on Internet Explorer 5+, because IE support
   :hover only on A (anchor) element */
.hccRow, .hccRow-new, .hccRow-locked, .hccRow-locked-new, .hccRow-moved, .hccRow-link,
.hccRow-announce, .hccRow-announce-new, .hccRow-sticky, .hccRow-sticky-new, .hccRow-hot, .hccRow-hot-new,
.row3Right, .hccRow-right, .hccRow-new-right, .hccRow-locked-right, .hccRow-locked-new-right, .hccRow-moved-right,
.hccRow-announce-right, .hccRow-announce-new-right, .hccRow-sticky-right, .hccRow-sticky-new-right,
.hccRow-hot-right, .hccRow-hot-new-right { behavior: url("./templates/{HYPERCELL_PATH}/hover.htc"); }
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="./templates/{T_TEMPLATE_NAME}/rcs_stylesheet.css" media="all">
<!-- style type="text/css">
<!-- start mod : Resize Posted Images Based on Max Width -->
<script type="text/javascript">
//<![CDATA[
<!--

var rmw_max_width = 400; // you can change this number, this is the max width in pixels for posted images
var rmw_border_1 = '1px solid {T_BODY_LINK}';
var rmw_border_2 = '2px dotted {T_BODY_LINK}';
var rmw_image_title = '{L_RMW_IMAGE_TITLE}';

//-->
//]]>
</script>
<script language="Javascript" type="text/javascript">
<!--
function link_to_post(pid)
{
	temp = prompt( "{COPY}", "http://" + "{SERVER_NAME}" + "{SCRIPT_PATH}" + "viewtopic" + "." + "{PHPEX}" + "?" + "{POST_POST_URL}" + "=" + pid + "#" + pid );

	return false;
}
-->
</script>
<script type="text/javascript" src="{U_RMW_JSLIB}"></script>
<!-- fin mod : Resize Posted Images Based on Max Width -->
<script language="JavaScript" type="text/javascript"> 
var oMarquees = [], oMrunning, 
   oMInterv =        20,     //interval between increments 
   oMStep =          1,      //number of pixels to move between increments 
   oMDirection =     'left'; //'left' for LTR text, 'right' for RTL text 

/***     Do not edit anything after here     ***/ 

function doDMarquee() { 
   if( oMarquees.length || !document.getElementsByTagName ) { return; } 
   var oDivs = document.getElementsByTagName('div'); 
   for( var i = 0, oDiv; i < oDivs.length; i++ ) { 
      oDiv = oDivs[i]; 
      if( oDiv.className && oDiv.className.match(/\bdmarquee\b/) ) { 
         if( !( oDiv = oDiv.getElementsByTagName('div')[0] ) ) { continue; } 
         if( !( oDiv.mchild = oDiv.getElementsByTagName('div')[0] ) ) { continue; } 
         oDiv.mchild.style.cssText += ';white-space:nowrap;'; 
         oDiv.mchild.style.whiteSpace = 'nowrap'; 
         oDiv.style.height = oDiv.offsetHeight + 'px'; 
         oDiv.style.overflow = 'hidden'; 
         oDiv.style.position = 'relative'; 
         oDiv.mchild.style.position = 'absolute'; 
         oDiv.mchild.style.top = '0px'; 
         oDiv.mchild.style[oMDirection] = oDiv.offsetWidth + 'px'; 
         oMarquees[oMarquees.length] = oDiv; 
         i += 2; 
      } 
   } 
   oMrunning = setInterval('aniMarquee()',oMInterv); 
} 
function aniMarquee() { 
   var oDiv, oPos; 
   for( var i = 0; i < oMarquees.length; i++ ) { 
      oDiv = oMarquees[i].mchild; 
      oPos = parseInt(oDiv.style[oMDirection]); 
      if( oPos <= -1 * oDiv.offsetWidth ) { 
         oDiv.style[oMDirection] = oMarquees[i].offsetWidth + 'px'; 
      } else { 
         oDiv.style[oMDirection] = ( oPos - oMStep ) + 'px'; 
      } 
   } 
} 
if( window.addEventListener ) { 
   window.addEventListener('load',doDMarquee,false); 
} else if( document.addEventListener ) { 
   document.addEventListener('load',doDMarquee,false); 
} else if( window.attachEvent ) { 
   window.attachEvent('onload',doDMarquee); 
} 
</script>
<!-- start mod : Resize Avatars Based on Max Width and Height -->
<script type="text/javascript" src="{U_RMWA_JSLIB}"></script>
<!-- fin mod : Resize Avatars Based on Max Width and Height -->
<!-- BEGIN switch_enable_pm_popup -->

<script language="Javascript" type="text/javascript">
<!--
	if ( {PRIVATE_MESSAGE_NEW_FLAG} )
	{
		window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
	}
//-->
</script>
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_new_download -->
<script language="Javascript" type="text/javascript">
<!--
	window.open('{switch_new_download.U_NEW_DOWNLOAD_POPUP}', '_blank', 'HEIGHT=225,resizable=yes,WIDTH=400');
//-->
</script>
<!-- END switch_new_download -->

<link rel="stylesheet" href="{BBC_BOX_SHEET}" type="text/css">
<script language="javascript" src="templates/bbc_box/fade.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="./includes/js_dom_toggle.js"></script>
<script language="javascript" type="text/javascript" src="templates/tooltips.js"></script>
<script src="templates/prototype.js" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
<!--
var tooltipon = false;

function searchTooltip(){

  if (tooltipon){
    $('searchbox').style.display = 'none';

    tooltipon = false;
  }
  else{
    $('searchbox').style.display = 'block';
    $('searchbox').style.position = 'absolute';
    
    var obj = $('searchlink');
    var pos = Position.cumulativeOffset(obj);
    $('searchbox').style.left = pos[0] + 'px'; 
    $('searchbox').style.top = pos[1]+20 + 'px'; 
    
    tooltipon = true;
  }

  return false;
}

//-->
</script>
<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>

<style type="text/css" media="screen">
<!-- 

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu {
	position: relative; 
	top: 0;
	left: 0px;
	z-index:100;
	width: 100%; 
}

#menu dl {
	float: left;
}

#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
}

#menu dd {
	display: none;
}

#menu li {
	background: #b5f9f2;
	height: 25px;
	border-left : 1px solid #ffffff;
	border-top : 1px solid #ffffff;
	border-right : 1px solid #006a00;
	border-bottom : 1px solid #006a00;
}

#menu li a, #menu dt a {
	background: #b5f9f2;
	text-decoration: none;
	display: block;
	height: 100%;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
	background: #b5f9f2;
	filter: alpha(opacity=80);
	-moz-opacity: .80;
}

#site {
	position: relative;
	z-index: 1;
	top : 70px;
	left : 10px;
	color: #000;
	background-color: #ddd;
	padding: 5px;
}
-->
</style>

<link rel="stylesheet" href="templates/printemps/rcs_stylesheet.css" type="text/css">
</head>
<body bgcolor="#d5f9f2">
<iframe src="{INSTANT_MSG}" height="0" width="0"></iframe>
<a name="top"></a>

<!-- BEGIN switch_new_download_message -->
	<table cellpadding="0" cellspacing="0" border="0" align="center">
		<tr>
			<td class="row1" align="center"><span class="gen">{switch_new_download_message.NEW_DOWNLOAD_MESSAGE}</span></td>
		</tr>
	</table>
<!-- END switch_new_download_message -->

<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
	<td class="bodyline">
		<table width="100%" cellspacing="0" cellpadding="0" border="0">
			<tr>
				<td align="center" width="100%" valign="middle">
					<a href="{U_INDEX}"><img src="/ange/images/winnie.gif" border="0" /></a>
				</td>
			</tr> 
			<tr>
				<td align="center" width="100%" valign="middle">
					<br />
						<table cellspacing="0" cellpadding="2" border="0" align="center">
							<tr> 
								<td align="center" valign="top" nowrap="nowrap" height="160" width="833">
									<div id="menu" align="center">
										<dl>			
											<dt onMouseOver="javascript:montre('smenu1');"><img src="templates/printemps/images/Nav.png" /></dt>
												<dd id="smenu1">
													<ul>
														<li><a href="{U_PORTAL}" class="mainmenu"><img vspace="2" src="templates/printemps/images/acceuil.png" border="0" alt="{L_HOME}" /></a></li>
														<li><a href="{U_INDEX}"><img vspace="2" src="templates/printemps/images/forum.png" border="0" /></a></li>
													</ul>
												</dd>
										</dl>
										
										<dl>			
											<dt onMouseOver="javascript:montre('smenu2');"><img src="templates/printemps/images/RechInfo.png" /></dt>
												<dd id="smenu2">
													<ul>
														<li><a onClick="return searchTooltip();" href="{U_SEARCH}" class="mainmenu" id="searchlink"><img vspace="2" src="templates/printemps/images/icon_mini_search.png" border="0" alt="{L_SEARCH}" /></a></li>
														<li><a href="{U_FAQ}" class="mainmenu"><img vspace="2" src="templates/printemps/images/icon_mini_faq.png" border="0" alt="{L_FAQ}" /></a></li>
														<li><a href="{U_MEMBERLIST}" class="mainmenu"><img vspace="2" src="templates/printemps/images/icon_mini_members.png" border="0" alt="{L_MEMBERLIST}" /></a></li>
														<li><a href="{U_GROUP_CP}" class="mainmenu"><img vspace="2" src="templates/printemps/images/icon_mini_groups.png" border="0" alt="{L_USERGROUPS}" /></a></li>
													</ul>
												</dd>
										</dl>

								<!-- BEGIN switch_user_logged_out -->
										<dl>	
											<dt><a href="{U_REGISTER}" class="mainmenu"><img src="templates/printemps/images/icon_mini_register.gif" border="0" alt="{L_REGISTER}" /></a></dt>
										</dl>
								<!-- BEGINELSE switch_user_logged_out -->										
										<dl>	
											<dt><a href="{U_PROFILE}" class="mainmenu"><img src="templates/printemps/images/icon_mini_profile.png"  border="0" alt="{L_PROFILE}" /></a></dt>
										</dl>
								<!-- END switch_user_logged_out -->
										
										<dl>	
											<dt><a href="{U_PRIVATEMSGS}" alt="{PRIVATE_MESSAGE_INFO}" title="{PRIVATE_MESSAGE_INFO}" class="mainmenu"><img src="{PRIVMSG_IMG}" border="0" alt="{PRIVATE_MESSAGE_INFO}" /></a></dt>
										</dl>
									
										<dl>	
											<dt onMouseOver="javascript:montre('smenu3');">{I_JOUER}</dt>
												<dd id="smenu3">
													<ul>
														<li><a href="arcade.php" class="mainmenu"><img vspace="2" src="templates/printemps/images/icon_mini_arcade.png" border="0" alt="{L_ARCADE}" title="{L_ARCADE}" /></a></li>
														<li><a href="salle_de_jeux.php" class="mainmenu"><img vspace="2" src="templates/printemps/images/areabb.png" border="0" alt="Arcade" /></a></li>
														<li><a href="arcade_list.php" class="mainmenu"><img vspace="2" src="templates/printemps/images/relax.png" border="0" alt="ARCADE" /></a></li>
														<li>{L_HANGMAN3}</li>
													</ul>
												</dd>
										</dl>

										<dl>	
											<dt onMouseOver="javascript:montre('smenu4');"><img src="templates/printemps/images/Battles.png" /></dt>
												<dd id="smenu4">
													<ul>
														<li><a href="http://www.levillagedeswinnies.com/ange/arcade_defday.php" class="mainmenu"><img vspace="2" src="templates/printemps/images/tournois.png" border="0" alt="Tournois" /></a></li>
														<li><a href="{U_DEFIS}" class="mainmenu"><img vspace="2" src="templates/printemps/images/defi.png" border="0" alt="{L_DEFIS}" /></a></li>
													</ul>
												</dd>
										</dl>
										
										<dl>	
											<dt onMouseOver="javascript:montre('smenu5');"><img src="templates/printemps/images/Divers.png" /></dt>
												<dd id="smenu5">
													<ul>
														<li><a href="{U_COURTHOUSE}" class="mainmenu"><img vspace="2" src="templates/printemps/images/tribunal.png" border="0" alt="{L_COURTHOUSE}" /></a></li>
														<li><a href="{U_ALBUM}" class="mainmenu"><img vspace="2" src="templates/printemps/images/album.png" border="0" alt="{L_ALBUM}" /></a></li>
														<li><a href="{U_SPONSOR}" class="mainmenu"><img vspace="2" src="templates/printemps/images/parrainage.png" border="0" alt="{L_SPONSOR}" /></a></li>
													</ul>
												</dd>
										</dl>
										
										<dl>	
											<dt onMouseOver="javascript:montre('smenu6');"><img src="templates/printemps/images/DL.png" /></dt>
												<dd id="smenu6">
													<ul>
														<li><a href="{U_DOWNLOADS}" class="mainmenu"><img vspace="2" src="templates/printemps/dl_mod/images/icon_mini_d.png" border="0" alt="{L_DOWNLOADS}" /></a></li>
										<!-- BEGIN switch_hacklist_on -->
														<li><a href="{U_HACKLIST}" class="mainmenu">{IMG_HACKLIST2}</a></li>
										<!-- END switch_hacklist_on -->
										<!-- BEGIN bug_tracker_head -->
														<li><a href="{bug_tracker_head.U_BUG_TRACKER}" class="mainmenu"><img vspace="2" src="templates/printemps/dl_mod/images/icon_mini_b.png" border="0" alt="{bug_tracker_head.L_BUG_TRACKER}" /></a></li>
										<!-- END bug_tracker_head -->
													</ul>
												</dd>
										</dl>
										
										<dl>	
											<dt><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="<!-- BEGIN switch_user_logged_out -->{I_LOGIN}<!-- BEGINELSE switch_user_logged_out -->{I_LOGOUT}<!-- END switch_user_logged_out -->" border="0" alt="{L_LOGIN_LOGOUT}" /></a></dt>
										</dl>
									</div>
								
									<div id="searchbox" style="display:none;z-index: 100;">
										<form action="{S_SEARCH_ACTION}" method="POST">
											<table class="forumline" cellpadding="4" cellspacing="1" border="0">
												<tr>
													<th class="thHead" height="25"><a onClick="searchTooltip(); return false;" href="#" style="float:right;color: #009000;font-size: 9px;font-family:Verdana, sans-serif; text-decoration: none;">(X)</a>{L_SEARCH_QUERY}</th>
												</tr>
												<tr>
													<td class="row1" align="center">
														<input type="text" style="width: 180px" class="post" name="search_keywords" size="30" /> <input class="liteoption" type="submit" value="{L_SEARCH}" />
														<input type="hidden" name="search_terms" value="all" />
														<input type="hidden" name="search_forum" value="-1" />
														<input type="hidden" name="search_time" value="0" />
														<input type="hidden" name="search_cat" value="-1" />
														<input type="hidden" name="sort_by" value="0" />
														<input type="hidden" name="sort_dir" value="ASC" />
														<input type="hidden" name="show_results" value="posts" />
														<input type="hidden" name="return_chars" value="200" />
														<input type="hidden" name="search_fields" value="all" />
													</td>
												</tr>
												<tr>
													<td class="catBottom" align="center">
													<input class="liteoption" type="submit" value="{L_ADVANCED_SEARCH}" />
													</td>
												</tr>
											</table>
										</form>
									</div>
								</td>
							</tr>
						</table>
				</td>
			</tr>
		</table>
		<!-- BEGIN board_disable -->
			<div class="forumline" style="padding: 10px; margin: 5px 2px; text-align: center">
				<span class="gen">{board_disable.MSG}</span>
			</div>
		<!-- END board_disable -->


Merci de votre aide bienvenue

[/i][/i][/i]
Modifié par Mustang (04 Feb 2008 - 18:03)
J'ai trouvé la réponse à ma question, mais ça fonctionne avec firefox, avec IE c'est n'importe quoi

j'essaie de trouver et je poste la réponse
Bon, à force de chercher, je suis arrivé à faire que cela reste en ligne avec IE, que ça ne décale plus rien, ouf

Sauf qu'avec f=Firefox il est centré (ce que je veux) et qu'avec IE il est collé à gauche, et là rien à faire .. Smiley fache Smiley bawling

Qui pourrait m'aider ?

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu {
	position: relative; 
	top: 246px; 
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	width: 833px;
	text-align: center;
}

#menu dl {
	width: 90px;
	float: left;
}

#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	width: 90px;
}

#menu dd {
	display: none;
	width: 90px;
}

#menu li {
	background: #b5f9f2;
	height: 25px;
	width: 90px;
	border-left : 1px solid #ffffff;
	border-top : 1px solid #ffffff;
	border-right : 1px solid #006a00;
	border-bottom : 1px solid #006a00;
	filter: alpha(opacity=80);
	-moz-opacity: .80;
}

#menu li a {
	background: #b5f9f2;
	display: block;
	height: 100%;
	width: 90px;
	height: 25px;
}

#menu dt a {
	background: #b5f9f2;
	display: block;
	height: 31px;
	width: 90px;
}

#menu li a:hover, #menu li a:focus {
	background: #b5f9f2;
	width: 90px;
	height: 25px;
	filter: alpha(opacity=80);
	-moz-opacity: .80;
}

#menu dt a:hover, #menu dt a:focus {
	width: 90px;
	height: 25px;
	filter: alpha(opacity=70);
	-moz-opacity: .70;
}

#site {
	position: absolute;
	z-index: 1;
}


Je ne sais plus quoi faire pour centrer le menu avec IE Smiley bawling Smiley bawling Smiley bawling

Merci de votre aide bienvenue