Superposition des textes

Problème

Anonyme

5 juillet 2006 à 15:39:18

Bonjour,

Voici mon problème:
Cliquer ici
Voilà, les deux textes se superposent dans mon menu déroulant.
Voici les codes utiles:

<div id="content">
<img src="images/totalpicsou.png" alt="Total PICSOU" /><br />
<div id="menu">

<dl>

<dt onmouseover="javascript:montre();"><a href="index.php"><img src="images/accueil.png" alt="" class="menu" /></a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu1');"><img src="images/disney.png" alt="" class="menu" /></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>

<dl>
<dt onmouseover="javascript:montre('smenu2');"><img src="images/goodies.png" alt="" class="menu" /></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>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>

</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu3');"><img src="images/divers.png" alt="" class="menu" /></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.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>

</div>

<p id="all">
Blabla

</p>
</div>

#menu
{
width:100%;
height:28px;
background:#6292C1;
}

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

z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
}
#menu dd {
display: none;
border: 1px solid gray;
background: #fff;
}
#menu li {
text-align: center;

}

#menu ul {
background: #fff;
}

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

#menu ul
{
background:url('images/back.png') repeat;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;

}

#all
{
position:fixed;
padding-left:10px;
overflow: auto;
width:500px;
height:150px;
}

Pouvez-vous m'aider ?
Merci !

LaoSeb

5 juillet 2006 à 15:54:35

salut,

Essaie un z-index sur ton menu.

Anonyme

5 juillet 2006 à 15:59:25

Combien de pixels ? (A vrai dire, je ne sais pas ce que c'est :p)

LaoSeb

5 juillet 2006 à 16:07:39

z-index permet la superposition des éléments dans un ordre donné. du style je mets z-index: 10 à un truc: alors il se trouvera au dessus d'un élément placé en z-index: 30. Je l'utilise pas trop mais c'est le principe.

Après je ne pense pas que cela puisse régler ton souci.

Tu peux tout simplement mettre une image en fond sur ton menu. J'ai le même type de code et je n'ai pas de souci.

Passe plus de code pour voir le texte qui passe par dessus.

Anonyme

5 juillet 2006 à 16:13:42

<!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" >
<head>
<title>Total Picsou - :: - { Bienvenue }</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="NeoDesign" href="neo.css" />
<script type="text/javascript">

</script>
</head><body>
<img src="images/picsou.png" alt="" class="float" />
<div id="content">
<img src="images/totalpicsou.png" alt="Total PICSOU" /><br />
<div id="menu">

<dl>

<dt onmouseover="javascript:montre();"><a href="index.php"><img src="images/accueil.png" alt="" class="menu" /></a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu1');"><img src="images/disney.png" alt="" class="menu" /></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>

<dl>
<dt onmouseover="javascript:montre('smenu2');"><img src="images/goodies.png" alt="" class="menu" /></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>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>

</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu3');"><img src="images/divers.png" alt="" class="menu" /></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.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>

</div>

<p id="all">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis magna sed dolor ultricies venenatis. Suspendisse blandit leo quis metus. Donec orci nunc, varius eu, malesuada ut, ultrices mollis, felis. Curabitur et pede quis quam aliquet tincidunt. Fusce euismod tellus quis magna. Vivamus diam. Phasellus a diam quis velit accumsan ultrices. Proin at urna. Cras ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dignissim. Mauris ipsum. Aenean adipiscing lobortis pede. Nunc magna ante, iaculis quis, viverra non, placerat et, libero. Integer auctor. Suspendisse pharetra hendrerit arcu. Praesent varius porta nulla. Ut consectetuer ligula et metus. Vestibulum mi justo, volutpat vel, vulputate sed, scelerisque non, lectus.

Nulla elit. Ut nisi nisi, pretium a, euismod ut, dignissim id, sapien. Vivamus vel purus in ante aliquam tristique. In hac habitasse platea dictumst. Proin ante ante, sagittis in, faucibus sit amet, ornare ut, nisl. Praesent elit. Morbi quam. Nunc massa. Ut condimentum fermentum nulla. Sed sem nulla, semper id, dictum vel, facilisis id, justo.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas non lorem. Nam dolor pede, facilisis sit amet, tincidunt nec, ultricies sit amet, eros. Cras vitae enim. Etiam accumsan consequat magna. Pellentesque eu sapien. Suspendisse potenti. Vivamus erat risus, aliquam vitae, dictum eu, pretium quis, metus. Aenean tristique sollicitudin tortor. Maecenas sodales porta eros. Nunc velit. Vestibulum convallis eleifend enim. Proin pretium. In dictum tincidunt justo. Suspendisse potenti. Etiam mollis pellentesque neque. Nulla sit amet dolor. Mauris mollis ornare nulla. Nunc lectus.

Nunc blandit. Fusce nisl lectus, accumsan a, ultricies in, blandit suscipit, tortor. Duis id sapien. Maecenas fringilla adipiscing odio. Maecenas facilisis rutrum risus. In adipiscing malesuada ante. Curabitur laoreet elit id nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam dignissim pede vitae quam. Aliquam erat volutpat.

In sollicitudin augue. Phasellus ac urna. Nulla lorem diam, lacinia non, tincidunt ut, facilisis eu, metus. Fusce tincidunt. Maecenas vehicula. Vestibulum fringilla neque vel urna. Vivamus sodales. Ut eget eros. Aliquam molestie sem porta ligula viverra cursus. Fusce varius interdum lacus. Etiam id quam non lorem adipiscing tincidunt. In leo. Praesent scelerisque. Mauris bibendum lectus eu velit. Suspendisse tellus nibh, vulputate at, vehicula in, semper eget, erat.

</p>
</div>

</body></html>

body
{
background-color:#6292C1;
margin-left:0;
margin-right:0;
margin-top:50px;
font-family: 'Trebuchet MS', 'Helvetica', sans-serif;
font-size:12px;
}

#header
{
height:150px;
padding:0;
background:url('images/fond.png') repeat-x;
}

.float
{
position:absolute;
right:20px;
top:20px;
}

#content
{
background:white;
height:350px;
width:100%;
border: 1px solid black;
border-left:0;
border-right:0;
}

#menu
{
width:100%;
height:28px;
background-color:#6292C1;
border: 1px solid #3666A0;
border-left:0;
border-right:0;
}

.menu
{
border:0;
}

#menu
{
width:100%;
height:28px;
background:#6292C1;
z-index:5px;
}

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

z-index:30;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
}
#menu dd {
display: none;
border: 1px solid gray;
background: #fff;
}
#menu li {
text-align: center;

}

#menu ul {
background: #fff;
}

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

#menu ul
{
background:url('images/back.png') repeat;

}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;

}

#all
{
position:fixed;
padding-left:10px;
overflow: auto;
width:500px;
height:150px;
}

LaoSeb

5 juillet 2006 à 16:28:51

Je ne sais pas. Peut-être à cause du mélange étrange de positionnement. ta class all en fixed...

Tu ne l'as pas en ligne ?? (ce serait bien plus pratique)