28221 sujets

CSS et mise en forme, CSS3

[Résolu]Superposition de menus déroulants sur une zone scrollable

Bonjour, je suis un pti nouveau qui débute en CSS-HTML
J'ai repris les excellents exemples de ce site pour réaliser un écran composé de plusieurs zones et de menus déoulants.

Lorsque jhe déroule des menus qui "débordent" sur la zone de contenu, l'affichage est tronqué. Comment faire pour rendre complètement visible ces listes déroulantes ?

merci !!!!

PS : Voici les sources.

CSS

html, body {
height: 100%;
width: 100%;
position: absolute;
width: 100%;
}

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}

#titre {
background-color: #99CCCC;
width: 100%;
top:0%;
height: 10%;
}

#menu {
top:10%;
background-color: #99CCFF;
width: 100%;
height: 10%;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
text-align: left;
display: none;
border: 1px solid gray;
}

#menu li {
text-align: center;
background-color:#CCCCFF;
}

#menu li a, #haut dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#contenu {
top:20%;
height: 76%;
width: 100%;
margin: 0;
padding: 0;
background-color:#9999CC;
overflow: auto;
position:absolute;
}

#pied {
background-color: #00C0FC;
top:96%;
width: 100%;
height: 4%;
position:absolute;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

p {margin: 0 0 10px 0;}


HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>MENU PATTERN</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<script type="text/javascript">
<!--
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">
@import url("dd.css");
</style></head>

<body>

<div id="titre">
ICI Y'A UN TITRE
</div>
<div id="menu">
	   <br/>
		<dl><dt onmouseover="javascript:montre('smenu1');"><a href="">Menu 1</a></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');"><a href="">Menu 2</a></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.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
				</ul>
			</dd>
		</dl>
		</dl>
		<dl><dt onmouseover="javascript:montre('smenu3');"><a href="">Menu 3</a></dt>
		</dl>
		<dl><dt onmouseover="javascript:montre('smenu4');"><a href="">Menu 4</a></dt>
		</dl>
     </div>
</div>  

<div id="contenu">
ICI Y'A UN CONTENU<br/>
</div>

<div id="pied">
ICI Y'A UN PIED DE PAGE
</div>

</body>

Modifié le 01 Dec 2004 - 08:40
Salut Smiley cligne ,

Sauf erreur de ma part, le fait que tu aies mis le contenu en "position:absolute" le fait sortir du flux et donc se positionner par défaut par dessus le reste, et donc le menu Smiley ohwell .
En fait, tu dois dans ce cas passer ton menu également en "position:absolute" et :

- soit le déclarer après le contenu dans le fichier html, mais cela rend la lecture moins naturelle
- soit lui affecter un z-index assez fort, par exemple 99 pour qu'il s'affiche par dessus.

Qu'en dis-tu ? Smiley biggrin
Cette solution fonctionne très bieb sous firefox.

Petit pb sur IE6, la taille de la zone id "menu" devient fonction de la taille du menu déroulant ...

Que faire ?
OK Smiley eek

Autant pour moi, j'avais juste jeté un oeil sous Firefox...Bon, je me rattrape. Pour que tout fonctionne comme tu veux, repars de ton code initial, et ajoute simplement dans ta section "#menu li a, #haut dt a" un "position:relative" et un "z-index: 99". Tu devras également forcer le "background-color: #CCCCFF;", ce qui donne

#menu li a, #haut dt a { 
  position:relative;
  color: #000;
  text-decoration: none;
  display: block;
  height: 100%;
  border: 0 none;
  z-index:99;
  background-color: #CCCCFF;
}


Pour moi c'est bon sous Firefox et IE6

Personnellement, je ne suis pas fan des positionnement hors flux si on peut les éviter. Je pense que seul le menu mériterait d'être en "absolute".
Merci tout est ok apparemment !!!

Mais le pb est que si je ne mets pas mon contenu scrollable en position absolute, il se décale vers la droite lorsque le menu se déroule.

C'est pour cela que je dois laisser en l'état.
A moins que l'usage des z-index me permette de régler tout ça...

Merci encore pour ton aide Smiley biggrin Smiley biggrin Smiley biggrin Smiley biggrin Smiley biggrin
Sujet clos
Aller à