Menu orizzontale con css sprite

[HeMp4EvEr]

Buongiorno,
vi scrivo in quanto ho un problema con i css che nn riesco a risolvere.
Mi spiego meglio: devo realizzare un menù orizzontale di 970x40 composto da 8 pulsanti (ne ho allegato uno, gli altri sono simili) + un'ultima parte della barra x ora senza nulla.

Il codice Css da me scritto è il seguente:

#navigation {
 width: 970px;
 height:40px;
 background: #eaef55;
 text-align:left;
}

#navigation_menu {
 width: 640px; 
 height: 40px; 
 margin: 0; 
 padding: 0;  
 float: left;
}


#menu_news 	        {float:left; width:80px; height:40px; background:url(img/menu_button/news.png) 0 0;}
#menu_news a		{float:left; width:80px; height:40px; background:url(img/menu_button/news.png) 0 -80;}
#menu_news a:hover	{background:url(images/menu_button/news.png) 0 -40px;}

#menu_team		{float:left; width:80px; height:40px; background:url(img/menu_button/teams.png) 0 -80;}
#menu_team a		{float:left; width:80px; height:40px; background:url(img/menu_button/teams.png) 0 0;}
#menu_team a:hover	{background:url(images/menu_button/teams.png) 0 -40px;}

#menu_cw		{float:left; width:80px; height:40px; background:url(img/menu_button/cw.png) 0 -80;}
#menu_cw a		{float:left; width:80px; height:40px; background:url(img/menu_button/cw.png) 0 0;}
#menu_cw a:hover	{background:url(images/menu_button/cw.png) 0 -40px;}

#menu_forum		{float:left; width:80px; height:40px; background:url(img/menu_button/forum.png) 0 -80;}
#menu_forum a		{float:left; width:80px; height:40px; background:url(img/menu_button/forum.png) 0 0;}
#menu_forum a:hover	{background:url(images/menu_button/forum.png) 0 -40px;}

#menu_download		{float:left; width:80px; height:40px; background:url(img/menu_button/download.png) 0 -80;}
#menu_download a	{float:left; width:80px; height:40px; background:url(img/menu_button/download.png) 0 0;}
#menu_download a:hover	{background:url(images/menu_button/download.png) 0 -40px;}

#menu_sponsors		{float:left; width:80px; height:40px; background:url(img/menu_button/sponsors.png) 0 -80;}
#menu_sponsors a	{float:left; width:80px; height:40px; background:url(img/menu_button/sponsors.png) 0 0;}
#menu_sponsors a:hover	{background:url(images/menu_button/sponsors.png) 0 -40px;}

#menu_aboutus		{float:left; width:80px; height:40px; background:url(img/menu_button/aboutus.png) 0 -80;}
#menu_aboutus a		{float:left; width:80px; height:40px; background:url(img/menu_button/aboutus.png) 0 0;}
#menu_aboutus a:hover	{background:url(images/menu_button/aboutus.png) 0 -40px;}

#menu_contact		{float:left; width:80px; height:40px; background:url(img/menu_button/contact.png) 0 -80;}
#menu_contact a	        {float:left; width:80px; height:40px; background:url(img/menu_button/contact.png) 0 0;}
#menu_contact a:hover	{background:url(images/menu_button/contact.png) 0 -40px;}

#navigation_s {float: left; width: 330px; margin: 0; padding: 0; height: 43px; background: #eae427;}

Mentre il codice Html:

<div id="navigation">
 <div id="navigation_menu">
  <div id="menu_news"></div>
  <div id="menu_team"></div>
  <div id="menu_cw"></div>
  <div id="menu_forum"></div>
  <div id="menu_download"></div>
  <div id="menu_sponsors"></div>
  <div id="menu_aboutus"></div>
  <div id="menu_contact"></div>
 </div>
 <div id="navigation_s"></div>
</div>

I 3 stati del pusante sono normale (1° dal basso), hover (2° dal basso) e active (3° dal basso), dove ho sbagliato???

[HeMp4EvEr]

sorry x il doppio thread

[Mich_]

Non so se e` questo l'erorre, ma ci sono nomi di id duplicati, mentre gli id devono essere unici all'interno di un documento.

Se ti servono nomi da poter dpuplicare, devi usare le classi.

Inoltre se vuoi visualizzare in tutti i browser devi evitare di inserire blocchi vuoti: i brwoser possono ignorare dei blocchi che non contengono nulla: se ti serve un blocco vuoto, mettici dentro almeno uno spazio o un  

E non vedo la formattazione degli stati :active (ma forse non la hai acclusa nel forum, ma c'e` nel tuo codice)

[HeMp4EvEr]

Per gli id duplicati ho copiato 2 volte il codice, corretto

Il blocco vuoto devo completarlo con un blocco di ricerca, nn sarà realmente vuoto.
La formattazione dell'active nn l'ho messa, per questo tipo di bottone devo formattare l'active in un modo particolare???

