visibilità immagine di sfondo menu con rollover

[gibbosus]

ho un problema con le immagini di sfondo in questo css perchè si vedono solo nello spazio occupato dal testo invece di essere complete.
in oltre dovrei disporre il menu in orizontale ma non capisco come fare, con i css ci sto facendo pace da poco vi posto il codice, la prima immagine del menu è più grande delle altre e mi fa pensare che debba usare i div.... spero di no dato che gia mi è stato complesso arrivare fin qui


a#logo{
background: url(elements/logo.gif); /*MODIFICA IL PERCORSO DELLA SINGOLA IMMAGINE*/
width: 372px; /*LARGHEZZA DELL' IMMAGINE*/
height: 185px; /*ALTEZZA DELL' IMMAGINE*/
font-family: "Trebuchet MS";text-decoration: none; color: transparent; font-size: 15pt;color: black;text-decoration: none;visibility: hidden}

a#logo:hover{
background: url(elements/logo.gif); /*MODIFICA IL PERCORSO DELL IMMAGINE CHE COMPARE AL PASSAGGIO DEL MOUSE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a.logocurrent{
background: url(elements/logo.gif); /*STESSO PERCORSO DI PRIMA,VISUALIZZA IL PULSANTE DELLA PAGINA CORRENTE*/
width: 186px;
height: 40px;
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}
a#op{
background: url(elements/firstbk.gif); /*MODIFICA IL PERCORSO DELLA SINGOLA IMMAGINE*/
width: 186px; /*LARGHEZZA DELL' IMMAGINE*/
height: 40px; /*ALTEZZA DELL' IMMAGINE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a#op:hover{
background: url(elements/op.gif); /*MODIFICA IL PERCORSO DELL IMMAGINE CHE COMPARE AL PASSAGGIO DEL MOUSE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a.opcurrent{
background: url(elements/op.gif); /*STESSO PERCORSO DI PRIMA,VISUALIZZA IL PULSANTE DELLA PAGINA CORRENTE*/
width: 186px;
height: 40px;
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}
a#in{
background: url(elements/firstbk.gif); /*MODIFICA IL PERCORSO DELLA SINGOLA IMMAGINE*/
width: 186px; /*LARGHEZZA DELL' IMMAGINE*/
height: 40px; /*ALTEZZA DELL' IMMAGINE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a#in:hover{
background: url(elements/in.gif); /*MODIFICA IL PERCORSO DELL IMMAGINE CHE COMPARE AL PASSAGGIO DEL MOUSE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a.incurrent{
background: url(elements/in.gif); /*STESSO PERCORSO DI PRIMA,VISUALIZZA IL PULSANTE DELLA PAGINA CORRENTE*/
width: 186px;
height: 40px;
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}
a#re{
background: url(elements/firstbk.gif); /*MODIFICA IL PERCORSO DELLA SINGOLA IMMAGINE*/
width: 186px; /*LARGHEZZA DELL' IMMAGINE*/
height: 40px; /*ALTEZZA DELL' IMMAGINE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a#re:hover{
background: url(elements/re.gif); /*MODIFICA IL PERCORSO DELL IMMAGINE CHE COMPARE AL PASSAGGIO DEL MOUSE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a.recurrent{
background: url(elements/re.gif); /*STESSO PERCORSO DI PRIMA,VISUALIZZA IL PULSANTE DELLA PAGINA CORRENTE*/
width: 186px;
height: 40px;
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}
a#bi{
background: url(elements/firstbk.gif); /*MODIFICA IL PERCORSO DELLA SINGOLA IMMAGINE*/
width: 186px; /*LARGHEZZA DELL' IMMAGINE*/
height: 40px; /*ALTEZZA DELL' IMMAGINE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a#bi:hover{
background: url(elements/bi.gif); /*MODIFICA IL PERCORSO DELL IMMAGINE CHE COMPARE AL PASSAGGIO DEL MOUSE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a.bicurrent{
background: url(elements/bi.gif); /*STESSO PERCORSO DI PRIMA,VISUALIZZA IL PULSANTE DELLA PAGINA CORRENTE*/
width: 186px;
height: 40px;
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}
a#mo{
background: url(elements/firstbk.gif); /*MODIFICA IL PERCORSO DELLA SINGOLA IMMAGINE*/
width: 186px; /*LARGHEZZA DELL' IMMAGINE*/
height: 40px; /*ALTEZZA DELL' IMMAGINE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a#mo:hover{
background: url(elements/mo.gif); /*MODIFICA IL PERCORSO DELL IMMAGINE CHE COMPARE AL PASSAGGIO DEL MOUSE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a.mocurrent{
background: url(elements/mo.gif); /*STESSO PERCORSO DI PRIMA,VISUALIZZA IL PULSANTE DELLA PAGINA CORRENTE*/
width: 186px;
height: 40px;
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}
a#co{
background: url(elements/firstbk.gif); /*MODIFICA IL PERCORSO DELLA SINGOLA IMMAGINE*/
width: 186px; /*LARGHEZZA DELL' IMMAGINE*/
height: 40px; /*ALTEZZA DELL' IMMAGINE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a#co:hover{
background: url(elements/co.gif); /*MODIFICA IL PERCORSO DELL IMMAGINE CHE COMPARE AL PASSAGGIO DEL MOUSE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a.cocurrent{
background: url(elements/co.gif); /*STESSO PERCORSO DI PRIMA,VISUALIZZA IL PULSANTE DELLA PAGINA CORRENTE*/
width: 186px;
height: 40px;
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}
a#ne{
background: url(elements/firstbk.gif); /*MODIFICA IL PERCORSO DELLA SINGOLA IMMAGINE*/
width: 186px; /*LARGHEZZA DELL' IMMAGINE*/
height: 40px; /*ALTEZZA DELL' IMMAGINE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a#ne:hover{
background: url(elements/ne.gif); /*MODIFICA IL PERCORSO DELL IMMAGINE CHE COMPARE AL PASSAGGIO DEL MOUSE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a.nescurrent{
background: url(elements/ne.gif); /*STESSO PERCORSO DI PRIMA,VISUALIZZA IL PULSANTE DELLA PAGINA CORRENTE*/
width: 186px;
height: 40px;
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}
a#li{
background: url(elements/firstbk.gif); /*MODIFICA IL PERCORSO DELLA SINGOLA IMMAGINE*/
width: 186px; /*LARGHEZZA DELL' IMMAGINE*/
height: 40px; /*ALTEZZA DELL' IMMAGINE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}

a#li:hover{
background: url(elements/li.gif); /*MODIFICA IL PERCORSO DELL IMMAGINE CHE COMPARE AL PASSAGGIO DEL MOUSE*/
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none}

