Bonjour,
J'ai reproduit le menu déroulant vertical du tuto, il fonctionne parfaitement.
Voilà mon problème: quand le menu est ouvert (déroulé), la taille se son div augmente, et pousse mon autre contenu d'autant.
Voici ce que ça donner:
menu fermé (tout est OK)
menu ouvert (où se situe le problème)
On voit bien que le menu ouvert pousse mon contenu vers le bas, alors que je souhaiterai qu'il se superpose à mon contenu.
Voici mon xhtm (un extract)
et ma CSS (extract aussi)
Savez-vous comment faire ?
Merci !
Modifié par pp51 (10 Aug 2006 - 11:50)
J'ai reproduit le menu déroulant vertical du tuto, il fonctionne parfaitement.
Voilà mon problème: quand le menu est ouvert (déroulé), la taille se son div augmente, et pousse mon autre contenu d'autant.
Voici ce que ça donner:
menu fermé (tout est OK)
menu ouvert (où se situe le problème)
On voit bien que le menu ouvert pousse mon contenu vers le bas, alors que je souhaiterai qu'il se superpose à mon contenu.
Voici mon xhtm (un extract)
<div id="contenu">
<div id="zoom_collection">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<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>
</div>
<div id="acces_pages">
<ul id="pages">
<li><a title="dernière page" href="#">>></a></li>
<li><a title="page 4" href="#">4</a></li>
<li><a title="page 3" href="#">3</a></li>
<li><a title="page 2" href="#">2</a></li>
<li><a title="page 1" href="#">1</a></li>
</ul>
</div>
<div id="produit1">
<img src="images/parure_camelia.jpg" alt="Parure Camélia" width="120" height="136" title="Collection de bijoux pour le mariage"/>
<p>Camélia</p>
</div>
<div id="produit2">
<img src="images/parure_orchidee.jpg" alt="Parure Orchidée" width="120" height="136" title="Collection de bijoux pour le mariage"/>
<p>Orchidée</p>
</div>
<div id="produit3">
<img src="images/parure_estella.jpg" alt="Parure Estella" width="120" height="136" title="Collection de bijoux pour le mariage"/>
<p>Estella</p>
</div>
<div id="produit4">
<img src="images/parure_angelique.jpg" alt="Parure Camélia" width="120" height="136" title="Collection de bijoux pour le mariage"/>
<p>Angélique</p>
</div>
<div id="produit5">
<img src="images/parure_angelique.jpg" alt="Parure Camélia" width="120" height="136" title="Collection de bijoux pour le mariage"/>
<p>xxx</p>
</div>
<div id="produit6">
<img src="images/parure_angelique.jpg" alt="Parure Camélia" width="120" height="136" title="Collection de bijoux pour le mariage"/>
<p>xxx</p>
</div>
<div id="produit7">
<img src="images/parure_angelique.jpg" alt="Parure Camélia" width="120" height="136" title="Collection de bijoux pour le mariage"/>
<p>xxx</p>
</div>
<div id="produit8">
<img src="images/parure_angelique.jpg" alt="Parure Camélia" width="120" height="136" title="Collection de bijoux pour le mariage"/>
<p>xxx</p>
</div>
<div id="produit9">
<img src="images/parure_angelique.jpg" alt="Parure Camélia" width="120" height="136" title="Collection de bijoux pour le mariage"/>
<p>xxx</p>
</div>
<div id="produit10">
<img src="images/parure_angelique.jpg" alt="Parure Camélia" width="120" height="136" title="Collection de bijoux pour le mariage"/>
<p>xxx</p>
</div>
<div id="acces_pagesbas">
<ul id="pagesbas">
<li><a title="dernière page" href="#">>></a></li>
<li><a title="page 4" href="#">4</a></li>
<li><a title="page 3" href="#">3</a></li>
<li><a title="page 2" href="#">2</a></li>
<li><a title="page 1" href="#">1</a></li>
</ul>
</div>
</div>
</div>
et ma CSS (extract aussi)
#contenu {
float: left;
margin: 2px 0 0 0;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
float: left;
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
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 li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#acces_pages {
float: left;
margin: 5px 0 0 0;
padding: 0;
line-height: 20px;
}
#pages {
float: left;
list-style-type: none;
width: 100%;
line-height: 20px;
}
#pages li {
float: right;
}
#pages a {
float: left;
color:#666;
text-decoration: none;
text-align: center;
line-height: 12px;
}
#pages a{
width: 10px;
color:#666;
text-decoration:none;
}
#pages a:hover{
color:#6C3089;
text-decoration:underline;
}
#pages a:focus{
text-decoration:underline;
color:#999;
}
#pages a:active{
text-decoration:underline;
color:#999;
}
#zoom_collection {
float: left;
width: 700px;
margin: 5px 20px 0 20px;
text-align: center;
}
#produit1 {
float: left;
margin-top: 10px;
}
#produit2 {
float: left;
margin-left: 20px;
margin-top: 10px;
}
#produit3 {
float: left;
margin-left: 20px;
margin-top: 10px;
}
#produit4 {
float: left;
margin-left: 20px;
margin-top: 10px;
}
#produit5 {
float: left;
margin-left: 20px;
margin-top: 10px;
}
#produit6 {
float: left;
margin-left: 0px;
}
#produit7 {
float: left;
margin-left: 20px;
}
#produit8 {
float: left;
margin-left: 20px;
}
#produit9 {
float: left;
margin-left: 20px;
}
#produit10 {
float: left;
margin-left: 20px;
}
Savez-vous comment faire ?
Merci !
Modifié par pp51 (10 Aug 2006 - 11:50)
