[CSS/HTML] Span: a:hover e a con display...

Ciao a tutti...sto impazzendo con il css!
Ho fatto un menu con 5 immagini (tutte separate da un <br />) ...ora ho questo problema: io quando non passo con il mouse (a) non si vede il testo (<span>) invece quando ci passo (a:hover) deve comparire un testo...ma questo testo va un pò più sopra oppure troppo lontano...fa come vuole lui!!
Ecco il codice:
html ---> (sotto)

<a href="#"><img src="images/menu_home.png" alt="" /> <span>Home</span></a><br />
<a href="#"><img src="images/menu_portfolio.png" alt="" /> <span>Portfolio</span></a><br />
<a href="#"><img src="images/menu_artfolio.png" alt="" /> <span>Artfolio</span></a><br />
<a href="#"><img src="images/menu_about.png" alt="" /> <span>About</span></a><br />
<a href="#"><img src="images/menu_credits.png" alt="" /> <span>Credits</span></a> 

css --> (sotto)

#menu {
text-align: left; float: right; width: 100px;
margin-right: 10px; margin-top: 10px;
}

#menu img { float: right; text-align: left; clear: both; }
#menu a span { display: none; }
#menu a:hover span { display: block; color: #ffffff; font-weight: bold; margin-right: 4px; } 

Eppure apparentemente non si vedono errori..ma invece si sono!
Grazie 1000...ciao Davide!

PS. ho fatto solo il menù per ora...non vi sono altri div con float c'è solo quello! ;D! Grazie! ;)

non è che hai un link dove si puo vedere cosa accade?

[dementialsite]

Il codice che hai scritto è giusto, infatti fa quello che dovrebbe fare (farti comparire il testo quando passi sopra alle immagini).

Quello che manca è un sistema di posizionamento degli SPAN: dovresti inserire qualche regola tipo position:relative; top:...; left:... (fai un po' di tentativi inserendo dei valori dentro a top e left, anche negativi).

Stammi bene...

[nukta]

Credo che la soluzione più adatta per un menu sia usare una lista non ordinata "ul", dare un background agli elementi "li" della lista anziche usare le immagini (associando con una classe ad ogni specifico "li" un width, height e background). All'interno di ogni "li" andrai poi a inserire gli "span".

tu vuoi che quando ci passi sopra con il mouse il testo si veda o no?

@demetialsite: Ho fatto come hai detto (position) ma non cambia niente! ....
@nukta: No..preferisco usare span!
@arazz: Il problema è la posizione del testo..perchè funziona come voglio (a: not display | a:hover: display)

Ecco come si vede per rendervi un idea...invece si deve vedere accanto all'icona che vi ho segnato con la freccia (--->) ...se ci vado con a:hover! Ma invece si vede sopra...non accanto!! XD | Foto: http://i44.tinypic.com/oiybzc.png

[acsocmel]

a parte che nukta ha perfettamente ragione sia dal punto di vista semantico che di risultato (diventa più facile direi naturale il risultato che hai in mente),
puoi semplicemente dare al tag a un display block (e quindi eliminare quei <br> così antichi :)
magari dovrai dare ad <a> un width: 100px

Niente da fare! Ecco cosa ho aggiunto:

#menu a { display: block; width: 100px; } 

Ciauu! ^^

Edit: Ora funziona...ma male perchè si vedono tutti accanto all'icona della home e dopo quando vado sull'icona home si vede sopra il testo "home" ...ciauu! ^^ e Grazie! ;)

Posta una pagina di prova