UL orizzontale grafico

[Hedo]

Ciao a tutti ho cercato nel web e non ho trovato nessun tutorial che mi speighi come fare elenco putnato UL orizzontale che a video sia grafico

credo questa sia la base xhtml:

<div id="menu">
          <ul>
            <li id="m_home">home
            <li id="m_knowhow">[url="#"]know-how[/url]
            <li id="m_portfolio">[url="#"]portfolio[/url]
            <li id="m_contatti">[url="#"]contatti[/url]
    [/list]
</div> 

ora dovrei nascondere i testi, e sostituire le voci con una immagine; al passaggio del mouse devo gestire l'immagine hover.

Finora ho trovato solo menu dove il testo era visibile.

Grazie dell'aiuto.

[seed_squall_it]

Devi usare una tecnica di image replacement. Vista la "posizione" delle voci del menu (orizzontali), che presumo siano impostate come flottanti, ti consiglierei la Phark Image Replacement. Potresti usare anche la Pixy Cover-Up Span, ma dovendo impostare lo sfondo (su cui avrai il rollover) per un elemento <span>, potresti avere parecchie noie con IE.
Devi impostare un text-indent negativo molto elevato ed espresso in unità em per gli elementi <a> contenuti nella lista, in modo da "spostare" il loro testo fuori dall'area visibile dello schermo. Ti suggerisco di impostarlo a -2000em...è abbastanza elevato. Gli elementi <a> interni ai[*] dovranno poi essere impostati con lo stesso float usato per i[*] (per evitare un problema di IE per Mac e anche per fare in modo che IE per Windows non "sballi"...la Phark infatti funziona su IE per Windows solo con elementi flottanti o posizionati in modo assoluto) e con dimensioni (width e height) tali da contenere come sfondo l'immagine che vuoi usare come sfondo. Ricordati che se imposti un margine per gli elementi <a> sullo stesso lato del float, IE te lo raddoppia! Quindi, SOLO in questo caso, devi aggiungere display: inline alla regola per gli elementi <a>.

Per il rollover, che puoi fare via CSS, devi preparare ogni immagine larga tanto quanto gli elementi <a> e alta il doppio. L'immagine in sostanza è un rettangolo diviso in due rettangoli sovrapposti: quello sopra contiene l'immagine normale, quello sotto, contiene quella per l'hover. Il rollover verrà gestito modificando quindi semplicemente la posizione dell'immagine di background, il che porta anche il vantaggio che tutte le immagini per l'hover sono già precaricate quando la pagina è stata scaricata.

Il codice CSS, basato sull'XHTML che hai postato tu, è il seguente (supponendo ogni link largo 140px e alto 60px):

#menu ul {
padding: 0;
margin: 0;
}

#menu ul li {
list-style: none;
padding: 0;
margin: 0;
float: left;
}

#menu ul li a {
text-indent: -2000em;
background-repeat: no-repeat;
background-position: left top;
width: 140px;
height: 60px;
float: left;
}

#menu ul li a:hover {
background-position: left bottom;
}

#m_home a {
background-image: url(home.gif);
}

#m_knowhow a {
background-image: url(knowhow.gif);
}

#m_portfolio a {
background-image: url(portfolio.gif);
}

#m_contatti a {
background-image: url(contatti.gif);
}

L'unico "inconveniente" di questo sitema si presenta (incredibile ma vero!) con Firefox. Quando clicchi su un link impostato con la Phark Image Replacement, Firefox mostra il "bordo tratteggiato" dell'area attiva del link, comprensivo del testo che hai "spostato" all'esterno della pagina. In pratica, vedi l'area attiva che inizia dal bordo sinistro della pagina, anziché racchiudere esattamente solo l'immagine. Qualcuno ha detto che puoi risolvere semplicemente impostando per ogni link un piccolo JavaScript:

Link

Non ho mai provato e non so quanto sia corretto, considerando anche che JavaScript può essere comunque disabilitato. In alternativa, potresti provare a usare la BIR (Bob Image Replacement) al posto della Phark. Tuttavia, la BIR non funziona su Konqueror e ti obbliga ugualmente ad usare un elemento <span> aggiuntivo dentro gli elementi <a> del menu, proprio come la Pixy Cover-Up Span. Personamente, quando posso uso la Phark...è comoda e l'effetto collaterale non è poi così orrendo...tanto più che spero mettano a posto questo "problema" di Firefox nelle prossime versioni (la 1.2 se non ricordo male, aveva un problema nel rendering degli iframe "simulati" coi CSS...mentre la pagina si caricava, il box che simulava l'iframe veniva spostato in continuazione su e giù. Poi l'hanno sistemato per fortuna).