Accueil
Accueil-1
Accueil-2
Accueil-3
Rubique1
Rubique1-1
Rubique1-2
Rubique1-3
Rubique1-4
Rubique1-5
Rubique1-6
Rubique2
Rubique2-1
Rubique2-2
Rubique3
Rubique4
Rubique4-1
Rubique4-2
Rubique4-3
Rubique4-4
Rubique5
Rubique6
<html> <!-- Date de création: 09/03/2010 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="Paco Zampano"> <meta name="generator" content="WebExpert 6"> <script type="text/javascript"> var i = 0; function sousOnglet( id ) { var p = document.getElementById(id); for( i = 0; i < 7; i++ ) { var e = document.getElementById( 'sous_onglet'+i ); if ( e ) { e.style.visibility='hidden'; e.style.display='none'; } } if( p ) { p.style.visibility='visible'; p.style.display='block'; } } </script> <style type="text/css" media="screen"> body {background-color: #333333; background-image: url(../bg.jpg)} html, body { height:100%; margin:0px; font-family:Verdana; } .sous_onglet { border:solid 1px lime; width:140px; padding:2px; position:absolute; z-index:100; margin-left: 0px !important; margin-left: -47px; /*depend taille caractere */ margin-top: 0.5em; /*---------------------- */ visibility:hidden; color: #000000; background-color: #FFFFFF; layer-background-color:#FFFFFF; text-align:left; } .sous_onglet a { color: #000000; display:block; text-decoration:none; } .sous_onglet a:hover { color:#000000; background-color:#CCFFFF; text-decoration:none; display:block; } .onglet { color:#DDDDDD; width:95px; overflow:hidden; display:block; } .onglet a { color:#DDDDDD; text-decoration: none; display:block; } .onglet a:hover { color:#000000; background-color:red; display:block; } </style> </head> <body> <br><br> <table align="center" style="font-family:Verdana;font-size:12px;" border="0" cellspacing="0" cellpadding="0"> <tr style="height: 4px; background-color: magenta"> <td colspan="13"></td> </tr> <tr> <td align="center"> <div class="onglet"> <a href="#" onmouseover="javascript:sousOnglet('sous_onglet0');">Accueil</a> </div> <div id="sous_onglet0" class="sous_onglet"> <a href="#" style="border-bottom:1px solid red;">Accueil-1</a> <a href="#" style="border-bottom:1px solid red;">Accueil-2</a> <a href="#">Accueil-3</a> </div> </td> <td width="4" align="center"> <div style="width:1px; height:18px; border-right:1px solid yellow;"></div> </td> <td align="center"> <div class="onglet"> <a href="#" onmouseover="javascript:sousOnglet('sous_onglet1');">Rubique1</a> </div> <div id="sous_onglet1" class="sous_onglet"> <a href="#" style="border-bottom:1px solid red;">Rubique1-1</a> <a href="#" style="border-bottom:1px solid red;">Rubique1-2</a> <a href="#" style="border-bottom:1px solid red;">Rubique1-3</a> <a href="#" style="border-bottom:1px solid red;">Rubique1-4</a> <a href="#" style="border-bottom:1px solid red;">Rubique1-5</a> <a href="#">Rubique1-6</a> </div> </td> <td width="4" align="center"> <div style="width:1px; height:18px; border-right:1px solid yellow;"></div> </td> <td align="center"> <div class="onglet"> <a href="#" onmouseover="javascript:sousOnglet('sous_onglet2');">Rubique2</a> </div> <div id="sous_onglet2" class="sous_onglet"> <a href="#" style="border-bottom:1px solid red;">Rubique2-1</a> <a href="#">Rubique2-2</a> </div> </td> <td width="4" align="center"> <div style="width:1px; height:18px; border-right:1px solid yellow;"></div> </td> <td align="center"> <div class="onglet"> <a href="#" onmouseover="javascript:sousOnglet();">Rubique3</a> </div> <div id="sous_onglet3"></div> </td> <td width="4" align="center"> <div style="width:1px; height:18px; border-right:1px solid yellow;"></div> </td> <td align="center"> <div class="onglet"> <a href="#" onmouseover="javascript:sousOnglet('sous_onglet4');">Rubique4</a> </div> <div id="sous_onglet4" class="sous_onglet"> <a href="#" style="border-bottom:1px solid red;">Rubique4-1</a> <a href="#" style="border-bottom:1px solid red;">Rubique4-2</a> <a href="#" style="border-bottom:1px solid red;">Rubique4-3</a> <a href="#">Rubique4-4</a> </div> </td> <td width="4" align="center"> <div style="width:1px; height:18px; border-right:1px solid yellow;"></div> </td> <td align="center"> <div class="onglet"> <a href="#" onmouseover="javascript:sousOnglet();">Rubique5</a> </div> <div id="sous_onglet5"></div> </td> <td width="4" align="center"> <div style="width:1px; height:18px; border-right:1px solid yellow;"></div> </td> <td align="center"> <div class="onglet"> <a href="#" onmouseover="javascript:sousOnglet();">Rubique6</a> </div> <div id="sous_onglet6"></div> </td> </tr> <tr style="height: 4px; background-color: magenta"> <td colspan="13"></td> </tr> </table> </body> </html>