Menu con i CSS... Help...

[Sgrebs]

Ciao,
poichè ho la necessità di alleggerire le pagine di un sito, sto provando a realizzare un semplice menu "falsamente dinamico" con i CSS.
Ogni link è costituito da un simbolino grafico gif, uno spazio ed il nome del collegamento (es.: # Home page).
La classe che uso è questa:
a.menu:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000040;
text-decoration: none;
text-align: left;
text-indent: 0pt;
vertical-align: middle;
font-weight: bold;
}

La stessa classe è usata per lo stato "visited".

Per lo stato "hover" uso questa:
a.menu:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FF9900;
text-decoration: none;
text-align: left;
text-indent: 10pt;
}

In pratica, al passaggio del mouse sul link cambia solo la posizione dello stesso, che si sposta tutto di altri 5 pixel rispetto allo stato di riposo, ed il colore del collegamento.

PROBLEMA:
Con explorer funziona alla grande.
Con Netscape non funziona, anzi, anche nello stato del link a riposo non viene riconosciuto text-indent, col risultato che il menu risulta "attaccato" al bordo sinistro della cella in cui il menu è posizionato.

C'è un paziente CSS master che può darmi una mano?

A titolo esplicativo indico il link alla pagina di prova, che invito a visitare con i due browser, proprio per testare la differenza:
http://www.cdvnoto.it/provamenu.htm

Grazie.

[Sgrebs]

Maledetta diversità dei browser...

Aggiorno le classi CSS che sto usando:
a.menu:link, a.menu:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000040;
text-decoration: none;
text-align: left;
text-indent: 5pt;
font-weight: bold;
}

a.menu:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FF9900;
text-decoration: none;
text-align: left;
text-indent: 10pt;
font-weight: bold;
}

Ho scoperto che specificando la classe visited assieme a quella Link, quando il link è stato già visitato, comunque esso si comporta come se non fosse stato visitato. Voi direte, ma che la specifichi a fare allora?
1) se non specifico alcuna classe visited, il collegamento, dopo che è stato visitato, compare come un altro stato visited (quello classico di default), completamente diverso. Insomma, DEVE ESSERE DEFINITO PER FORZA;
2) se specifico lo stato visited per conto suo, quando il collegamento è stato visitato, il link funziona come deve funzionare, ma, ovviamente, non cambia più al passaggio del mouse.

Resta il problema del MALEDETTO NETSCAPE!!!

Come facciooooooooooooo???????? Sigh sigh.

[Sgrebs]

Ho risolto a modo mio...

Nell'immagine gif ho aggiunto uno spazio vuoto a sinistra, cosi la distanza dal bordo della tabella è presente anche con NETSCAPE.
Ho eliminato la distanza dal bordo nella classe del CSS (altrimenti con EXPLORER si avrebbe uno distanza dal bordo della tabella doppia (quella dell'immagine + quella definita con il foglio di stile)).
Con NETSCAPE lo spostamento del link non avviene , con EXPLORER si :tongue:.
Alla fine, mi rendo conto che non mi interessa più di tanto :gren: .
In questo caso posso fregarmene degli utenti NETSCAPE :sgrat:, poichè possono visualizzare ugualmente il link, anche senza spostamento dello stesso .
STI CAVOLI!!!

Oggi ho praticamente posto il problema e me lo sono risolto da solo.

Mah!

Ciao.

[xtc78]

Ciao,
ho visto il tuo menu ... mi chiedo, anzi ti chiedo, la soluzione a un problema che da tempo mi affligee:

Sito in html senza frame con menu css. Come faccio a mantenere i link attivi nella pagina che si apre ... anche nel tuo questo comportamento non c'è.

Mi spiego meglio:
Se clicco su una voce di menu, si apre la pagina corrispondente ma il link che fa riferimento alla stesso non è attivo ma uguale a tutti gli altri.

Con dreamweaver l'unica soluzione sembra essere quella di usare i frame in modo che la pagina del menu non venga ricaricata e possa quindi mantenere il link attivo...

grazie

[Sgrebs]

Ciao.

Premesso che sono un novellino, ti dico come mi comporterei io.

Allora, se per link attivi intendi le pagine già visitate, credo che questo si risolva con i CSS. Pertanto, non credo che il tuo problema sia questo.

Se per link attivi intendi il link della pagina su cui si è appena entrati, io sfrutterei due sistemi diversi, a seconda del tipo di menu che uso. Infatti, per esempio:
1) Se uso un menu con i rollover (effetto che creo direttamente con Dreamweaver) nella pagina XXX cambio il tasto del menu relativo a quella stessa pagina, e NON USO il rollover. Inoltre, non inserisco l'immagine relativa allo stato "normale", ma l'immagine relativa allo stato "down", oppure un'altra ancora di diverso colore. In tal modo, appena si entra in quella pagina, il tasto del menu, relativo a quella pagina, sarà PER FORZA diverso dagli altri, no?
2) Se uso i CSS creo un'altra classe, con le caratteristiche che vorrei che avessero i "link attivi". Il sistema è simile a quello precedente, nel senso che, se sto costruendo la pagina XXX, nel menu dò la classe principale a tutti i collegamenti alle altre pagine; invece, proprio al collegamento relativo a quella stessa pagina in cui mi trovo dò la classe creata apposta per i "link attivi".