[Mich_]

Non e` che spieghi cosa/come non funziona.
Io ho visto alcuni errori e li ho segnalati.

Poi io realizzerei il codice CSS un po' diverso.

Anzitutto un menu si deve realizzare tramite una lista: in tutti gli altri casi avrai problemi di accessibilta` e con i motori di ricerca. E poi ti mancano i link: senza quelli e` ovvio che la cosa non puo` funzionare.

<div id="navigation">
  <ul>
    <li id="menu_news"><span>News</span>
    <li id="menu_team"><span>Team</span>
    <li id="menu_cw"><span>CW</span>
    <li id="menu_forum"><span>Forum</span>
    <li id="menu_download"><span>Download</span>
    <li id="menu_sponsors"><span>Sponsors</span>
    <li id="menu_aboutus"><a href="#" title="vai a ..."><span>About Us<</span>/a>
    <li id="menu_contact"><span>Contacts</span>[/list]
  <div id="navigation_s">&amp;nbsp;</div>
</div>

A questo punto il codce CSS potrebbe diventare:

#navigation {
  width: 970px;
  height:40px;
  background: #eaef55;
  text-align:left;
}
#navigation ul {
  list-type: none;
  width: 640px; 
  height: 40px; 
  margin: 0; 
  padding: 0;  
  float: left;
}
#navigation li {
  list-type: none;
  float: left;
  width:80px;
  height:40px; 
}
#navigation a {
  width: 100%;
  height: 100%;
  display: block;
  background-position: 0 0;   /* posizione da verificare */
}
#navigation a span {
  margin-left: -1000px;         /* nasconde la scritta quando viene interpretato il CSS */
}
#navigation a:hover {
  background-position: 0 -40px;   /* posizione da verificare */
}
#navigation a:active {
  background-position: 0 -80px;   /* posizione da verificare */
}

#menu_news {background:url(img/menu_button/news.png); }
#menu_team {background:url(img/menu_button/teams.png); }
...

[HeMp4EvEr]

Grazie mich e sorry se nn ti ho dato tt le info, il problema da me riscontrato è che non vedevo nel browser l'immagine di nessun bottone, veniva visualizzata solo la barra navigation in giallo (che è il colore che gli ho dato x provare).

scusa per la mia ignoranza, senza link il pulsante non funziona se lo provo semplicemente aprendo il file .html con un browser?

Nel css hai eliminato il div#navigation_menu, è inutile tenerlo?

Le coordinate per dare gli stati al bottone vengono prese dall'angolo in alto a scendere o dall'angolo in basso a salire con numeri negativi? sorry ma 'sta cosa ancora nn l'ho capita

Dopo questo giuro che ti faccio una statua x l'aiuto che mi stai dando

[Mich_]

scusa per la mia ignoranza, senza link il pulsante non funziona se lo provo semplicemente aprendo il file .html con un browser?

Lo sfondo lo hai dato all'oggetto <a>. Se manca tale oggetto lo sfondo non viene visualizzato.

Nel css hai eliminato il div#navigation_menu, è inutile tenerlo?

Ho usato elementi piu` corretti. Lo ho sostituito con l'<ul>. L'attributo id non e` necessario, dato che posso indirizzare quell'oggetto con il selettore #navigation ul. E` una questione di gusto personale 9e in qualche caso di praticita`)

Le coordinate per dare gli stati al bottone vengono prese dall'angolo in alto a scendere o dall'angolo in basso a salire con numeri negativi? sorry ma 'sta cosa ancora nn l'ho capita

si parte quasi sempre dall'angolo in alto a sinistra; ma se usi i valori 50% si parte dal centro e se usi 100% o bottom/right si parte dall'angolo in basso a destra.
Sembra complesso, ma alla fine e` molto logico.
L'unica cosa "strana" e` che se usi tutto valori descrittivi, l'ordine e` Y X, mentre se almeno uno dei valori e` numerico (o %), l'ordine e` X Y.

Vedi qualsiasi reference di CSS, ad esempio http://w3schools.com/css/pr_background-position.asp

[HeMp4EvEr]

Ho provato ma mi esce una cosa strana: dei punti bianchi ed oltretutto sfalsati rispetto al box principale della pagina: perchè?

[Mich_]

Originariamente inviato da HeMp4EvEr
Ho provato ma mi esce una cosa strana: dei punti bianchi ed oltretutto sfalsati rispetto al box principale della pagina: perchè?

Con quale codice (HTML+CSS)? Con quale DTD? Con quale browser?

Meglio se posti un link (eventualmente provvisorio), in modo da verificare esattamente.

[fcaldera]

Originariamente inviato da HeMp4EvEr
Ho provato ma mi esce una cosa strana: dei punti bianchi ed oltretutto sfalsati rispetto al box principale della pagina: perchè?

#navigation ul {
list-style-type: none;
}