Index: trunk/push-web
===================================================================
--- trunk/push-web	(revision 330)
+++ trunk/push-web	(revision 331)
@@ -80,11 +80,13 @@
 </h1>
 
-<p>
-Ce portail pr&eacute;sente&nbsp;:
-toutes les <b>IP d&eacute;tect&eacute;es</b>,
-les <a href="ip-free.html">IP non d&eacute;tect&eacute;es</a> depuis plus de deux ann&eacute;es,
-les <a href="bad-vlan-id.html">machines configur&eacute;es dans un mauvais VLAN</a>.
-</p>
-
+<div id="navbar">
+ <ul>
+  <li id="selected"><a href="index.html">IP detected</a></li>
+  <li><a href="ip-free.html">IP free</a></li>
+  <li><a href="bad-vlan-id.html">Bad VLAN ID</a></li>
+ </ul>
+</div>
+
+<div id="content">
 <p>
 Les r&eacute;sultats brut de Klask sont accessibles directement via wget ou curl, par exemple, pour un traitement sp&eacute;cifique :
@@ -117,11 +119,13 @@
 </h1>
 
-<p>
-Ce portail pr&eacute;sente&nbsp;:
-toutes les <a href="index.html">IP d&eacute;tect&eacute;es</a>,
-les <b>IP non d&eacute;tect&eacute;es</b> depuis plus de deux ann&eacute;es,
-les <a href="bad-vlan-id.html">machines configur&eacute;es dans un mauvais VLAN</a>.
-</p>
-
+<div id="navbar">
+ <ul>
+  <li><a href="index.html">IP detected</a></li>
+  <li id="selected"><a href="ip-free.html">IP free</a></li>
+  <li><a href="bad-vlan-id.html">Bad VLAN ID</a></li>
+ </ul>
+</div>
+
+<div id="content">
 <p>
 Les r&eacute;sultats brut de Klask sont accessibles directement via wget ou curl, par exemple, pour un traitement sp&eacute;cifique :
@@ -136,4 +140,5 @@
 
 $CAT <<END >> ${TMP}/ip-free.html
+</div>
 </body>
 </html>
@@ -154,11 +159,13 @@
 </h1>
 
-<p>
-Ce portail pr&eacute;sente&nbsp;:
-toutes les <a href="index.html">IP d&eacute;tect&eacute;es</a>,
-les <a href="ip-free.html">IP non d&eacute;tect&eacute;es</a> depuis plus de deux ann&eacute;es,
-les <b>machines configur&eacute;es dans un mauvais VLAN</b>.
-</p>
-
+<div id="navbar">
+ <ul>
+  <li><a href="index.html">IP detected</a></li>
+  <li><a href="ip-free.html">IP free</a></li>
+  <li id="selected"><a href="bad-vlan-id.html">Bad VLAN ID</a></li>
+ </ul>
+</div>
+
+<div id="content">
 <p>
 Les r&eacute;sultats brut de Klask sont accessibles directement via wget ou curl, par exemple, pour un traitement sp&eacute;cifique :
Index: trunk/style-klask.css
===================================================================
--- trunk/style-klask.css	(revision 330)
+++ trunk/style-klask.css	(revision 331)
@@ -1,72 +1,117 @@
 
 h1{
-  text-align  : center;
-  font-family : Verdana;
-  font-size   : 120%;
-  }
+   text-align  : center;
+   font-family : Verdana;
+   font-size   : 120%;
+   }
 
 table.sortable {
-  border-collapse    : collapse;
-  font-family        : Verdana;
-  }
+   border-collapse    : collapse;
+   font-family        : Verdana;
+   }
 
 table.sortable caption {
-  caption-side    : bottom;
-  text-align      : center;
-  text-decoration : underline;
-  }
+   caption-side    : bottom;
+   text-align      : center;
+   text-decoration : underline;
+   }
 
 table.sortable th {
-  color           : #FFF;
-  background      : #000;
-  }
+   color           : #FFF;
+   background      : #000;
+   }
 
 th.klask-header-left {
-  -moz-border-radius-topleft : 1ex;
-  }
+   -moz-border-radius-topleft : 1ex;
+   }
 
 th.klask-header-right {
-  -moz-border-radius-topright : 1ex;
-  }
+   -moz-border-radius-topright : 1ex;
+   }
 
 th.klask-footer-left {
-  -moz-border-radius-bottomleft : 1ex;
-  }
+   -moz-border-radius-bottomleft : 1ex;
+   }
 
 th.klask-footer-right {
-  -moz-border-radius-bottomright : 1ex;
-  }
+   -moz-border-radius-bottomright : 1ex;
+   }
 
 table.sortable td {
-  border        : 1px solid #AAA;
-  border-top    : 1px solid #AAA;
-  border-bottom : 1px solid #AAA;
-  border-left   : 1px solid #AAA;
-  border-right  : 1px solid #AAA;
-  }
+   border        : 1px solid #AAA;
+   border-top    : 1px solid #AAA;
+   border-bottom : 1px solid #AAA;
+   border-left   : 1px solid #AAA;
+   border-right  : 1px solid #AAA;
+   }
 
 tr.odd td {
-  background      : #DBF9CF;
-  border-collapse : collapse;
-  font-family     : Courier;
-  padding-left    : 0.5ex;
-  padding-right   : 0.5ex;
-  }
+   background      : #DBF9CF;
+   border-collapse : collapse;
+   font-family     : Courier;
+   padding-left    : 0.5ex;
+   padding-right   : 0.5ex;
+   }
 
 tr.even td {
-  background      : #FFF;
-  border-collapse : collapse;
-  font-family     : Courier;
-  padding-left    : 0.5ex;
-  padding-right   : 0.5ex;
-  }
+   background      : #FFF;
+   border-collapse : collapse;
+   font-family     : Courier;
+   padding-left    : 0.5ex;
+   padding-right   : 0.5ex;
+   }
 
 td.bklask-port {
-  text-align      : right;
-  }
+   text-align      : right;
+   }
 
 td.bklask-arrow {
-  text-align      : left;
-  text-indent     : -5.5ex;
-  padding-left    : 6.5ex !important;
-  }
+   text-align      : left;
+   text-indent     : -5.5ex;
+   padding-left    : 6.5ex !important;
+   }
+
+#navbar ul {
+   list-style: none;
+   padding: 0;
+   margin: 0;
+   }
+
+#navbar li {
+   float: left;
+   border: 1px solid #bbb;
+   border-bottom-width: 0;
+   margin: 0;
+   }
+
+#navbar a {
+   text-decoration: none;
+   display: block;
+   background: #eee;
+   padding: 0.24em 1em;
+   color: #00c;
+   width: 8em;
+   text-align: center;
+   }
+
+#navbar a:hover {
+   background: #ddf;
+   }
+
+#navbar #selected {
+   border-color: black;
+   }
+
+#navbar #selected a {
+   position: relative;
+   top: 1px;
+   background: white;
+   color: black;
+   font-weight: bold;
+   }
+
+#content {
+   border: 1px solid black;
+   clear: both;
+   padding: 0 1em;
+   }
