28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu déroulant horizontal + internet explorer + centrage

Bonjour à tous,

voilà un petit moment que je n'ai pas fait appel à vous, mais cette fois ci, c'est du lourd Smiley lol

Je tente en ce moment d'intégrer un site en xhtml css en mettant en place un menu horizontale déroulant (allégrement inspiré des menus Alsacréations). jusque là c'est bon.

F5.

c'est bon sur firefox !

internet explorer : flûte ! mon site n'est pas centré! mon Dieu, que faire ? J'ai pourtant "margin:0 auto" ! vite: Alsacréations !

Je découvre alors que pour centrer mon bloc sur IE, il suffit de coller un "text-align:center" dans mon body...ce que je m'empresse de faire... youpi ça marche !

...oh zuuut alors...les sous-menus déroulants ne s'affichent plus ! pourquoi moi???? Smiley bawling

auriez vous une solution miracle à m'apporter ? Smiley smile 

body {
background-color: #c3c5c8;
margin: 0;
padding: 0;
text-align: center;
}

#conteneur {
margin: 0 auto;
width: 855px;
background-image: url(bg_contenu.jpg);
background-repeat: no-repeat;
}

#contenu {
margin: 0 auto;
width: 835px;
background-color: #fff;
}

#header {
height: 82px;
background-image: url(header.jpg);
background-repeat: no-repeat;
}

#logo {
border: 0;
margin: 0;
}

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

#boxmenu {
width: 835px;
height:20px;
background: #fff;
}

#menu {
z-index:100;
width: 100%; /* correction pour Opera */
}

#menu dl {
float: left;
width: 15%;
height: 20px;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #fff;
color: #ec6e00;
}

#menu dd {
display: none;
background: #ec6e00;
}

#menu li {
text-align: center;
background: #fff;
font-size: 0.8em;
}

#menu li a, #menu dt a {
color: #ec6e00;
text-decoration: none;
display: block;
height: 20px;
border: 0 none;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #ec6e00;
color: #fff;
}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
<!-- css --><link rel="stylesheet" type="text/css" href="dent2.css" /><!-- /css -->
  <title></title>
  <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>
    <div id="conteneur">
      <div id="contenu">
          <div id="header">
            <a href="skull.html"><img id="logo" src="logo.jpg" alt="logo"></a>
          </div>

            <div id="boxmenu">
              <div id="menu">
               	<dl>
              		<dt onmouseover="javascript:montre('smenu1');">Présentation</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');">Consultation</dt>
                    <dd id="smenu2">
              				<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('smenu3');">Chirurgie</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');">Dentisterie</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>
                <dl>
              		<dt onmouseover="javascript:montre('smenu5');">Contact</dt>
                    <dd id="smenu5">
              				<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>
            </div>

      </div>
    </div>
  </body>
</html>

Modifié par Maxime VIRY (05 Sep 2008 - 16:37)
Bon j'ai un peu progressé Smiley lol

Le menu déroulant ne s'affichait pas car la fonction js était désactivée sur IE.

Maintenant que le déroulant s'affiche, il est un nouveau soucis (sur IE uniquement) : le déroulant ne s'affiche pas par dessus le reste mais le décale vers le bas

une idée?

http://www.maxime-viry.com/pb.jpg
Sujet clos
Aller à