Menu deroulant horizontal
syrinxxxx
Messages postés
334
Statut
Membre
-
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
Configuration: Mac OS X Firefox 3.0.1
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 -
Bonjour,
Comment fait on pour avoir ce menu deroulant en haut du bureau (en guise de raccourci pour mes docs, poste de travail etc )? J'ai XP SP3
Merci d'avance
