Centrare orizzontalmente lista

[drako89]

Ciao,
so che ci sono mille post riguardanti lo stesso argomento, ma ho provato in numerosi modi, tra cui http://css.html.it/articoli/leggi/38...mpre-centrato/ questo, presente proprio sul sito di html.it e non sono tuttavia riuscito ad ottenere quello che voglio:
Ho un menu orizzontale, fatta da una lista, e devo averlo al centro della pagina!!!
Premetto che mi è possibile usare i css3 a discapito della compatibilità con i browsers più vecchi, ma non riesco cmq a risolvere.

<footer id="menuBar">
    <nav>
        <ul>[*]<a href="#">[img]img/menu/group.png[/img]
Friends</a>[*]<a href="#">[img]img/menu/flag.png[/img]
Events</a>[*]<a href="#">[img]img/menu/group.png[/img]
iScream</a>[*]<a href="#">[img]img/menu/envelope.png[/img]
MailBox</a>[*]<a href="#">[img]img/menu/gear.png[/img]
Settings</a>[/list]
    </nav>
</footer>

questo è il css che ho provato a mettere:

#menuBar ul{
    list-style: none; /* nessun elemento come marcatore */
    text-align: center;
    margin: 0;
    padding: 0;
}
#menuBar li{
    float: left;
    font-size: smaller;
    display: inline;
    padding: 0 4px 0 4px;
    margin-left: 0;
}
#menuBar li a {
  color: white;
  display: inline-block;
  font-weight: bold;
  text-decoration: none;
}

quindi, come spiegato in quella guida:

Ricapitolando, per ottenere un menu di navigazione orizzontale centrato anche senza impostare la larghezza dovremo:

assegnare text-align:center all'elemento ul;
usare display:inline sugli elementi li;
definire display:inline-block per i link (a) del menu.

Qualcuno ne sa qualcosa?
Grazie,
Luca

[Web Designer M]

Ciao,
non sono sicurissimo di cosa stai chiedendo di preciso però da quello che leggo il tuo obiettivo è centrare #menuBar all'interno della pagina quindi:

sempre se ho capito bene ti basterebbe dare a #menubar una larghezza e margin 0 auto in questo modo:

esempio:

#menuBar {
width: 970px;
margin: 0 auto;
}

... non so se è quello che in realtà chiedi, quindi se ho malinterpretato la tua richiesta mi scuso in anticipo.


Ciao

[drako89]

ciao,
innanzitutto ti ringrazio per la risposta!!!

sì praticamente quello che voglio fare è quello, il fatto è che nn so la grandezza della barra:
la barra deve essere a tutto schermo, il problema è che si tratta di una pagina per dispositivi mobili, quindi nn so quale sarà la grandezza dello schermo!!!

Tradotto: nn posso dargli una grandezza fissa, ho provato dando width 100% e margin 0 auto, ma non funziona

[Web Designer M]

Ciao,
cia potrei essere riduttivo e dirti di usare larghezze percentuali ma so già che se devi portare un sito ad essere visto su dispositivi mobile a te sconsciuti troverai anche altri problemi.
la cosa è di molto più complicata a questo punto, e probabilmente dovrai aprire quantomeno una nuova duiscussione perchè ti stai addentrando nel responsive design (design adattivo per differenti dispositivi). E' una faccenda tutt'altro che facile, ma non impossibile. Ho cercato qui su html.it e ho trovato questa guida, che può sicuramente aiutarti, prima di fare qualsiasi altra cosa dagli un'occhiata per farti un'idea:

http://css.html.it/guide/leggi/225/r...sing-la-guida/

Fai attenzione perchè probabimente oltre che a larghezze di barre dovrai prestare attenzione a caratteri che probabilmente andrebbero settati in em e agli sfondi che se non sono uniformi possono creare problemi di visualizzazione su molti dispositivi.

A presto

[drako89]

alla fine ho optato per dare larghezza percentuale ai[*]
lo so che è poco professionale, ma per ciò che serve a me, almeno evito di scervellarmi