Non so se esistano altri sistemi, ma questi non mi sembrano tanto "strani".

P.S. Ribadisco che sono un novellino, comunque, ti consiglio di provare ad evitare il più possibile i frame; anche io pensavo fossero comodi, ma hanno il rovescio della medaglia, perchè limitano l'indicizzazione di alcuni motori di ricerca, i quali si fermano alla pagina con i frame "principale". Ancora peggio è usare i menu in Flash (che mi piacevano tanto). Arrivato al menu Flash, il motore di ricerca non indicizza le pagine collegate, PERCHE' NON TROVA I COLLEGAMENTI (che sono DENTRO il filmato Flash). Preferisco usare collegamenti semplici, cercando di abbellirli con i CSS, perchè così i motori li trovano e "leggono" il testo di tutte le pagine del sito, con la conseguenza che aumentano al massimo le possibilità che il sito stesso venga "trovato", anche usando come ricerca le parole che si trovano nel testo delle pagine. Aggiungo che non è vero che sono le parole chiavi che inserisci nei META TAG a far trovare il sito, ma quelle che compongono il titolo di ogni pagina (che hanno la precedenza) e quelle inserite nel testo delle pagine (se sei riuscito a far "indicizzare" tutte le pagine al motore di ricerca). OK?

Fammi sapere se sono stato chiaro.

Ciao.

[cantard]

Ciao Sgrebs!

Anch'io ho usato questo sistema (il tuo 2). Naturalmente se hai molte pagine diventa tanto lavoro.
Per quello che hai detto sul a:visited: puoi anche toglierlo, se sostituisci a.menu:link con a.menu e basta...

se ti interessa, puoi vedere anche il menu del mio sito.

ciao

[blakwolf]

scusa ma non bastava che davi un margin-left o un padding-left al link per ottenere l'effetto crossbrowser?

[xtc78]

Vi ringrazio per i consigli.
Per quanto riguarda la due soluzioni di Sgrebs le avevo già utilizzate entrambe ... io però cercavo qualcosa di più automatico.

Ho molte pagine da aggiornare e per questo ho utilizzato tre modelli per tutto il sito... mi piacerebbe quindi intervnire direttamente sui modelli senza dover intervenire su tutte le singole pagine.

Non ho ben capito la soluzione proposta da blakwolf ?!?

saluti

[blakwolf]

se al posto di text-indent all'"a" davi un padding-left o un margin-left quell'effetto rollover con l'indentazione avrebbe funzionato crossbrowser

[antos]

invece per il problema di xct78 è una cosa che si risolve o con javascript o latoserver
questa è la soluzione con js
http://pro.html.it/articoli/id_347/idcat_11/pro.html