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"
Merci de votre aide bienvenue
[/i][/i][/i]
Modifié par Mustang (04 Feb 2008 - 18:03)
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)