Salve a tutti, ho bisogno di un aiuto.
Ho un menù fatto in Js che utilizza un CSS. Il problema è che il menù è centrato nella pagina e rimane gli spazi vuoti ai lati. Io vorrei che praticamente, il menù occupasse tutta la lunghezza(orizzontalmente) della pagina.
Vi allego la foto della pagina, com'è e come vorrei che fosse, per esplicitarmi meglio(come la vorrei è con l'aggiunta delle frecce con photoshop).
Inoltre vi allego i file .css e .js che formano questo menù.
Ciao e grazie mille

Questa l'immagine : http://img132.imageshack.us/img132/4909/menujs.jpg


menu.jsp :

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<link href="<%=request.getContextPath()%>/css/mio_css_verde.css" rel="stylesheet">
<html>
<head>
<title>Menu </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="menu.css">
<script type="text/javascript" src="menu.js"></script>
</head>
<body style=" background-image: url(<%=request.getContextPath()%>/images/s6.jpg);background-repeat: repeat;">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>

<center> <a href="http://www.fides.it" >
[img]<%=request.getContextPath()%>/images/logoFides.jpg[/img]
</a></center>


<center> <a href="<%=request.getContextPath()%>/index.jsp" >
[img]<%=request.getContextPath()%>/images/scritta_SRD.jpg[/img]
</a></center>

<div >
<center> <p class="footerHome">© 2008-09 Fides Consulting S.r.l. - C.F. e P.IVA 05131731217

Fides
</p>
</center>
</div>


<center><table id="MJ_MainMenu" cellpadding="0" cellspacing="0"><tr>
<td class="MJ_MainMenu" onmouseover="MJ_OpenMenu(1)" onmouseout="MJ_CloseMenu(1)">
Amministrazione
<div id="MJ_1" class="MJ_HiddenLink">
Gestione utenti
Configurazione DataView
</div>
</td>
<td class="MJ_MainMenu" onmouseover="MJ_OpenMenu(2)" onmouseout="MJ_CloseMenu(2)">
Analisi dei dati
<div id="MJ_2" class="MJ_HiddenLink">
Elenco
Vista
</div>
</td>
<td class="MJ_MainMenu" onmouseover="MJ_OpenMenu(3)" onmouseout="MJ_CloseMenu(3)">
Reporting
<div id="MJ_3" class="MJ_HiddenLink">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
</td>
<td class="MJ_MainMenu" onmouseover="MJ_OpenMenu(4)" onmouseout="MJ_CloseMenu(4)">
Cruscotto
<div id="MJ_4" class="MJ_HiddenLink">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
</td>
<td class="MJ_MainMenu" onmouseover="MJ_OpenMenu(5)" onmouseout="MJ_CloseMenu(5)">
Voce 5
<div id="MJ_5" class="MJ_HiddenLink">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
</td>
</tr></table></center>

</body>
</html>


menu.css :

#MJ_MainMenu
{
background: #DD0000;
border: solid 1px #000000;
}
td.MJ_MainMenu
{
vertical-align: top;
width: 100px;
}
div.MJ_HiddenLink
{
visibility: hidden;
position: absolute;
}
div.MJ_VisibleLink
{
visibility: visible;
position: absolute;
width: 150px;
margin: 0px 0px 0px -1px;
border-top: solid 1px #000000;
border-left: solid 1px #000000;
border-right: solid 1px #000000;
}
a.MJ_VoiceClass, a.MJ_VoiceClass:hover
{
display: block;
position: relative;
font-weight: bold;
text-decoration: none;
padding: 5px 0px 5px 5px;
}
a.MJ_VoiceClass
{
color: #FFFFFF;
}
a.MJ_VoiceClass:hover
{
color: #FFCC00;
}
a.MJ_LinkClass, a.MJ_LinkClass:hover
{
display: block;
position: relative;
color: #000000;
text-decoration: none;
padding: 5px 0px 5px 5px;
border-bottom: solid 1px #000000;
}
a.MJ_LinkClass
{
background: #EEEEEE;
}
a.MJ_LinkClass:hover
{
background: #DDDDDD;
}



body
{
background: #FFFFFF;
color: #000000;
margin: 10px 10px 10px 10px;
}
td, div
{
font-size: 10px;
font-family: verdana;
}
#MJ_Author
{
margin: 100px 0px 0px 0px;
}
a
{
color: #3366CC;
text-decoration: underline;
}
a:hover
{
color: #DD0000;
text-decoration: underlinene;
}




e il menu.js :

function MJ_OpenMenu(MJ)
{
document.getElementById("MJ_" + MJ).className = "MJ_VisibleLink";
}
function MJ_CloseMenu(MJ)
{
document.getElementById("MJ_" + MJ).className = "MJ_HiddenLink";
}