Bonsoir tout le monde !
J'ai un soucis, et là, je ne comprends pas....
J'ai ma page, structurée en 3 colonnes, avec un menu déroulant au dessus.
Chaque colonne a un z-index pour que le menu passe au dessus, et tout marche nikel sous firefox. Par contre, sous cette !!#?* d'IE, la premiere colonne refuse de laisser passer son copain menu1...
voici le code (je vous épargne le javascript qui est celui du magnifique tuto...) et le CSS rattaché :
et le CSS :
Modifié par rdmoshpit (25 Jan 2008 - 00:03)
J'ai un soucis, et là, je ne comprends pas....
J'ai ma page, structurée en 3 colonnes, avec un menu déroulant au dessus.
Chaque colonne a un z-index pour que le menu passe au dessus, et tout marche nikel sous firefox. Par contre, sous cette !!#?* d'IE, la premiere colonne refuse de laisser passer son copain menu1...
voici le code (je vous épargne le javascript qui est celui du magnifique tuto...) et le CSS rattaché :
<div id="container">
<div id="header">
<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>
<!-- end #header -->
</div>
<div id="sidebar1" onmouseover="javascript:montre();">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar1 --></div>
<div id="sidebar2" onmouseover="javascript:montre();">
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent" onmouseover="javascript:montre();">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent -->
</div>et le CSS :
#header {
height: 60px;
background: #DDDDDD;
position:relative;
padding: 0 10px 0 20px;
}
#header #menu {
position: absolute;
top:39px;
left:35px;
height:20px;
padding: 0;
z-index:100;
}
#header #menu dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#header #menu dl {
float: left;
width: 70px;
margin: 0 1px;
}
#header #menu ul {
float: left;
margin: 0 1px;
width:150px;
border:thin solid #000000;
}
#header #menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#header #menu dd {
border: 1px solid gray;
}
#header #menu li {
text-align: center;
background: #fff;
}
#header #menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#header #menu li a:hover, #menu dt a:hover {
background: #eee;
}
#sidebar1 {
position: absolute;
z-index: 5;
top: 60px;
left: 0;
width: 150px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#sidebar2 {
position: absolute;
z-index: 2;
top: 60px;
right: 0;
width: 160px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#mainContent {
margin: 0 200px;
z-index: 3;
padding: 0 10px;
}
Modifié par rdmoshpit (25 Jan 2008 - 00:03)
