Non Riesco a Centrare un Menù

**capsula** · 14-07-2006, 01:05

Ho realizzato un menù orizzontale con rollover con i css ma non riesco a centrarlo nella pagina....
Vi posto il codice di tutto il file. Il menù risulta allineato a sinistra mentre io lo vorrei centrato...
Se riuscite a risolvere il problema mi fate un favorone! Grazie!

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>
<style type="text/css">
body {
      margin:0;
      padding:0;
      font: bold 11px/1.5em Verdana;
	  background: url(background.gif) repeat;
	  text-align: center; 
	 }

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

img {
	 border: 0 px;
	}

div#pag {
			width: 75%;
			height: 600px;

			background: #E6FFBF;
			margin: 0px auto;	/* allineamento centrale, per FF */
			text-align: left;	/* riporta il testo a sinistra, per IE */ 
			border: 1px solid #000;

}

/* Menu Tabs */

div#menu-tabs {
		  float:left;
		  width:85%;
		  background:#E6FFBF;
		  font-size:93%;
		  line-height:normal;
		  border-bottom: 1px solid #CCC;
		  }
div#menu-tabs ul {
			  margin:0;
			  padding:10px 10px 0 50px;
			  list-style:none;
			  }
div#menu-tabs li {
			  display:inline;
			  margin:0;
			  padding:0;

			  }
div#menu-tabs a {
			  float:left;
			  background:url(SINISTRABORDO.gif) no-repeat left top;
			  margin:0;
			  padding:0 0 0 4px;
			  text-decoration:none;
			  border: 0px; 
		  	}
div#menu-tabs a span {
				  float:left;
				  display:block;
				  background:url(DESTRABORDO.gif) no-repeat right top;
				  padding:5px 15px 4px 6px;
				  color:#838383;
      			 }
	  
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
div#menu-tabs a span { float:none; }
    /* End IE5-Mac hack */
div#menu-tabs a:hover span { color:#434343 }
div#menu-tabs a:hover { background-position:0% -42px; }
div#menu-tabs a:hover span { background-position:100% -42px; }
</style>
</head>

<body>
<div id="pag">

<h2>Tab Menu</h2>

	<div id="menu-tabs">
		<ul>
			[*]<span>HomePage</span>
			[*]<span>News</span>
			[*]<span>Download</span>
			[*]<span>Report PPV</span>
			[*]<span>Forum</span>
			[*]<span>Account</span>
		[/list]
	</div>

</div>
</body>
</html>

**Mich_** · 14-07-2006, 09:12

Prima di sistemare il CSS devi sistemare il codice HTML.

Cosa vuoi centrare? Quale elemento della pagina?
Perche` mi sembra che vuoi centrare separatamente un <h2> e un <div>, e questo complica la viata.

Se <h2> e` il titolo del <div id="menu-tabs">, deve stare al suo interno.

Poi non puoi usare segni matematici dentro i nomi: menu-tabs viene interpretato in alcuni contesti come "menu meno tabs" e quindi non ha senso. In teoria puoi usare il segno _, ma l'implementazione in qualche browser e` carente, quindi non conviene usarlo.

Dopo aver corretto e prima di postare nuovamente passa dal validatore HTML, e magari anche dal validatore CSS.

**capsula** · 14-07-2006, 11:00

Ciao, ho controllato. L'HTML è corretto tranne la chiususra dell'head dice ma sinceramente a me sembra a posto, il css è ok.

Il codice è:

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>
<style type="text/css">
body {
      margin: 0px;
      padding: 0px;
      font: bold 11px/1.5em Verdana;
	  background: url(background.gif) repeat;
	  text-align: center; 
	 }

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

img {
	 border: 0px;
	}

div#pag {
			width: 75%;
			height: 600px;

			background: #E6FFBF;
			margin: 0px auto;	/* allineamento centrale, per FF */
			text-align: left;	/* riporta il testo a sinistra, per IE */ 
			border: 1px solid #000;

}

/* Menu Tabs */

div#menutabs {
		  float: left;
		  width: 85%;
		  background: #E6FFBF;
		  font-size: 93%;
		  line-height: normal;
		  border-bottom: 1px solid #CCC;
		  }
div#menutabs ul {
			  margin: 0px;
			  padding: 10px 10px 0px 50px;
			  list-style: none;
			  }
div#menutabs li {
			  display: inline;
			  margin: 0px;
			  padding: 0px;

			  }
div#menutabs a {
			  float: left;
			  background: url(SINISTRABORDO.gif) no-repeat left top;
			  margin: 0px;
			  padding: 0px 0px 0px 4px;
			  text-decoration: none;
			  border: 0px; 
		  	}
