Soluzioni CSS

[gerarcone]

Leggendo un tutorial sui CSS ho cliccato su questo link:

http://www.alistapart.com/

sono rimasto assai colpito dalla soluzione grafica scelta per il "menu" orizzontale in alto, quello dove si leggono i link: "up front", "articles", "about ala", e via dicendo. Al passaggio del mouse su quella che apparentemente sembra la cella di una tabella, cambia lo sfondo, inoltre le stesse celle sono evidenziate con un sottile contorno grigio. Sono pressocchè certo che questa soluzione è stata resa grazie ai CSS, ma nonostante io abbia letto con grande attenzione il sorgente HTML del sito, non sono riuscito a capirci poi tanto. Quello che mi interesserebbe, è proprio il cambio di sfondo al passaggio del mouse: ho cercato di replicare la cosa in Dynamic HTML, ma il risultato non è identico; l'unico modo che conosco per riuscire nell'intento è quello di servirmi di codice JavaScript per sostituire delle immagini al passaggio del mouse, ma questa soluzione "appesantirebbe" troppo il sito, credo. La mia speranza, ovviamente, è stata quella di trovare un bel tutorial su HTML.it, ma nonostante io cerchi da giorni, nulla è saltato fuori. Come è possibile fare in modo che il mouse "riconosca" delle apparenti cellette di tabella come oggetto di un link (cambiando forma nella mano), come se si trattasse di immagini cliccabili, e
allo stesso tempo che cambi il colore di sfondo delle stesse? Se qualcuno può aiutarmi, lo ringrazio sin da ora di cuore.

[Jerry Masslo]

cellette? hai trovato qualche tabella? :quote:

poi il codice lo trovi nel css non nell'html

l'effetto è dato da dalle pseudo-classi che agisono sui link come qualcosa del genere.

a {padding: .3em; text-decoration: none; color:red;border: 1px solid silver}
a:hover {color:navy; background:lime}

scusa ho fretta

[gerarcone]

No, non possono agire sui link, perchè anche quando il mouse è sulla celletta ma non sul link la freccia si trasforma in mano e cambia il colore di background.

[pacovox]

http://www.constile.org/template/menu_verticali/

[antos]

Originariamente inviato da gerarcone
No, non possono agire sui link, perchè anche quando il mouse è sulla celletta ma non sul link la freccia si trasforma in mano e cambia il colore di background.

guarda per fare il menu è stato usato una elenco puntato

<ul>[*]  link 
  ...[/list]

e il css dovrebbe essere qualcosa del genere

li{float:left;width:xxpx;}
li a{display:block;width:100%;background-color:#FFFFFF;color:#666666;}
li a:hover{background-color:#666666;color:#FFFFFF;}

[Jerry Masslo]

Originariamente inviato da gerarcone
No, non possono agire sui link, perchè anche quando il mouse è sulla celletta ma non sul link la freccia si trasforma in mano e cambia il colore di background.

Guarda non ho visto in dettaglio e probabilmente è come dice Antos, ma anche senza liste se metti un padding adeguato ti cambia quel che vuoi senza necessità di passare obbligatoriamente sulla parola perchè tutto lo spazio occupato è link, così se ad esempio ai link dai un padding-left e un padding-right mettiamo di 30px i link interessati diventano attivi fino a 30px a destra e sinistra del testo.

[antos]

Originariamente inviato da Jerry Masslo
Guarda non ho visto in dettaglio e probabilmente è come dice Antos, ma anche senza liste se metti un padding adeguato ti cambia quel che vuoi senza necessità di passare obbligatoriamente sulla parola perchè tutto lo spazio occupato è link, così se ad esempio ai link dai un padding-left e un padding-right mettiamo di 30px i link interessati diventano attivi fino a 30px a destra e sinistra del testo.

non può giocare con il padding conviene invece dare al link un dispaly:block

[pacovox]

Guarda non ho visto in dettaglio e probabilmente è come dice Antos, ma anche senza liste se metti un padding adeguato ti cambia quel che vuoi senza necessità di passare obbligatoriamente sulla parola perchè tutto lo spazio occupato è link, così se ad esempio ai link dai un padding-left e un padding-right mettiamo di 30px i link interessati diventano attivi fino a 30px a destra e sinistra del testo.

L'area cliccabile è definita dalla dichiarazione "display: block;"

[Jerry Masslo]

Non sto dicendo che è fatta in un modo piuttosto che in un altro ma rispondevo semplicemente all'affermazione che solo coi link non è possibile far attivare un'area distante dal testo dei link, col padding si può.