Bonjour à tous ! Je suis novice en la matière et je rencontre un problème qui me pose bien des soucis depuis plusieurs jours : j'ai crée un menu déroulant avec 5 boutons qui fonctionne parfaitement avec Firefox mais qui se décale à droite avec IE7. Pouvez vous me dire où se trouvent les erreurs ! D'avance merci pour votre aide ! De plus lorsque je clique sur le bouton « Mes musiques » le lecteur dewplayer est correctement centré avec Firefox mais il se décale à gauche et le cadre se rétréci avec IE7.
Je suis désespéré ! A l’aide s’il vous plait !!! D'avance merci !
Voici ci-dessous les codes HTML et CSS utilisés.
code html :
Et voici le CSS
Je suis désespéré ! A l’aide s’il vous plait !!! D'avance merci !
Voici ci-dessous les codes HTML et CSS utilisés.
code html :
<body>
<div id="conteneur">
<div id="header">
<h1>Dj TOTO</h1>
<h2>Spécialiste de l'évènement </h2>
<br>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href=" " title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href=" " title="Devis en ligne">Devis en ligne</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href=" " title="Gallerie photos">Photos</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href=" " title="Gallerie vidéo">Vidéos</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href=" " title="Mes musiques">Styles musicaux</a></dt>
</dl>
</div>
</div>
<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>
<div align="center">
<table width="600" border="0">
<br>
<p> </p>
<p> </p>
<p align="center">VOTRE DEMANDE DE DEVIS A BIEN ÉTÉ TRANSMISE !</p>
<p align="center">Un email de confirmation vient de vous être adressé.</p>
<p> </p>
<p align="center">Je ne manquerai pas d'y porter la plus grande attention.</p>
<p align="center">Pour une réponse instantanée, veuillez composer le</p>
</FONT></p>
<p> </p>
<p> </p>
<p> </p>
<p align="center" class="pied"><div align="center"><font color="#000000" size="1" face="Arial, Helvetica, sans-serif">DJ TOTO - Spécialiste de l'évènement <a href="mailto:toto@live.fr">Contact</a>
- Copyright © 2008 Tous droits réservés</font></div></p>
</div>
</body>
Et voici le CSS
body {
font-family:Verdana;
font-size: 0.8em;
margin: 0;
background:#cccccc}
#header {
background-color: white;
background-image: url(/photosite/djplatine.gif);
background-repeat: no-repeat;
background-position: left top;
text-align:right;
height:243px;
}
#conteneur {
position: absolute;
width: 60em;
left: 50%;
margin-left: -30em;
background-color:#FFCC00;
padding:0 1em 0 1em;}
<!--
body {
margin: 0;
padding: 0;
background: black;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: auto;
left: auto;
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;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
-->
#centre {margin-right: 150px;padding:0.2em;}
#droite {
padding:0.2em;
position: absolute;
right:0;
width: 150px;
}
#pied {height: 30px;}
#header h1 {margin-top:20px;font-size:200%;}
p {margin: 0 2px 10px;}
.titre {
padding-top:10px;
font-size: 150%;
font-weight: bold;
text-align: right;
}
.soustitre {
text-align: right;
}
.fil {
margin:0.2em 0.2em 0.2em 0;
padding:0;
font-size: 80%;
color: #666666;
}
h1 {
font-size: 120%;
font-variant: small-caps;
margin:0.4em 0 0.2em 0;
}
h2 {
font-size: 110%;
margin:0.4em 0 0.2em 0;
}
h3 {font-size: 100%;
padding-left:1em;
font-weight: bold;
letter-spacing: 0.1em;
}
#centre ul {
list-style-type: Aucune;
}
#centre li {
margin:0.1em 0 0.4em;
list-style-position: inside;
list-style-type: circle;
}
input,textarea {
border: 1px solid #CCCCCC;
}
.section {
background-color: #CCCCCC;
width: 100%;
font-size: 120%;
text-align: center;
margin: 2px;
font-weight: bold;
}
.bouton {
border: 1px solid #FF0000;
}
.case {
border: 0;
}
.pied {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #999999;
border-bottom-color: #999999;
padding-top: 3px;
font-size:80%;
padding-bottom: 3px;
}