a.licurrent{
background: url(elements/li.gif); /*STESSO PERCORSO DI PRIMA,VISUALIZZA IL PULSANTE DELLA PAGINA CORRENTE*/
width: 186px;
height: 40px;
font-family: "Trebuchet MS";text-decoration: none; color: black; font-size: 15pt;color: black;text-decoration: none;}





</style>



</head>

<body>
<div id="menu">


Home</span></p>


In</p>


Ar</p>

</br>


Bi</p>


Mo</p>


Co</p>


Ne</p>


Li</span></p>
</div>

[Prill]

Per il tuo menu dovresti usare un elenco, comunque il css potrebbe essere semplificato:

#menu a {
	display:block;
	float:left;
	width: 186px;
	height: 40px;
	font-family: "Trebuchet MS";
	font-size: 15pt; /* perché dimensioni in punti e non in pixel? */
	text-decoration: none;
	color: #000;
	background: url(elements/firstbk.gif);
}
#menu a#logo{
	background: url(elements/logo.gif);
	width: 372px;
	height: 185px;
}

a#logo:hover{
	background: url(elements/logo.gif);
}

#menu a.logocurrent{
	background: url(elements/logo.gif);
}


#menu a#op:hover{
	background: url(elements/op.gif);
}

#menu a.opcurrent{
	background: url(elements/op.gif); 
}

#menu a#in:hover{
	background: url(elements/in.gif);
}

#menu a.incurrent{
	background: url(elements/in.gif);
}

#menu a#re:hover{
	background: url(elements/re.gif);
}

#menu a.recurrent{
	background: url(elements/re.gif);
}

#menu a#bi:hover{
	background: url(elements/bi.gif);
}

#menu a.bicurrent{
	background: url(elements/bi.gif);
}

#menu a#mo:hover{
	background: url(elements/mo.gif);
}

#menu a.mocurrent{
	background: url(elements/mo.gif);
}

#menu a#co:hover{
	background: url(elements/co.gif);
}

#menu a.cocurrent{
	background: url(elements/co.gif);
}

#menu a#ne:hover{
	background: url(elements/ne.gif); 
}

#menu a.nescurrent{
	background: url(elements/ne.gif);
}

#menu a#li:hover{
	background: url(elements/li.gif);
}

#menu a.licurrent{
	background: url(elements/li.gif);
}

prova ora a inserire nel tuo div menu i soli link, via quei paragrafi. Per l'uso delle liste ti basta guardare i link utili.

[gibbosus]

Prill grazie per avermi ripulito il codice adesso è molto più chiaro ho anche inserito queste regole
ma non mi funzionano

per non ripetere i background
background-repeat: no-repeat;

ed ho provato ad inserire questo
font: visibility: hidden;
in #menu a#logo{...}
per ottenere un testo trasparente solo in questa voce,

per posizionare le immagini di sfondo più in alto
ho inserito
top: valore;
ma in breve nessuna di queste tre modifiche mi funziona

[Prill]

1.

#menu a {
        ...
	background: url(elements/firstbk.gif) no-repeat;
}

2. Provato con

#menu a#logo span {
        display:none; /* o anche un'opacity settata su zero, ma poi bisogna usare codice apposito per ie */
}

e e il testo in uno span?

3. Per posizionare lo sfondo non devi usare top ma semplicemente indicarne la distanza dal margine sinistro e dall'alto, ad esempio

