Menu deroulant horizontal
syrinxxxx
Messages postés
334
Statut
Membre
-
28 août 2008 à 01:43
Cakos -
Cakos -
Bonjour,
je voudrai utiliser ce menu deroulant horizontal pour menu des differentes galeries photo d'un site mon probleme est que je trouve pas quel morceau de code je dois modifier pour que le menu ne flotte plus au dessus de ma page accueil-galerie mais qu'il soit fixe dans la table dans le quel je met le code html du menu (je sais pas si je suis clair )
voici une partie du code de ma page, j'ai laissé volontairement le css dans le <style pour que vous puissiez le voir :
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels https://www.alsacreations.com/ */
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 {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#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;
}
#site {
position:fixed;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>
<body>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#000000"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="220"><img src="images/logo_site.png" alt="logo" width="223" height="68" /></td>
<td bgcolor="#000000"><!-- #BeginLibraryItem "/Library/main_menu_header.lbi" -->
<div align="right" class="menu"><a href="index.html">accueil</a> <a href="presentation.html">présentation</a> <a href="actualites.html">actualités</a> <a href="galeries_menu.html">galeries</a> <a href="contacts.html">contacts</a> </div>
<!-- #EndLibraryItem --></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="images/galeries.jpg" alt="galeries" width="901" height="232" /></td>
</tr>
<tr bgcolor="#303030">
<td height="149"><table width="100%" height="252" border="0" cellpadding="10" cellspacing="4">
<tr>
<td height="120" colspan="2" valign="top" bgcolor="#000000"><p align="center"> (je voudrai que le menu ce trouve dans cette table)
<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">
<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">
<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">
<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">
<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="site">
<p> </p>
<p> </p>
<p> </p>
</td>
</tr>
<tr>
<td width="654" height="120" valign="top" bgcolor="#666666"><h1>cinq éléme
je voudrai utiliser ce menu deroulant horizontal pour menu des differentes galeries photo d'un site mon probleme est que je trouve pas quel morceau de code je dois modifier pour que le menu ne flotte plus au dessus de ma page accueil-galerie mais qu'il soit fixe dans la table dans le quel je met le code html du menu (je sais pas si je suis clair )
voici une partie du code de ma page, j'ai laissé volontairement le css dans le <style pour que vous puissiez le voir :
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels https://www.alsacreations.com/ */
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 {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#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;
}
#site {
position:fixed;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>
<body>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#000000"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="220"><img src="images/logo_site.png" alt="logo" width="223" height="68" /></td>
<td bgcolor="#000000"><!-- #BeginLibraryItem "/Library/main_menu_header.lbi" -->
<div align="right" class="menu"><a href="index.html">accueil</a> <a href="presentation.html">présentation</a> <a href="actualites.html">actualités</a> <a href="galeries_menu.html">galeries</a> <a href="contacts.html">contacts</a> </div>
<!-- #EndLibraryItem --></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="images/galeries.jpg" alt="galeries" width="901" height="232" /></td>
</tr>
<tr bgcolor="#303030">
<td height="149"><table width="100%" height="252" border="0" cellpadding="10" cellspacing="4">
<tr>
<td height="120" colspan="2" valign="top" bgcolor="#000000"><p align="center"> (je voudrai que le menu ce trouve dans cette table)
<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">
<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">
<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">
<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">
<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="site">
<p> </p>
<p> </p>
<p> </p>
</td>
</tr>
<tr>
<td width="654" height="120" valign="top" bgcolor="#666666"><h1>cinq éléme
A voir également:
- Menu deroulant horizontal
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Canon quick menu - Télécharger - Utilitaires
- Supprimer menu déroulant excel - Forum Excel
2 réponses
essaie en supprimant:
position: absolute;
top: 0;
left: 0;
dans:
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
cordialement
position: absolute;
top: 0;
left: 0;
dans:
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
cordialement
28 août 2008 à 08:40