18073 sujets

Questions générales et questions de débutants

Menu vertical intégré dans un tableau

Salut!

Ce que je veux semble très simple, mais je trouve pas la solution!

Le script du menu vertical est excellent, mais moi je veux l'inclure dans la colonne de gauche de mon site web et je veux placer des images par exemple en dessous du menu.

Ce que je veux c'est que mon site s'étire vers le bas lorsque le menu s'ouvre. Présentement c'est comme un layer et le menu est au dessus de mon site donc il chevauche ce qui est en dessous lorsqu'il s'ouvre.

J'espère que quelqu'un peut m'aider. Merci à l'avance.
Bonjour Neoweb, on pourrait avoir une page de test, ou un peu de code pour pouvoir t'aider, ça serait un peu plus simple Smiley cligne
Bien sûr!

<html>
<head>
<title>v1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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 {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 210;
left: 9;
}
#menu {
width: 182px;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#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;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
-->
</style>
<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>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<dl id="menu">

<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>

<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>

<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<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>
</ul>
</dd>

<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>

<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>

<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>

<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>

<dt onclick="javascript:montre('smenu4');">Menu 4</dt>

<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>

</ul>
</dd>

</dl>
<!-- ImageReady Slices (v1.psd) -->
<table id="Table_01" width="700" height="501" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">
<img src="images/v1_01.jpg" width="9" height="500" alt=""></td>
<td>
<img src="images/v1_02.jpg" width="181" height="201" alt=""></td>
<td colspan="2">
<img src="images/v1_03.jpg" width="510" height="201" alt=""></td>
</tr>
<tr>

<td colspan="2">jjjjjjjj </td>
<td>
<img src="images/v1_05.jpg" width="509" height="299" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="181" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="509" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Sujet clos
Aller à