div#menutabs a span {
				  float: left;
				  display: block;
				  background: url(DESTRABORDO.gif) no-repeat right top;
				  padding: 5px 15px 4px 6px;
				  color: #838383;
      			 }
	  
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
div#menutabs a span { float: none; }
    /* End IE5-Mac hack */
div#menutabs a:hover span { color: #434343 }
div#menutabs a:hover { background-position: 0% -42px; }
div#menutabs a:hover span { background-position: 100% -42px; }
</style>
</head>


<body>
<div id="pag">

<h2>Tab Menu</h2>

	<div id="menutabs">
		<ul>
			[*]<span>HomePage</span>
			[*]<span>News</span>
			[*]<span>Download</span>
			[*]<span>Report PPV</span>
			[*]<span>Forum</span>
			[*]<span>Account</span>
		[/list]
	</div>

</div>
</body>
</html>

Provate a salvarlo in un file html e vedrete il menù (senza immagini ma nn importa) che è allineato a sinistra. Io lo voglio allineato al centro, ossia centrare il div menutabs che contine il suddetto menù. Ho provato con text-align: center o margin: 0px auto; ma non funziona....

Ditemi voi... Grazie ciao

**Mich_** · 14-07-2006, 12:08

Riscrivo tutto semplificando.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="stile.css" />
<title>E` necessario inserire un titolo</title>
</head>

<body>
<div id="pag">
  <h2>Tab Menu</h2>
  <ul>
	[*]HomePage
	[*]News
	[*]Download
	[*]Report PPV
	[*]Forum
	[*]Account[/list]
</div>
</body>
</html>

file stile.css

codice:

html, body {
  width: 100%;
  font-size: 100%;
  margin: 0;
  padding: 0;
  font: bold Verdana, sans-serif;
  background: url(background.gif) repeat;
  text-align: center;     /* allineamento centrale, per IE */
}
img {
  border: 0px;
}
h2 {
  font: bold x-larger Verdana, Arial, Helvetica, sans-serif;
  color: #000;
  margin: 0;
  padding: 0 0 0 15px;
}

#pag {
  width: 75%;
  height: 600px;
  background: #E6FFBF;
  margin: 0px auto;	/* allineamento centrale, per FF */
  text-align: left;	/* riporta il testo a sinistra */ 
  border: 1px solid #000;
}

/* Menu Tabs */
#pag ul {
  float: left;       /* a che serve ?? */
  width: 85%;
  background: #E6FFBF;
  font-size: 93%;
  line-height: normal;
  border-bottom: 1px solid #CCC;
  margin: 0;
  padding: 10px 10px 0 50px;
  list-style: none;
}
#pag li {
/*  display: inline; */
  float: left;
  margin: 0px;
  padding: 0px;
  background: url(SINISTRABORDO.gif) no-repeat left top;
}
#pag a {
  padding: 0 0 0 4px;
  text-decoration: none;
  border: 0; 
  color: #838383;
}
#pag a:hover {
  color: #434343;
  background-position: 0% -42px;
}

**capsula** · 14-07-2006, 12:44

Se togli il tag span non mi carichi più il file DESTRABORDO.gif e il menù non vinene fuori correttamente....

Ti allego due foto che così si capisce meglio.

Questo è il menù con il mio codice:

Questo è il menù con il tuo codice:

Come vedi non puoi togliere il tag span altrimenti la seconda immagine non si visualizza. Le due immagini cambieranno poi all'hover.
Comunque io vorrei soltanto che quel menù fosse centrato nella pagina... per questo chiedo dove sbaglio nel mio codice...
Con il tuo il risultato è diverso ma non potevi saperlo

Grazie a tutti, ciao

**Mich_** · 17-07-2006, 11:57

Effettivamente io non conoscevo alcune cose, per cui forse ho "tagliato" troppo.

Comunque il tuo codice e` troppo complesso, e contiene anche errori: i vari float e display rappresentano delle incongruenze.

Gli <span> all'interno degli <a> non hanno senso: per fare i bordi puoi usare il border, eventualmente corretti con i "nifty corners", se necessario.

E anche <ul> all'interno di <div> (come unico figlio) non ha senso: usa direttametne l'<ul> (e` un elemento di blocco, puoi trattarlo come fosse un <div>).

Ma la centratura non funziona? Allora c'e` qualche erorre: ti conviene iniziare un file nuovo, ed inserire i pezzi uno alla volta (iniziando dai blocchi piu` esterni).

**capsula** · 17-07-2006, 14:55

Anche in questo articolo utilizzano diversi float.... non capisco come non riesco a farlo centrato....

Discussione: Non Riesco a Centrare un Menù

Strumenti discussione

Ricerca discussione

Visualizza

Non Riesco a Centrare un Menù

Permessi di invio