Centrare pagina

knif3

Centrare pagina

Salve a tutti sto creando un menu ma non riesco a centrarlo. Come potete vedere dal link "exgaming.net/menu" il menu parte da sinistra. Dovrei centrarlo nella pagina, ma non riesco. Potreste aiutarmi ?
Saluti

tigrone

Prova a metterlo in un div a cui dai style="margin: 0 auto;"

marcof 0

Mi associo a tigrone !!! Tuttavia alle volte mi è capitato, non so per quale motivo, che quel tipo di codice nel CSS non mi restituisse il div centrato. In questi casi ho risolto scrivendo in questo modo:

div#id_del_div { margin: auto; }

Il risultato è uguale in quanto la distanza "automatica" dall'alto e dal basso del div è comunque 0px !!!

Spero di esserti stato utile !!!

knif3

Questo è il mio codice html: [HTML]
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body><ul id="menu">
<li><a href="#" class="logo">Logo</a></li>
<li><a href="#" class="home">Home<span></span></a></li>
<li><a href="#" class="forum">Forum<span></span></a></li>
<li><a class="spacer">Spacer</a></li>
<li><a href="#" class="upload">Upload<span></span></a></li>
</ul>
</body>
</html>
[/HTML]

e questo è il css: [HTML]#menu {
list-style: none;
padding: -10px;
margin: -8px;
height: 170px;
background: url(menu/menuback.jpg) repeat-x;
position: center;
}
#menu span {
display: none;
position: absolute;
}
a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
a:hover {
background-position: left bottom;
}
a:hover span{
display: block;
}
.logo {
width: 161px;
height: 164px;
background: url(menu/logo.png) no-repeat;
left: 20px;
top: 0px;
position: center;
}
.home {
width: 94px;
height: 170px;
background: url(menu/home.jpg) no-repeat;
left: 200px;
top: 0px;
position: center;
}
.home span {
width: 94px;
height: 170px;
background: url(menu/homeon.jpg) no-repeat;
left: 0px;
top: 0px;
position: center;
}
.forum {
width: 94px;
height: 170px;
background: url(menu/forum.jpg) no-repeat;
left: 294px;
top: 0px;
position: center;
}
.forum span {
width: 94px;
height: 170px;
background: url(menu/forumon.jpg) no-repeat;
left: 0px;
top: 0px;
position: center;
}
.spacer {
width: 131px;
height: 170px;
background: url(menu/spacer.png) no-repeat;
left: 388px;
top: 0px;
position: center;
}
.upload {
width: 94px;
height: 170px;
background: url(menu/upload.jpg) no-repeat;
left: 519px;
top: 0px;
position: center;
}
.upload span {
width: 94px;
height: 170px;
background: url(menu/uploadon.jpg) no-repeat;
left: 0px;
top: 0px;
position: center;
}
{
text-align: center;
position: center;
}
[/HTML]

Ho provato a seguire le vostre risposte, ma non sono riuscito a risolvere. Potete dirmi gentilmente dove devo posizionare il codice ?

marcof 0

Nell'HTML inserisci la lista in un div:

Dopodichè nel CSS scrivi:

div#nome_del_div { margin: auto; }

Vedi come va !!!

knif3

Non va

tigrone

@Knif3 said:

Non va

Qua: www.exgaming.net/menu/ non c'è nessun div!

marcof 0

Allora fai così:

Fammi sapere !!

tigrone

@MarcoF. said:

Allora fai così:

Non funzionerebbe... troppo incasinato quel menu a livello di margini, background ecc...

marcof 0

beh non so !!! se non riesce con il div...è la prima cosa che mi è venuta in mente !!! tentar non nuoce !!!

tigrone

@MarcoF. said:

beh non so !!! se non riesce con il div...è la prima cosa che mi è venuta in mente !!! tentar non nuoce !!!

Prova con ispezione elemento e te ne renderai conto.