Bonjour,
J'ai réalisé un petit menu utilisant XHTML/CSS/JavaScript/PHP.
Le menu en action : http://lsam.v6.ifrance.com/menu%20a%20onglets/index.php
Sous Internet Explorer 7, tout fonctionne, mais sous Mozilla, y a un petit bug pour le moins étrange... la bordure du bas des onglets ne change pas de couleur.
Voici la feuille de style :
Et voici le script JS :
J'avoue ne pas comprendre d'où ça peut venir... CSS ou javascript ? Si vous pouviez m'aider....
Merci d'avance !
Emmanuel
P.S. : Si certains sont intéressés par le script, n'hésitez pas à le télécharger au lien donné plus haut !...
J'ai réalisé un petit menu utilisant XHTML/CSS/JavaScript/PHP.
Le menu en action : http://lsam.v6.ifrance.com/menu%20a%20onglets/index.php
Sous Internet Explorer 7, tout fonctionne, mais sous Mozilla, y a un petit bug pour le moins étrange... la bordure du bas des onglets ne change pas de couleur.
Voici la feuille de style :
table {
color: #000;
background: #fff;
width: 100%;
border: 0;
font-family: "Arial", sans-serif;
border-collapse: collapse;
}
td {
border-top: 0px;
border-left: 0px;
border-bottom: solid 3px #f70;
border-right: 0px;
font: 8pt Arial;
line-height: 12pt;
}
td.separation {
width: 2%;
}
td.passif {
border-top: solid 3px #fd3;
border-left: solid 1px #fd3;
border-bottom: solid 3px #f70;
border-right: solid 1px #fd3;
text-align: center;
font: 12pt Arial;
line-height: 18pt;
color: #ddd;
}
td.actif {
border-top: solid 3px #f70;
border-left: solid 1px #f70;
border-bottom: 0px;
border-right: solid 1px #f70;
text-align: center;
font: 12pt Arial;
line-height: 18pt;
color: #000;
}
.actif a:link, a:visited, a:hover {
background: inherit;
color: #000;
text-decoration: none;
}
.passif a:link, a:visited, a:hover {
background: inherit;
color: #ddd;
text-decoration: none;
}
a:link, a:visited {
background: inherit;
color: #000;
text-decoration: none;
}
a:hover {
background: inherit;
color: #000;
text-decoration: underline;
}
Et voici le script JS :
<script type="text/javascript">
function menu_zap(ref) {
document.getElementById("menu" + ref).className = 'actif';
for(i = 1 ; i <= <?php echo $nb_menu; ?> ; i++){
if(i != ref) {
document.getElementById("menu" + i).className = 'passif';
}
}
var liste = new Array(<?php
$contenu = "";
for($i = 0 ; $i < $nb_menu ; $i++) {
if($contenu != "") { $contenu = $contenu.","; }
$contenu = $contenu.'"'.$contenu_menu[$i].'"';
}
echo $contenu;
?>);
document.getElementById("smenu").innerHTML = liste[ref - 1];
}
</script>
J'avoue ne pas comprendre d'où ça peut venir... CSS ou javascript ? Si vous pouviez m'aider....
Merci d'avance !
Emmanuel
P.S. : Si certains sont intéressés par le script, n'hésitez pas à le télécharger au lien donné plus haut !...