Probleem met horizontale menubalk

[Finder]

Beste mensen ik ben momenteel bezig met een test site.

http://www.comarbenelux.be/test/comarbenelux/bedrijf

Ik zoek een manier om de menu balk op die afbeelding in de header te floaten, met een vaste breedte van 700px, ieder knopje met een breedte van 100px, en een afbeelding die veranderd als je hover-t.

Ik heb al getracht om een extra tabel-row toe te voegen, om een div erop te floaten.
Is het een idee om de afbeelding half-transparant te maken?


In bijlage de CSS.

code:

* {
margin: 0;
padding: 0;
}

.clear { 
clear: both;
}

table {
border-collapse:collapse;
    border-style: hidden;
}

/* Kleuren:
donker-blauw #0f2f58
cyaan-blauw #269bdb
licht-blauw #dceaf9
*/

div#header {
position:fixed;
display: block;
width:960px;
height:140px;
left:50%;
margin-left:-480px;
z-index: 1;
}

body {
background: #0f2f58 url(images/test.png) repeat-x fixed;  
}


div#content {
position:absolute;
width:960px;
left:50%;
/*substract half the width of the div (400px in our case) from margin-left*/
margin-left:-440px;
top: 230px;
}

div#pagina_title {
position: absolute;
}

div#newsflash {
color: white;
position:absolute;
bottom: 35px; /* Afstand vanaf bodem, uitlijnen met facts of belgium */
width: 100%;
text-align: center;
text-align: center;
margin: auto;
padding: 5px;
}

div#contactinfo {
bottom: 0;
position:absolute;
width: 100%;
text-align: center; 
}

html > body #footer {
bottom: -1px;
position:fixed;
background: url(images/Footer.png) repeat-x;
height: 90px;
}

#footer {
height:5em;
width:100%;
font-size: 0.7em;
position: absolute;
bottom: 0;
z-index: 2;
background-color: white;
}
        
div#factsofbelgium {
width: 250px;
height: 80px;
display: block;
position: absolute;
right: 0;
bottom: 40px;
z-index: 1;
}

div#searchbox { /* Nog niet gebruikt moet ik nog uit drupal halen */
position: absolute;
font-size: 0.7em;
background-color: #dceaf9;
width: 150px;
height: 10px;
right: 10px;
top: 120px;
text-transform: capitalize;
font-weight: bold;
font-variant: small-caps;
color: #269bdb;
padding: 0.5em;
}

span#bedrijfsnaam {
color: #0f2f58;
font-size: 1em;
font-variant: normal;
}

span#adres {
color: #269bdb;
font-size: 1em;
font-variant: normal;
}

.tussenkop {
font-weight: bold; 
font-size: 1.2em; 
}

h1 { 
font-size: 1.0em; 
text-transform: uppercase; 
margin-bottom: 0.8em;
color: #269bdb;
}

h2 {
    font-size: 1.0em;
    color: white;
    margin-bottom: 20px;
}

h3 { 
font-size: 0.8em;
color: white; 
margin-bottom: 0.8em; 
}

h2 {
font-size: 1.2em;
}

a#factsofbelgium2 {
position: absolute;
display: block;
right: 220px;
bottom: 5px;
height: 15px;
width: 100px;
color: #0f2f58;
font-size: 1em;
text-decoration: none;
text-align: right;
}

a:hover#factsofbelgium{
text-decoration: none;
color: white;
}

.bodytext {
display: block;
color: white;
font-size: 0.7em;
padding-right: 40px;
float: left;
width: 245px;
}

div#titelpagina{
display: block;
width: 250px;
height: 20px;
color: #dceaf9;
background-color: transparent;
position: absolute;
top: 70px;
right: 250px;
text-transform: uppercase;
font-size: 0.8em;
}



div#links h2 {
text-align: center;
}

div#content p {
color: white;
    font-size: 0.8em;
    line-height: 1.2em;
}

div#footer h2 {
margin: 0;
}

div#footer p {
margin: 0;
margin-bottom: 10px;
}

span#newsflash2 {
color: white;
font-size: 1em;
font-weight: bold;
margin-top: auto;
margin-bottom: auto;
}

div#newsflash p { /* Dit is de 'scrollende' tekst */
color: #0f2f58;
font-size: 1em;
}

div#navblock {
width: 900px;
height: 30px;
background-color: transparent;
position: absolute;
margin-top: 111px;
z-index: 90;
list-style-type: none;
}

div#berekenmodule {
width: 960px;
display: block;
position: absolute;
top: 5px;
z-index: 2;
}

/* @group Over-rulen System */

/* $Id: system-menus.css,v 1.1 2007/10/05 14:50:25 goba Exp $ */

ul.menu {
  list-style: none;
  border: none;
  text-align:left; /* LTR */
}
ul.menu li {
  margin: 0 0 0 0.5em; /* LTR */
}
li.expanded {
  list-style-type: circle;
  list-style-image: url(../../misc/menu-expanded.png);
  padding: 0.2em 0.5em 0 0; /* LTR */
  margin: 0;
}
li.collapsed {
  list-style-type: disc;
  list-style-image: url(../../misc/menu-collapsed.png); /* LTR */
  padding: 0.2em 0.5em 0 0; /* LTR */
  margin: 0;
}
li.leaf {
  list-style-type: square;
  list-style-image: url(../../misc/menu-leaf.png);
  padding: 0.2em 0.5em 0 0; /* LTR */
  margin: 0;
}
li a.active {
  color: #000;
}
td.menu-disabled {
  background: #ccc;
}
ul.links {
  margin: 0;
  padding: 0;
  z-index: 2;
  margin-top: -25px;
}
ul.links.inline {
  display: inline;
}
ul.links li {
  display: inline;
  list-style-type: none;
  padding: 0 0.5em;
}
.block ul {
  margin: 0;
  padding: 0 0 0.25em 1em; /* LTR */
}

/* @end */

[trinite_t]

Tabellen met een div erin? Volgens mij is dat niet helemaal de oplossing. (zie src)

Als ik het goed heb wil je het menu over het logo zetten? Of net onder die onderste streep in het logo?
Voor beide oplossingen, verwijder die tabel iig.

Bij het eerste:
logo als achtergrond instellen en die navigatie div er netjes over heen positioneren.

Bij de tweede:
Afbeelding zo aanpassen dat je het onderste stuk er af haalt (of in een div zetten met een overflow hidden) zodat je dat niet meer ziet. Het menu in een div direct eronder zetten.