Bonjour,
J'essaie de realiser un menu avec messages d'informations au survol.
J'ai suivi (je pense) la procédure decrite dans le livre (excellent !
) (p151), mais si mes messages apparaissent bien sous FireFox, rien ne se passe sous IE... 
Ais-je mal compris le code, ou le probleme vien-il du fait que mon menu soit dans un "header" fixe ?
Modifié par Jeff06 (13 Aug 2006 - 00:30)
J'essaie de realiser un menu avec messages d'informations au survol.
J'ai suivi (je pense) la procédure decrite dans le livre (excellent !
) (p151), mais si mes messages apparaissent bien sous FireFox, rien ne se passe sous IE... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<TITLE>TITRE</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">
<META NAME="Robots" CONTENT="none">
<META http-equiv="Pragma" CONTENT="no-cache">
<STYLE type=text/css>
BODY {
PADDING-RIGHT: 0px;
PADDING-LEFT: 150px;
PADDING-BOTTOM: 100px;
MARGIN: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
DIV#header {
WIDTH: 100%;
HEIGHT: 100px;
background-color: #00869C;
z-index: 1;
}
DIV#left-sidebar {
LEFT: 0px;
WIDTH: 150px;
POSITION: absolute;
PADDING-BOTTOM: 50px;
TOP: 0px;
HEIGHT: 100%;
background-color: #00869C;
z-index: 1;
}
@media Screen
{
}
HTML BODY {
OVERFLOW: hidden
}
HTML DIV#content {
OVERFLOW: auto;
HEIGHT: 100%;
padding-left: 40px;
padding-right: 20px;
background-color: #BADEF3;
}
#navcontainer
{
margin: 0px;
padding: 0px;
height: 20px;
right: 0px;
bottom: 0px;
width: 100%;
top: 80px;
}
#navcontainer ul
{
margin: 0px;
list-style-type: none;
text-align: center;
right: auto;
bottom: 0px;
float: right;
padding-bottom: 0px;
height: 20px;
position: relative;
background-image: url(images/barre1.gif);
}
#navcontainer ul li { float: left; }
#navcontainer ul li a
{
text-decoration: none;
color: #BADEF3;
background: url(images/bouton1-off.gif) no-repeat left top;
font-size: 12px;
float: left;
margin: 0px;
height: 20px;
width: 100px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
#navcontainer li a:hover
{
background: url(images/bouton1-on.gif) no-repeat left top;
color: #DBEEF9;
}
#navcontainer li a:active
{
color: #BADEF3;
}
#banniere {
position:relative;
width:100%;
height:60px;
z-index:2;
background-image: url(images/banniere.jpg);
background-position: right 0;
}
#barnav {
position:relative;
width:100%;
height:20px;
z-index:3;
background-image: url(images/barre1.gif);
}
#menu a span {
display: none;
}
#menu a:hover span {
display: block;
position: absolute;
top: 20px;
left: 0px;
width: 100%;
text-align: center;
color: #CC0000;
z-index: 10;
background: none;
background-color: #00FF66;
padding-top: 2px;
}
.Style1 {
color: #BADEF3;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-top: 3px;
}
.Style2 {
color: #BADEF3;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding-top: 4px;
}
.date {
color: #086573;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-top: 2px;
text-align: center;
}
dateheure {
height: 60px;
width: 60px;
padding-left: 5px;
font-weight: bold;
}
#heure {
position:absolute;
width:60px;
height:60px;
z-index:1;
left: 10;
}
#date {
position:absolute;
width:70px;
height:60px;
z-index:2;
left: 70;
background-color: #BADEF3;
}
</STYLE>
</HEAD>
<BODY>
<DIV id=header>
<div id="banniere">
<div align="left"><img src="images/titre.gif" alt="Logo du site" width="180" height="60"><img src="images/degrade.gif" width="50" height="60"></div>
</div>
<div id="barnav">
<div id="navcontainer">
<ul id="menu">
<li><a href="default.asp">Accueil<span>Accueil du site</span></a></li>
<li><a href="carte.asp">La Carte<span>Carte d'implantation</span></a></li>
<li><a href="sites.asp">Les Sites<span>Les autres sites de notre groupe</span></a></li>
<li><a href="partenaires.asp">Partenaires<span>Nos partenaires</span></a></li>
<li><a href="liens.asp">Liens<span>Notre sélection de liens</span></a></li>
<li><a href="abonnement.asp">Abonnement<span>Abonnement à notre lettre d'information</span></a></li>
</ul>
</div>
</div>
</DIV>
<DIV id=left-sidebar>
<div align="center">
<img src="images/Image1.gif" alt="Logo" width="150" height="100"></div>
<div id="heure">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="60" height="60" align="right">
<param name="movie" value="fichiers/horloge.swf">
<param name="quality" value="high">
<param name="BGCOLOR" value="#BADEF3">
<embed src="fichiers/horloge.swf" width="60" height="60" align="right" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#BADEF3"></embed>
</object></div>
<div id="date">
<div align="center" class="date">
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write (AffichageDateConviviale (Aujourdhui) )
-->
</SCRIPT>
</div></div>
</DIV>
<DIV id=content>
<H1>Accueil</H1>
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis risus et purus luctus lobortis. Mauris nunc sem, egestas convallis, nonummy eu, convallis sed, nisl. Donec auctor vulputate massa. Ut a tortor. Donec at nisl. Sed mollis, orci in dignissim dictum, neque leo rutrum massa, in sollicitudin pede ipsum vitae sem. Vestibulum fringilla. Quisque accumsan malesuada pede. Praesent malesuada tellus vitae nisi. Suspendisse sed lacus. Fusce eget arcu. Curabitur lacinia turpis a enim. Nunc et tortor. </p></DIV>
</BODY></HTML>Ais-je mal compris le code, ou le probleme vien-il du fait que mon menu soit dans un "header" fixe ?
Modifié par Jeff06 (13 Aug 2006 - 00:30)
