Voilà, une image fixe "insecte" pour illustrer un menu.
Sur cette image, des zones qui correspondent à des boutons.
Au survol de ces zones, en dessous de l'image fixe, les textes du menu, chaque zone à son texte qui aparait au survol, au clic, sous l'image "insecte" une page html pour chaque bouton (php):
Voilà le code:
<div id="haut">
<div align=center>
<IMG class="insecte" alt="insecte" src="design/a.gif" border="0" width=350 height=157>
</div>
<ul class="mn">
<li>
<a href="?page=biologie/emile.html">
<IMG src="design/p2.gif" border="0" alt="Emile Racovitza : le père de la biospéléologie" width=35 height=35>
<span>Emile Racovitza : le père de la biospéléologie</span></a></li>
<li>
<a href="?page=biologie/laboratoire.html">
<IMG src="design/p2.gif" border="0" alt="Le 1er laboratoire souterrain du monde" width=35 height=35>
<span>Le 1er laboratoire souterrain du monde</span></a></li>
<li>
<a href="?page=biologie/classification.html">
<IMG src="design/p2.gif" border="0" alt="Une classification" width=35 height=35>
<span>Une classification</span></a></li>
...Il y en a 6 comme ca dans mon menu...
</ul>
</div>
<div id="bas">
<?if (!isset ($_GET['page'])) {include ("biologie/bas.html");}
else {include ($_GET['page']);}
?>
</div>
Le CSS:
#haut {
height: auto;
width: auto;
margin: 0px;
padding: 0px;
overflow: auto;
background-color: transparent;
}
#bas {
border-top: 1px solid gray;
background-color: transparent;
width: auto;
height: auto;
}
#haut ul {
height: auto;
list-style-type: none;
margin-left: 10px;
padding: 0px;
position: relative;
top: -40px;
/* positionnement du menu, que vous pouvez changer à loisir */
left: 0px;
}
#haut li {
float: left;
padding-right: 10px;
}
.menu a:hover {
color: #411;
background: #AAA;
color: #fff;
}
.nm a {
/* définition de chaque bouton du menu */
float: left;
display: block;
text-align: center;
border: 0px;
text-decoration: none;
color: #000;
background: #fff;
}
.mn a span {
/* définition de la balise <span> inclue dans <a> */
display: none;
}
.mn a:hover span {
/* définition de la balise <span> au survol */
display: block;
position: absolute;
top: 35px;
left: 10px;
/* largeur de la zone de commentaires, selon la taille du menu */
text-align: left;
border-top: 1px solid gray;
color: #000;
}
.insecte {
position: relative;
top: 00px;
text-align: left;
color: #000;
}
Mes questions sont:
Php et Span pas compatibles?
Span sous IE pas possible?
Ca marche à merveille sous firefox mais le <span> marche pas sous IE. Je me prend la tête à essayer de trouver pourquoi ca marche pas sous IE et j'essaye de trouver une solution de contournement....
Help Help Help.....
Sur cette image, des zones qui correspondent à des boutons.
Au survol de ces zones, en dessous de l'image fixe, les textes du menu, chaque zone à son texte qui aparait au survol, au clic, sous l'image "insecte" une page html pour chaque bouton (php):
Voilà le code:
<div id="haut">
<div align=center>
<IMG class="insecte" alt="insecte" src="design/a.gif" border="0" width=350 height=157>
</div>
<ul class="mn">
<li>
<a href="?page=biologie/emile.html">
<IMG src="design/p2.gif" border="0" alt="Emile Racovitza : le père de la biospéléologie" width=35 height=35>
<span>Emile Racovitza : le père de la biospéléologie</span></a></li>
<li>
<a href="?page=biologie/laboratoire.html">
<IMG src="design/p2.gif" border="0" alt="Le 1er laboratoire souterrain du monde" width=35 height=35>
<span>Le 1er laboratoire souterrain du monde</span></a></li>
<li>
<a href="?page=biologie/classification.html">
<IMG src="design/p2.gif" border="0" alt="Une classification" width=35 height=35>
<span>Une classification</span></a></li>
...Il y en a 6 comme ca dans mon menu...
</ul>
</div>
<div id="bas">
<?if (!isset ($_GET['page'])) {include ("biologie/bas.html");}
else {include ($_GET['page']);}
?>
</div>
Le CSS:
#haut {
height: auto;
width: auto;
margin: 0px;
padding: 0px;
overflow: auto;
background-color: transparent;
}
#bas {
border-top: 1px solid gray;
background-color: transparent;
width: auto;
height: auto;
}
#haut ul {
height: auto;
list-style-type: none;
margin-left: 10px;
padding: 0px;
position: relative;
top: -40px;
/* positionnement du menu, que vous pouvez changer à loisir */
left: 0px;
}
#haut li {
float: left;
padding-right: 10px;
}
.menu a:hover {
color: #411;
background: #AAA;
color: #fff;
}
.nm a {
/* définition de chaque bouton du menu */
float: left;
display: block;
text-align: center;
border: 0px;
text-decoration: none;
color: #000;
background: #fff;
}
.mn a span {
/* définition de la balise <span> inclue dans <a> */
display: none;
}
.mn a:hover span {
/* définition de la balise <span> au survol */
display: block;
position: absolute;
top: 35px;
left: 10px;
/* largeur de la zone de commentaires, selon la taille du menu */
text-align: left;
border-top: 1px solid gray;
color: #000;
}
.insecte {
position: relative;
top: 00px;
text-align: left;
color: #000;
}
Mes questions sont:
Php et Span pas compatibles?
Span sous IE pas possible?
Ca marche à merveille sous firefox mais le <span> marche pas sous IE. Je me prend la tête à essayer de trouver pourquoi ca marche pas sous IE et j'essaye de trouver une solution de contournement....
Help Help Help.....
