Je débute en HTML/CSS et je n'ai pas encore corrigé ni validé mon code, alors il y a sûrement pas mal d'erreurs dans mon code, mais si cela peut vous permettre de résoudre mon problème, le voici :
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Jeeves Enterprise - Installation </title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<meta name="description" content="Jeeves Enterprise : Menu du CD"/>
<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 class="global">
<div class="header"> </div>
<div class="conteneurmenu">
<dl id=menu>
<dt> <a href="JvsEntInst.exe"> Installation </a> </dt>
<dt onmouseover="javascript:montre('smenu');" onmouseout="javascript:montre();"> <a href="C:\Documents and Settings\Commercial\Bureau\Menu CD" target="_blank"> Explorer le CD </a> </dt>
<dd id="smenu" onmouseover="javascript:montre('smenu');" onmouseout="javascript:montre();">
<ul>
<li> <a href="C:\Documents and Settings\Commercial\Bureau\Menu CD\Dossier 1" target="_blank"> Dossier 1 </a> </li>
<li> <a href="C:\Documents and Settings\Commercial\Bureau\Menu CD\Dossier 2" target="_blank"> Dossier 2 </a> </li>
</ul>
</dd>
<dt> <a href="http://www.fr.jeeves.se/" target="_blank"> Extranet partenaire </a> </dt>
<dt> <a href="rienpourlinstant" target="_blank"> Supplément </a> </dt>
</dl>
</div>
<div class="annonce">
<!--"Texte qui apparaît dans la boîte de droite. Pour le modifier, veuillez modifier le fichier "annonce.html"-->
<object data="annonce.html" type="text/html"/>
</div>
<div id="lisezmoi">
<a href="lisez-moi.txt" target="_blank"> <img src="Icon.gif" alt="Fichier lisez-moi" title="Lisez-moi"/> </a>
</div>
</div>
</body>
</html>
CSS
/*corps de la page*/
body
{
text-align: center;
font-family: arial;
font-size: 12px;
padding: 0;
margin: 0;
}
/*conteneur principal*/
.global
{
width: 960px;
height: 641px;
margin-top: 9px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/*image du haut (Jeeves)*/
.header
{
background-image: url('img_haut.jpg');
height: 200px;
}
/*MENU*/
.conteneurmenu
{
background-image: url('bg2.jpg');
background-repeat: no-repeat;
height: 388px;
width: 660px;
float: left;
}
dl, dt, dd, ul, li
{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu
{
position: relative;
top: 30px;
left: 150px;
width: 400px;
}
#menu dt /*Menu principal*/
{
cursor: pointer;
background: url('bouton2.gif') no-repeat 0 0;
width: 234px;
height: 29px;
line-height: 29px;
margin: 40px 0;
border: 0;
text-indent: 40px;
}
#menu dd /*Sous-menu*/
{
display: none;
position: absolute;
z-index: 100;
top: 109px;
left: 236px;
height: 58px;
width: 175px;
background: url('smenu.gif') no-repeat;
border: O;
}
#menu li
{
text-align: center;
font-size: 80%;
height: 27px;
line-height: 27px;
}
#menu li a, #menu dt a
{
color: white;
font-size: 1.2em;
text-decoration: none;
display: block;
}
#menu dt a:hover /*rollover du menu principal*/
{
width: 234px;
height: 29px;
background: url('bouton2.gif') no-repeat 0 -29px;
border: 0;
}
/*conteneur du texte de droite*/
.annonce
{
float: right;
height: 388px;
width: 250px;
margin-top: 5px;
}
/*texte*/
object
{
float: right;
height: 175px;
width: 212px;
overflow: auto;
text-align: justify;
margin-left: auto;
margin-right: auto;
padding: 3px;
}
img
{
border: 0;
width: 48px;
height: 48px;
}
#lisezmoi a
{
position: absolute;
z-index: 100;
right: 425px;
top: 500px;
border: 0;
margin: 0;
}
Je sais que le menu qui combine rollover et sous-menus en javascript est très expérimental, et j'ai beaucoup de mal avec les positionnements, je crois que c'est cela qui m'a obligé à utiliser un positionnement absolu pour cette fameuse image-lien...
Modifié par Pitufi (04 Aug 2006 - 12:25)