#menu a#logo{
	background: url(elements/logo.gif) no-repeat 0 -20px;
        ...
}

[gibbosus]

in linea con il codice da te ripulito volevo scrivere una regola di non ripetizione background che agisse solo sulle immagini in hover invece di ripeterla per ogni gif ma le mie prove non funzionano... comunque come l'hai scritto te funziona benissimo.
per span fatto così.
head
#menu a#logo span {
display:none;
}
body


<span>Home</span></p>
ed è risolto.

mi viene un dubbio sul posizionamento dello sfondo inserendo la distanza dal margine sinistro e dall'alto in caso di risoluzione differente dalla mia poi si sfasa tutto?
gia ora se gioco con lo zoom nella pagina gli elementi del menu vanno a riposizionarsi, cosa dovrei andare ad impostare?
....forse risolvo quando inserisco nel div che mi farà da contenitore con dimensioni sugli assi x e y fissate?

[Prill]

No, a risoluzioni diverse lo sfondo non ne risentirà.

Ne risente il menu perché, avendo elementi affiancati con il float, se essi sono inseriti in un div che si adatta alla finestra, andranno a capo quando la larghezza della finestra (e conseguentemente del div) sarà inferiore allo spazio necessario per contenerli sulla stessa riga.
Quindi sì, risolvi se li inserisci in un div per il quale specifichi le dimensioni.

[Prill]

Aggiungo: però se tutti i collegamenti devono essere su una sola riga, arrivi a una larghezza totale, se ho fatto bene i calcoli, superiore a 1500 pixel, il che, per quanto in molti ormai abbiano monitor ad alta risoluzione, costringerà molti utenti a usare la barra di scorrimento orizzontale per vedere tutto, che non è poi il massimo. Forse sarebbe meglio tener conto di risoluzioni più basse e più comuni (non superare i 1260 pixel di larghezza) magari riconsiderando le dimensioni dei link

[gibbosus]

ciao Prill il problema dei 1500 px non ce l'ho mai avuto dato che nel menu sono andato a capo con un
, tra l'altro la dimensione del wrapper è a width: 979px quindi dovrebbe anche andare a capo da solo....
....al momento sto cercando di centrare il sito crossbrowser ma sia usando un margin: 0 auto che con gli altri sistemi che ho trovato in rete non funziona e se ingrandisco e rimpicciolisco il sito se ne "scappa" a sinistra o a destra.
ciao continuo a razzolare in cerca di una crosssolution

grazie di tutto!

[gibbosus]

sto riscontrando alcuni problemi con l'elemento current perchè non mi evidenzia la pagina corrente e poi il rollover su explorer superannoiato non funziona !!! cosa c'è che non va?
riposto il codice del menu in css :

@charset "utf-8";
/* CSS Document */
#menu a {
	display:block;
	float:left;
	width: 190px;
	height: 40px;
	font-family: "Trebuchet MS";
	font-size: 20px; /* */
	text-decoration: none;
	color: #000;
	background: url(elements/firstbk.gif);
	
}
#menu a#logo{
	background: url(elements/firmaMG.gif);
	width: 372px;
	height: 185px;
}

#menu a#logo span {
        display:none; 
}



a#logo:hover{
	background: url(elements/home.gif);
}

#menu a.logocurrent{
	background: url(elements/home.gif);
}




#menu a#alfa:hover{
	background: url(elements/alfa.gif) no-repeat;
}

#menu a.alfacurrent{
	background: url(elements/alfa.gif)no-repeat; 
}




#menu a#beta:hover{
	background: url(elements/beta.gif)no-repeat;
}

#menu a.betacurrent{
	background: url(elements/beta.gif)no-repeat;
}




#menu a#gamma:hover{
	background: url(elements/gamma.gif)no-repeat;
}

#menu a.gammacurrent{
	background: url(elements/gamma.gif)no-repeat;
}




#menu a#delta:hover{
	background: url(elements/delta.gif)no-repeat;
}

#menu a.deltacurrent{
	background: url(elements/delta.gif)no-repeat;
}




#menu a#epsilon:hover{
	background: url(elements/epsilon.gif)no-repeat;
}

#menu a.epsiloncurrent{
	background: url(elements/epsilon.gif)no-repeat;
}




#menu a#digamma:hover{
	background: url(elements/digamma.gif)no-repeat;
}

#menu a.digammacurrent{
	background: url(elements/digamma.gif)no-repeat;
}




#menu a#stigma:hover{
	background: url(elements/stigma.gif)no-repeat; 
}

#menu a.stigmacurrent{
	background: url(elements/stigma.gif)no-repeat;
}




#menu a#zeta:hover{
	background: url(elements/zeta.gif)no-repeat;
}

#menu a.zetacurrent{
	background: url(elements/zeta.gif)no-repeat;
}

[Prill]

prova staccando il no-repeat dall'istruzione precedente (hai scritto tutto attaccato), riscrivi anche
a#logo:hover
come
#menu a#logo:hover
(mi era sfuggito precedentemente, dato che stiamo usando un selettore discendente per lo stato normale del link, usiamolo anche su hover)