bonjour
pour mon site, j'usilise le code css suivant :
.page {
height: 100%;
width: 100%;
}
.cadregauche {
width: 20%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #33FFFF;
position: absolute;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}
#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}
#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
}
#menu li a:hover {
text-decoration: underline;
}
#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
.cadredroit {
width: 80%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20%;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
text-decoration: none;
position: absolute;
height: 100%;
}
le code de ma page est le suivant :
<script type="text/javascript">
<!-- script du menu.
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 d'ouverture de pop up
function ouvreFenetre(page, largeur, hauteur)
{
window.open(page, "", "scrollbars=no,location=no,menubar=no,toolbar=yes,resizable=no,directories=no,status=no,width=" + largeur + ",height=" + hauteur);
}
//-->
function change(largeur,hauteur)
{
window.resizeTo(hauteur,largeur);
}
function twFermer()
{
window.close();
}
</script>
</head>
<body>
<div class="page">
<div class="cadregauche">
<dl id="menu">
<dt onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre();"><a href="index.php?page=accueil">Accueil</a> </dt>
<dt onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre();"><a href="#">Bases de données</a> </dt>
<dd id="smenu2" onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre();">
<ul>
<li><a href="index.php?page=albummp3">MP3</a></li>
<li><a href="index.php?page=DVD">DVD</a></li>
</ul>
</dd>
<dt onMouseOver="javascript:montre('smenu3');" onMouseOut="javascript:montre();"><a href="index.php?page=bonsplans">Bons
plans</a></dt>
<dt onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();"><a href="index.php?page=CV">C.V.</a></dt>
<dt onMouseOver="javascript:montre('smenu5');" onMouseOut="javascript:montre();"><a href="#">Informatique</a></dt>
<dd id="smenu5" onMouseOver="javascript:montre('smenu5');" onMouseOut="javascript:montre();">
<ul>
<li><a href='index.php?page=wol'>le Wake On Lan</a></li>
</ul>
</dd>
<dt onMouseOver="javascript:montre('smenu6');" onMouseOut="javascript:montre();"><a href="index.php?page=liens">Liens</a></dt>
<dt onMouseOver="javascript:montre('smenu7');" onMouseOut="javascript:montre();"><a href="#">Photos</a></dt>
<dd id="smenu7" onMouseOver="javascript:montre('smenu7');" onMouseOut="javascript:montre();">
<ul>
<li><a href="index.php?page=ete2006">Eté 2006</a></li>
</ul>
</dd>
<dt onMouseOver="javascript:montre('smenu8');" onMouseOut="javascript:montre();"><a href="#">Téléchargements</a></dt>
<dd id="smenu8" onMouseOver="javascript:montre('smenu8');" onMouseOut="javascript:montre();">
<ul>
<li><a href="index.php?page=telechargementmozilla">Mozilla</a></li>
<li><a href="index.php?page=telechargementmsn">MSN</a></li>
</ul>
</dd>
</dl>
</div>
<DIV class="cadredroit">
<?php
if (!isset($_GET['page']))
{
$page1= 'accueil';
} else {
$page1= $_GET['page'];
}
switch($page1)
{
case 'accueil': include ('accueil.php');break;
case 'albummp3': include ("http://bpagnon.info/bdd/indexalbumsmp3.php?utilisateur=$user" );break;
case 'DVD': include ("http://bpagnon.info/bdd/indexfilmsdvd.php?utilisateur=$user" );break;
case 'bonsplans':include ('http://bpagnon.info/bonsplans/index.php');break;
case 'CV':include ('http://bpagnon.info/cv/cv1.php');break;
case 'liens':include ('http://bpagnon.info/liens/index.php');break;
case 'ete2006':include ('http://bpagnon.info/photos/2006ete.php');break;
case 'telechargementmozilla':include ('http://bpagnon.info/telechargements/mozilla.php');break;
case 'telechargementmsn':include ('http://bpagnon.info/telechargements/msn.php');break;
case 'wol':include ('http://bpagnon.info/informatique/wol.php');break;
}
?>
</DIV>
</div>
Sous firefox, il ni a pas de soucis pour l'affichage, mais sous IE, les éléments du menu sont transparants. Pour vous faire une idée : http://www.bpagnon.info/index.php . En fait, je voudrais que lorsque le visiteur aille dans 'base de données', le texte de la partie de droite soit recouverte. quel est le bon code?
Merci de votre aide
