Problema con allineamento menù css orizzontale

federika92

Problema con allineamento menù css orizzontale

Salve..
Ho un problema che non riesco a risolvere con l'allineamento di un menù orizzontale in CSS...
Premetto che non sono assolutamente esperta, anzi sono proprio alle prime armi ma ora sto cercando di creare un sito con Microsoft Expression Web e su internet ho trovato questo menù che mi piace molto... io lavoro con le tabelle layout e il layout principale è costituito da un'unica tabella con un'immagine di sfondo... volevo sapere come posso fare per posizionare il menù ben centrato appena sotto l'immagine superiore...ho provato di tutto ma ogni volta lo sposta verso sinistra fuori dal layout!!! ...
Vorrei posizionarlo come nell'immagine allegata!

Comunque questo è il codice del menù... cosa devo modificare per centrarlo definitivamente?????

CSS:



<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menù</title>
<style type="text/css">
    body {
    margin:0;
    padding:0;
    font: bold 11px/1.5em Verdana;
}

h2 {
    font: bold 14px Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    margin: 0px;
    padding: 0px 0px 0px 15px;
}
     
    
/*- Menu Tabs D--------------------------- */

    #tabsD {
      float:left;
      width:50%;
      background:#FFFFFF;
      font-size:93%;
      line-height:normal;
      border-bottom:1px solid #666;
      }
    ul {
    margin:0 auto;
    padding:10px 10px 0 10px;
    list-style:none;
      }
    li {
      display:inline;
      margin:0;
      padding:0;
      }
    a {
      float:left;
      background:url("tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    a span {
      float:left;
      display:block;
      background:url("tabrightF.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    a span {float:none;}
    /* End IE5-Mac hack */
    a:hover span {
      color:#FFF;
      }
    a:hover {
      background-position:0% -42px;
      }
    a:hover span {
      background-position:100% -42px;
      }
</style>
</head>
```Html:

<body>
<div id="tabsD">
<ul>
<li><a href="#" title="Home Page">Home Page</a></li>
<li><a href="#" title="Chi siamo">Chi siamo</a></li>
<li><a href="#" title="Link 3">Link 3</a></li>
<li><a href="#" title="Longer Link Text">Longer Link Text</a></li>
<li><a href="#" title="Link 5">Link 5</a></li>
<li><a href="#" title="Link 6">Link 6</a></li>
<li><a href="#" title="Link 7">Link 7</a></li>
</ul>
</div>

</body>

berry

potresti provare a sostituire questo

#tabsD {
float:left;
width:50%;
background:#FFFFFF;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}

con questo

margin-left:auto;
margin-right:auto;
width:50%;
background:#FFFFFF;
font-size:93%;
line-height:normal;
border-bottom:1px solid;
}