Menu à onglets (TABLE,TR,TD)
Bonjour,
je souhaite amélioré mon site web minimaliste
qui dispose
d'un système à 4 d'onglets pour accéder à mes feuilles
(Le menu est redessiné dans chaque feuille)
http://imageshack.us/a/img29/372/table2xv.jpg
http://imageshack.us/a/img856/5371/table1g.jpg
J'ai dessiné les angles gauche et droit des onglets, que j'ai mis dans des mini-images de 10x20
mon soucis c'est que les onglets sans les bords font plus que la hauteur des bords
Quelqu'un saurait comment résoudre ce problème ?
Voici une portion du HTML
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
|
<TR height=22>
<TD id=c1 class=fond_gris></TD>
<TD id=c2 class=fond_gris></TD>
<TD id=c3 class=fond_gris></TD>
<TD id=c4 class=fond_gris></TD>
<TD id=c5 class=fond_gris></TD>
<TD id=c6><img class=pipo src="2bord_sup_gauche.gif" alt=""></TD>
<TD class=normal_tab><A HREF="CV/index.html" class=onglet valign=bottom>CV</A></TD>
<TD id=c8><img src="2bord_sup_droit.gif" alt=""></TD>
<TD id=c9><img src="2bord_sup_gauche.gif" alt=""></TD>
<TD class=normal_tab><A HREF="prog/progs_v2.html" class=onglet>Programmes</A></TD>
<TD id=c11><img src="2bord_sup_droit.gif" alt=""></TD>
<TD id=c12><img src="2bord_sup_gauche.gif" alt=""></TD>
<TD class=normal_tab><A HREF="liens/index.html" class=onglet>Liens</A></TD>
<TD id=c14><img src="2bord_sup_droit.gif" alt=""></TD>
<TD id=c15><img src="2bord_sup_gauche.gif" alt=""></TD>
<TD class=normal_tab></TD>
<TD id=c17><img src="2bord_sup_droit.gif" alt=""></TD>
<TD id=c18 class=fond_gris></TD>
<TD id=c19 class=fond_gris></TD>
<TD id=c20 class=fond_gris></TD>
<TD id=c21 class=fond_gris></TD>
<TD id=c22 class=fond_gris></TD>
</TR> |
Et mon CSS
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
| TABLE#tabcontrol
{
background-image: url('wallpaper/bg-d2.gif');
border-color: #202020;
}
TD#c1 { width: 10px; }
TD#c2 { width: 20px; }
TD#c3 { width: 48px; }
TD#c4 { width: 30px; }
TD#c5 { width: 50px; }
TD#c6 { width: 10px; }
TD#c8 { width: 10px; }
TD#c9 { width: 10px; }
TD#c11 { width: 10px; }
TD#c12 { width: 10px; }
TD#c14 { width: 10px; }
TD#c15 { width: 10px; }
TD#c17 { width: 10px; }
TD#c18 { width: 50px; }
TD#c19 { width: 30px; }
TD#c20 { width: 48px; }
TD#c21 { width: 20px; }
TD#c22 { width: 10px; }
TD#c1top { width: 10px; }
TD#c22top { width: 10px; }
TD#c1bottom { width: 10px; }
TD#c22bottom { width: 10px; }
TD.fond_gris {
background: #D0D0D0;
}
TD.normal_tab {
height: 20px;
width: 130px;
font-size: 5pt;
text-align: center;
color: #202020;
background: #E0E0E0;
}
TD.active_tab {
width: 130px;
font-size: 8pt;
text-align: center;
color: #000000;
}
TD#sheet_hsep { height: 12px; } |
Merci