Problema con allineamento dei tasti in un menu

[Sechi Paolo]

scusate ma sono 3 giorni che sto cercando di trovare una soluzione al mio problema invano...

Devo fare il solito menu (grafico) dove, quando l'utente clikka sul tasto questo cambia di colore.
L'immagine che devo usare come menu è questa:



nella pagina il codice è questo:

        <div class="contenitore">aaaa
            <div id="nav" align="center">
                    <ul>
                        <li id="home_page">[url="index.php?lang=$lang&sez=home_page"]home pahe[/url]
                        <li id="imbarcazione">[url="index.php?lang=$lang&sez=imbarcazione"]l imbarcazione[/url]
                        <li id="luoghi">[url="index.php?lang=$lang&sez=luoghi"]i luoghi[/url]
                        <li id="foto">[url="index.php?lang=$lang&sez=foto"]immagini[/url]
                        <li id="video">[url="index.php?lang=$lang&sez=video"]video[/url]
                        <li id="link">[url="index.php?lang=$lang&sez=link"]link[/url]
                        <li id="contattaci">[url="index.php?lang=$lang&sez=contattaci"]contattaci[/url]
                    [/list]
            </div>
        </div> 

e il CSS è questo:

.contenitore {
    width:850;
    background-color: black;
    text-align:center;
}

div#nav ul{ 
        width: 718px;
        height: 90px;
        overflow: hidden;
            list-style-type: none;
        padding: 0;
        text-align:center;
        background:url(menu.gif) no-repeat}

div#nav li{position:absolute;}
div#nav a{display: block;
        text-indent: -9000px;text-decoration: none;
            padding: 70px 0 0 0;
            background-image: url(menu.gif)}

li#home_page {width: 100px;left: 300px;top: 3;}
li#home_page a{background-position: 0px 1px}

li#imbarcazione{width: 98px;left:200px;top: 3;}
li#imbarcazione a{background-position: 5px 12px;}

(poi il codice continua con la stessa copia di righe fino al completar eil numero totale di tasti) 

Il mio problema è sempre il solito.

Allineo i tasti nello schermo, ma se nel mio browser apro i preferiti o se un utente ha una risoluzione 800x600 i tasti vengono visualizzati "spostati" rispetto alla mia intenzione iniziale!!!!

Come devo fare????? AIUTOOOOOOOOOO!!!!!!!!

[Sechi Paolo]

Sono riuscito a risolvere il problema con FOREFOX!!!!!


Ma ecco che I.E. mi continua a dare problemi.
Comunque, con I.E. visualizzo tutto il menu sostato del 50% al centro, così:



Mentre con Firefox visualizzo il menu allineato correttamente, così:



Cosa devo fare? Modificando il codice ho notato che posso spostare il menu verso sinistra e ottengo una corretta visualizzazione per I.E., ma in Firefox il tutto si sosta a destra!!! nsomma sembra che debba decidere se far visualizzare il mio sito o solo a quelli che hanno I.E. oppure solo a quelli che hanno FIREFOX

HELP ME!

[thomas_anderson]

ciao!
fondamentalmente, Paolo, il tuo è un problema di dimensioni. da quello che vedo, tu hai creato un id per ogni voce di menu. in teoria questo è un uso eccessivo del codice. poi: IE ha dei problemi con quel tipo di posizionamento. ancora : il codice è
molto pasticciato. il mio consiglio è quello di considerare i seguenti punti:

1. hai un #nav di dimensioni complessive di 850px (a proposito, tu px non ce l'hai scritto), 50px fuori dalle dimensioni di 800x600. riduci il contenitore a 800px.

2. se le esigenze di design te lo permettono, crea dei bottoni rettangolari con gli angoli smussati ed allineali normalmente. l'ideale per questo tipo di cose è usare questo codice:

#nav {
  width: 800px;
  margin: 0;
  padding: 0;
  background: xxx;
  color: #xxx;
  list-style: none;
}
#nav li {
  margin: 0 0.5em; /* varia la distanza a piacere */
  padding: 0;
  display: inline; /* IE fix */
  float: left;
}
#nav a:link, #nav a:visited {
  display: block;
  width: xx;
  height: xx;
  margin: xx;
  padding: xx;
  text-align: center;
  background: url(image.gif) no-repeat top left;
  /* ... ecc ... */
}
#nav a:hover {
  background: url(image2.gif) no-repeat top left;
}

questo solo per dare un abbozzo. poi fai tu.

[Sechi Paolo]

Ciao.
Nel mentre avevo modificato il codice come segue

div#nav ul{ 
        width: 718px;
        height: 90px;
        background:url(menu1.gif) no-repeat;
        }


div#nav li {
    position: absolute;
    z-index: auto;
    left: 70px;
    top:-12px}

div#nav a{display: block;
        text-indent: -9000px;text-decoration: none;
            padding: 65px 0 0 0;
        text-align:center;
            background-image: url(menu.gif)}

li#home_page {width:101px;margin:15px 0 0 -2px;}
li#home_page a {background-position: 0px -1px;}
li#home_page a:hover {background-position: -1px -99px}
body#home_page li#home_page a {background-position: -1px 86px}

li#imbarcazione {width:105px;margin:12px 0 0 100px;}
li#imbarcazione a {background-position: -100px 2px;}
li#imbarcazione a:hover {background-position: -103px -99px}
body#imbarcazione li#imbarcazione a {background-position: -103px 89px}

li#luoghi {width:105px;margin:15px 0 0 202px;}
li#luoghi a {background-position: -201px -1px;}
li#luoghi a:hover {background-position: -204px -101px;}
body#luoghi li#luoghi a {background-position: -204px 86px;}

li#foto {width:105px;margin:32px 0 0 305px;}
li#foto a {background-position: -305px -19px;}
li#foto a:hover {background-position: -307px -118px;}
body#foto li#foto a {background-position: -308px 68px;}

li#video {width:105px;margin:51px 0 0 405px;}
li#video a{background-position: -405px -39px;}
li#video a:hover {background-position: -409px -138px}
body#video li#video a {background-position: -408px 50px}

li#link {width:105px;margin:59px 0 0 510px;}
li#link a {background-position: -508px -45px}
li#link a:hover {background-position: -511px -144px}
body#link li#link a {background-position: -511px 42px}

li#contattaci {width:105px;margin:49px 0 0 615px;}
li#contattaci a {background-position: -610px -35px}
li#contattaci a:hover {background-position: -615px -135px}
body#contattaci li#contattaci a {background-position: -614px 52px} 

Adesso sembra funzionare.

Purtroppo non sono per nulla pratico di CSS quindi posso anche aver scritto boiate!


Purtroppo su Firefox visualizzo i pallini tipidi degli elenchi. Come faccio ad eliminarli?

[thomas_anderson]

list-style: none dato a <ul> o[*].

[Sechi Paolo]

Ciao, ho risolto tutto.

Ti ringrazio per l'aiuto!