Lista in linea: bellina davvero, ma per centrarla?

[goat]

Allora, è da ieri sera che provo a far 'sta cosa: di seguito il codice CSS che ho utilizzato:

#sottomenu {
    position:relative;
    width:970px;
    height:26px;
    background:url(images/sfondo-sottomenu.jpg) repeat-x;
    float:left;
    }
#sottomenu ul {
    position:relative;
    width:970px;
    list-style-type:none;
    padding:0px;
    padding-top:4px;
    margin:0px;
    display:inline;
    float:left;
    }
#sottomenu li {
    position:relative;
    width:auto;
    padding:0px;
    margin:0px;
    display:inline;
    float:left;
    } 

Ed ora un meraviglioso ausilio visivo:



Come faccio a centrare il menù rispetto al <div> sottomenu?
Vorrei evitare di usare altri <div>, e text-align non funge.
Grazie,
goat

[fcaldera]

tra i link utili c'è un link ai "centered float"

[goat]

Trovato.
Adesso faccio un po' di test e vedo se funziona.
Grassie,
goat

[goat]

Allora, ho trovato un bel esempio ed ho cercato di applicarlo al mio caso.
L'ho testato su FF, IE, Safari, Opera: indovinate un po' su quale di questi non mi si posiziona al centro del <div> "container"? Esatto, sempre lui a rompere le gonadi.
Posto il codice che ho usato, e intanto continuo a fare test.

Questo il CSS che ho usato:

#menu2 {
  display:table;
  padding:0px; 
  margin:0px auto; 
  list-style-type:none;
  white-space:nowrap;
  }
#menu2 li {
  display:table-cell;
  }
* html #menu2 li {
  float:left;
  }
#menu2 a {
  width:auto;
  display:block;
  padding:4px 6px;
  text-decoration:none;
  }
* html #menu2 a {
  float:left;
  }
.container {
    width:970px;
    clear:both;
    text-decoration:none;
    background:url(../images/sfondo-sottomenu.jpg) repeat-x;
    }    
* html .container {
    display:inline-block;
    } 

E questo l'HTML:

    <div class="container">
        <ul id="menu2">
            [*][url="#sp1"]Storia[/url]
            [*]<span class="text_nero">&bull;</span>
            [*][url="#sp2"]Il museo in breve[/url]
            [*]<span class="text_nero">&bull;</span>
            [*][url="#sp3"]Gli spazi[/url]
            [*]<span class="text_nero">&bull;</span>
            [*][url="#sp4"]Le Collezioni[/url]
            [*]<span class="text_nero">&bull;</span>
            [*][url="#sp5"]Sezione Naturalistica[/url]
            [*]<span class="text_nero">&bull;</span>
            [*]<a href="#sp6>Sezione Archeologica</a>
            [*]<span class="text_nero">&bull;</span>
            [*][url="#sp7"]Il personale[/url]
        [/list]
    </div> 

[fcaldera]

Originariamente inviato da goat
Allora, ho trovato un bel esempio ed ho cercato di applicarlo al mio caso.
L'ho testato su FF, IE, Safari, Opera: indovinate un po' su quale di questi non mi si posiziona al centro del <div> "container"? Esatto, sempre lui a rompere le gonadi.
Posto il codice che ho usato, e intanto continuo a fare test.

"Sempre lui" non credo sia un indicazione utile... :rollo:

Parli di Explorer? Quale versione? Se ti riferisci alla versione 7 non copiare l'esempio della pagina: è errato ( ho già segnalato la cosa a Stu qualche giorno fa).

Guarda piuttosto il codice sorgente è copialo da lì.

[goat]

Risolto anche per IE.
Intanto vi sposto il codice HTML:

    <div id="content-sottomenu">
        <del class="container">
            <ul id="menu2">
                [*][url="#sp1"]Storia[/url]
                [*]<span class="text_nero">&bull;</span>
                [*][url="#sp2"]Il museo in breve[/url]
                [*]<span class="text_nero">&bull;</span>
                [*][url="#sp3"]Gli spazi[/url]
                [*]<span class="text_nero">&bull;</span>
                [*][url="#sp4"]Le Collezioni[/url]
                [*]<span class="text_nero">&bull;</span>
                [*][url="#sp5"]Sezione Naturalistica[/url]
                [*]<span class="text_nero">&bull;</span>
                [*][url="#sp6"]Sezione Archeologica[/url]
                [*]<span class="text_nero">&bull;</span>
                [*][url="#sp7"]Il personale[/url]
            [/list]
        </del>
    </div> 

Ho dato al <div> content-sottomenu text-align:center; e anche su IE è andato a posto.
Però mi dicono che l'uso che faccio di <del> è semanticamente scorretto. Voi che dite?

[fcaldera]

usa <ins> piuttosto che <del>

[ronnin]

scrivo qui,...
allora io ho un problema simile..
solo che non riesco a centrare la lista VERTICALMENTE!!

IE6 e IE7 riesco bene o male a sistemarli con un margin (dato che la lista si appiccica al bordo superiore del div)

invece con FIREFOX e' un casino... non capisco perche' la lista mi va fori dal div dalla parte sotto!

help!!!