je réalise un système simple (je pensais) de petits onglets sous forme de tableaux. Le premier tableau contient un colonne onglet 1 et une colonne onglet 2 et le fait de cliquer sur l'un ou sur l'autre fait apparaitre un autre tableau avec un contenu approprié. Jusqu'ici tout va bien.
Dans mes sous tableaux je veux que lorsque l'on passe la souris sur un item la couleur de fond de ce dernier change (surlignage comme dans un menu).
Tout cela fonctionne très bien sous IE mais sous FireFox tant que je n'ai pas changé de catégorie tout va bien, mais dès que je selectionne une autre catégorie il me redimensionne les tableaux qui ne font plus la taille de la zone (100%) mais au contraire la taille du plus grand élément du tableau, comme si il ne prenait plus en compte le parametre 100%....
Merci d'avance !
Code HTML :
Code : Tout sélectionner
<div id="overall">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="categories1" class="categories_selected" onclick="show_categories(this.id);">Catégorie 1</td>
<td id="categories2" class="categories_unselected" onclick="show_categories(this.id);">Catégorie 2</td>
</tr>
</table>
<table width="100%" class="menu_item_general" cellpadding="0" cellspacing="0" id="contenu1">
<tr>
<td>Item1_1</td>
</tr>
<tr>
<td>Item1_2</td>
</tr>
</table>
<table width="100%" class="menu_item_general" cellpadding="0" cellspacing="0" id="contenu2">
<tr>
<td>Item2_1</td>
</tr>
<tr>
<td>Item2_2</td>
</tr>
</table>
</div>
Code : Tout sélectionner
#overall
{
width:335px;
}
.categories_selected
{
color:#FFFFFF;
background-color:#000000;
padding-left:5px;
font-weight:bold;
}
.categories_unselected
{
padding-left:5px;
background-color:#AEAA63;
}
.menu_item_general td
{
background-color:#000000;
font-size:12pt;
color:#FFFFFF;
font-weight:normal;
text-decoration:none;
padding:1px 1px 1px 5px;
width:100%;
}
.menu_item_general td:hover
{
width:100%;
background-color:#AEAA63;
color:#000000;
cursor:pointer;
}
Code : Tout sélectionner
function show_categories_projets(id)
{
for(i=1;i<3;i++)
{
if(id==''+'categories'+i)
{
document.getElementById(''+id).className = 'categories_projets_selected';
//document.getElementById('contenu'+i).style.visibility = 'collapse';
document.getElementById('contenu'+i).style.display = 'block';
}
else
{
document.getElementById('categories'+i).className = 'categories_projets_unselected';
//document.getElementById('contenu'+i).style.visibility = 'hidden';
document.getElementById('contenu'+i).style.display = 'none';
}
}
}
