centrare un menu css

**paul78** · 03-11-2010, 11:05

allora ho modificato un menu orizzontale in css da un sito.......ma vorrei metterlo alcentro della pagina ma non riesco a capire come fare

.....il cod. è questo....

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 profile="http://gmpg.org/xfn/11">

<title>CSS Menu a tendina</title>


<style type="text/css">

#menu{
padding:0;
font-family:Verdana,Arial;
font-size:0.70em;
}
#menu ul{
padding:0;
margin:0;
text-align: left;
}
#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
} 

#menu li a{
width:130px; 
height: 30px; 
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
color: #333;
filter: alpha(opacity=80);
background-image:url(up.png)
} 

#menu li a:hover{
filter: alpha(opacity=0);
background-image:url(down.png)
} 

#menu ul ul{
position: absolute;
top: 30px; 
visibility: hidden;
}

#menu ul li:hover ul {
visibility:visible;
} 

#menu ul ul li:hover ul li {
visibility:visible;
} 


#menu ul ul ul li:hover ul li {
display:block;
}
 
</style>

</head>

<body>

<div id="menu">
<ul>
	[*]Home
    <ul>
 	[/list]
      
	[*]Intro
		<ul>
			[*]Intro 1
			[*]Intro 2
		[/list]
	
	[*]Banners
		<ul>
			[*]Banner 1
			[*]Banner 2
		[/list]
	
    	[*]Sfondi
		<ul>
			[*]Sfondo 1
			[*]Sfondo 2
		[/list][*]Contatti
    <ul>
 	[/list]
[/list]
</div> 
  
</body>
</html>

aiutatemi!!!!

grazie...

**Mich_** · 03-11-2010, 11:39

Quello che devi centrare e` il tuo oggetto #menu.

Per centrare un oggetto questo:
- deve avere dimensioni fisse (il tuo non le ha al momento)
- deve avere margini automatici (tu non li hai messi)
- deve stare dentro un oggetto con misure definite (tu non hai definito la larghezza di body)

Per il primo punto devi dire tu se puoi definire una larghezza al blocco #menu: ciascun elemento ha larghezza fissa, ma devi dire se il n. di elementi e` fisso o puo` variare
Per il secondo e terzo punto, devi aggiungere al tuo CSS:

codice:

html, body {
  width: 100%;
}
#menu {
  width: ...;
  margin: 0 auto;
}

Discussione: centrare un menu css

Strumenti discussione

Ricerca discussione

Visualizza

centrare un menu css

Permessi di invio