Problema con allineamento menù orizzontale

**Federika92** · 13-06-2008, 12:46

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 x posizionare il menù centrato appena sotto all'immagine...ho provato di tutto ma ogni volta lo sposta verso sinistra fuori dal layout!!! ...
Vorrei posizionarlo così:

Questo è il codice del menù... cosa devo modificare?????

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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;
      }
    #tabsD ul {
	margin:0 auto;
	padding:10px 10px 0 10px;
	list-style:none;
      }
    #tabsD li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsD a {
      float:left;
      background:url("tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsD 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 \*/
    #tabsD a span {float:none;}
    /* End IE5-Mac hack */
    #tabsD a:hover span {
      color:#FFF;
      }
    #tabsD a:hover {
      background-position:0% -42px;
      }
    #tabsD a:hover span {
      background-position:100% -42px;
      }
</style>
</head>

<body>
<div id="tabsD">
  <ul>[*]<span>Home Page</span>[*]<span>Chi siamo</span>[*]<span>Link 3</span>[*]<span>Longer Link Text</span>[*]<span>Link 5</span>[*]<span>Link 6</span>
	[*]<span>Link 7</span>[/list]
</div>




</body>
</html>

Grazie 1000 in anticipo e spero di essermi spiegata bene!!!

**Lathspell** · 14-06-2008, 13:36

prova così:

codice:

#tabsD {
      margin-left: auto;
      margin-right: auto;
      width:50%;
      background:#FFFFFF;
      font-size:93%;
      border-bottom:1px solid #666;
      }

**Federika92** · 14-06-2008, 14:52

Si grazie, così funziona perfettamente e lo posiziona al centro della pagina! C'è solo un'altro piccolo problema....
La riga sotto al menù è tutta spostata verso destra e io invece vorrei posizionare il menù proprio al centro di quella riga... cosa devo modificare ancora??
Ecco l'immagine:

Discussione: Problema con allineamento menù orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

Problema con allineamento menù orizzontale

Permessi di invio