Effectivement ça aide le code
le xhtml
<script type="text/javascript">
<!--
// menu vertical
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="contenant">
<!-- Entete -->
<div id="entete">
<a id="haut" name="haut"></a>
<div id="tb"></div>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');">:: NAVIGATION</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="index.php">:: ACCUEIL</a></li>
<li><a href="services.php">:: SERVICES</a></li>
<li><a href="corpo.php">:: PROFIL</a></li>
<li><a href="nouvelles.php">:: NOUVELLES</a></li>
<li><a href="contact.php">:: CONTACT</a></li>
</ul>
</dd>
</dl>
</div>
</div>
<!-- /Entete -->
Le css maintenant
/* feuille de style */
html, body {
background-color: white;
background-image: url("img/tb2.png");
background-repeat: no-repeat;
background-position: -100px -30px ;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
}
#contenant {
width: 100%;
}
#entete {
background-color: black;
background-repeat: repeat-x;
margin: 0;
padding: 0;
width: 100%;
height: 36px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 18px;
left: 418px;
z-index:200;
width: 242px;
color: white;
font-size: 10px;
line-height: 18px;
text-align: left;
letter-spacing: 2px;
}
html>body #menu {left: 419px;}/* hack ie vu ff, safari etc.. */
#menu dl {
float: left;
width: 244px;
margin: 0 1px;
}
html>body #menu dl {width: 242px;}/* hack ie vu ff, safari etc.. */
#menu dt {
padding:0 0 0 22px;
font-weight: bold;
}
#menu dd {
}
#menu li {
text-align: left;
background: #fff;
}
#menu li a, #menu dt a {
padding:0 0 0 22px;
color: #000;
text-decoration: none;
display: block;
height: 100%;
width: 244px;
border: 0 none;
}
html>body #menu li a, #menu dt a {width: 224px;}/* hack ie vu ff, safari etc.. */
#menu li a:hover, #menu dt a:hover {
background: black;
color: white;
width: 244px;
}
html>body #menu li a:hover, #menu dt a:hover {width: 224px;}/* hack ie vu ff, safari etc.. */
/* bouton de titre */
#bien {visibility: hidden; }
#corpo { visibility: hidden; }
#nouv { visibility: hidden; }
#con { visibility: hidden; }
#serv { visibility: hidden; }
#haut { visibility: hidden; }
/*logo nom de cie*/
#tb {
background-image: url("img/tb_fun.gif");
background-repeat: no-repeat;
background-position: 0 0;
margin: 0;
padding: 0;
position: absolute;
top: 16px;
left: 20px;
width: 130px;
height: 21px;
}
/* menu deroulant en bas*/
.navbas {
position: relative;
z-index: 2;
top: 0;
left: 0;
width: 150px;
float: left;
margin: 5px 0 0 0
}
/* contenu principale */
#C {
position: relative;
width: 260px;
float: left;
background-color: white;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
margin: 0 0 0 210px;
padding: 0;
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
border:1px white solid;
}
html>body #C {margin: 0 0 0 420px; }/* hack ie vu ff, safari etc.. */
#C p {
color: #4c4c4c;
font-size: 70%;
font-weight: normal;
line-height: 18px;
text-align: justify;
margin: 0;
padding: 0 20px 8px 20px ;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
}
#C p .g {
font-size: 13px;
font-weight: bold;
}
#C b {
color: #515151;
}
#C h1 {
font-family: arial, sans-serif;
color: #676767;
font-size: 14px;
font-weight: bold;
line-height: 14px;
letter-spacing: 14px;
text-align: left;
margin: 20px 0 20px 20px;
padding: 0 0 0 10px;
border-left: 14px solid #C9C9C9;
/*
display:block;
border:1px red solid;
*/
}
#C h2 {
color: #676767;
font-size: 16px;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
font-weight: bold;
line-height: 21px;
text-align: left;
margin: 0;
padding: 10px 0 5px 20px;
}
#C img {
margin: 10px 0 0 5px;
padding: 5px;
}
#C ul {
font-size: 60%;
color: #4c4c4c;
margin: 0;
padding:0;
text-align: left;
list-style: none;
}
#C ul li {
line-height: 100%; /*important*/
list-style: none;
margin:0;
padding:5px 0 5px 35px;
background-image: url("img/fl.gif");
background-repeat: no-repeat;
background-position: 20px 5px;
}
/* liens */
#C a:link {
display:inline;
font-weight:normal;
color: #676767;
text-decoration: none;
border-bottom: 1px dotted #103d93
}
#C a:visited {
display:inline;
font-weight:normal;
color:#677;
text-decoration: none;
border-bottom: 1px dotted #677
}
#C a:hover, #C a:active {
display:inline;
font-weight:normal;
color: #107bc6;
text-decoration: none
}
/* bouton Haut de page */
#fin {
margin:0 15px 15px 0;
float: right;
border:0;
}
#fin a:link ,h, #fin a:visited, #fin a:hover, #fin a:active, #fin a:focus {
text-decoration: none;
margin: 0;
padding: 0;
border:0;
}
#fin img {
border:0;
}
Le xhtml et la feuille css sont ok sur le validateur w3...
(pardon le ccs validator m'aime pas le hack pour l'opacité....)
Merci encore.
Je tiens à préciser que les sous menu sous IE fonctionne mais que les 2 derniers sont difficilement cliquables, il faut se reprendre plusieurs fois.
A+
