Newsgroup: it.comp.www.html
Titolo: (LUNGHETTO) Per Marok e tutti gli altri della discussione sull' td a:hover...

DA GOOGLE :
<style type="text/css">
<!--
body       {background: navy}
td         {background: white; font-family: Verdana, Sans-Serif; font-size:
1em; text-align: center}
td a       {display:block; background: white; color: green;
text-decoration:none}
td a:hover {background: #80ff40; color: black; text-decoration:none}
-->
</style>
</head>
<body>
<table width="100%" border=1 cellpadding=0 cellspacing=0><tr>
<td><a href="#">cella 1</a></td>
<td><a href="#">cella 2</a></td>
<td><a href="#">cella 3</a></td>
</tr></table>
</body>
</html>
Se le celle cambiano colore di sfondo al passare del mouse,
vuol dire che funziona! :o)
---------------
Ora.... il display block praticamente mostra il contenuto dell'elemento (in
questo caso dell'ANCHOR A) non solo sull'elemento stesso ma in tutta la
dimensione del BLOCCO contenitore (DIV,SPAN,P ecc anche suppongo quindi no?)
Ora... sebbene non sia ancora utilizzata dai browser nel CSS2 la property
"table-cell" per DISPLAY non sarebbe la + atta allo scopo? Naturalmente
pero' non è supportata da nessun browser...
Poi altra domanda...
Ma la sintassi dei CSS non è
selector {property: value}
Mi spiegate allora perchè nel "nostro" codice
td a       {display:block; background: white; color: green;
text-decoration:none}
td a:hover {background: #80ff40; color: black; text-decoration:none}
abbiamo 2 selector (TD e A) e poi le proprieta' e i valori??
Non dovrebbe essere uno solo?
E' il browser che capisce male o sono io che non capisco la sintassi? :)
Nel caso sbagliassi io, dove posso trovare maggiori info sulla sintassi con
+ selectors?
Ultimo dubbio...
Con il codice iniziale (il primo scritto nel mex) se passo il mouse OVER the
cell tutta la cella diventa cliccabile come se fosse link...se io invece
volessi che la cella cambiasse sì colore, ma il link rimanesse sempre e
soltanto sull'anchor A ?
(escludendo la sempre valida alternativa javascript
"onmouseover="this.style.background" e "onmouseout="this.style.background"
per lo sfondo della cella e il CSS "a" e "a:hover" per il link mettendo come
background per a lo stesso di onmouseout e per a:hover per onmouseover)
Grazie dei chiarimenti
Ric.
(cmq secondo me la soluzione javascript di Marok iniziale
onmouseover="this.style.background='yellow'"
     onmouseout="this.style.background='white'">
è la migliore per brevita' di sintassi, ma è solo una MIA idea :) )
Grazie
Ric.

 è la migliore per brevita' di sintassi, ma è solo una MIA idea :) )
brevita'? la devi ripetere per ogni linko sbaglio?
ciao.
-- 
''while surfing i prefer to have windows instead of
pop-up windows, that's why i use mozilla''
(
http://www.mozilla.org
)

 >
CUT
Grazie ancora delle tue spiegazioni...mi sono state molto utili...
anche se, per quanto riguarda mozilla, č ben poco utilizzato nel web.
Speriamo che IE e NETSCAPE si adeguino allo standard completo.
Ric.

 brevita'? la devi ripetere per ogni linko sbaglio?
 
oltre alla giusta osservazione di deelan... correggimi se sbaglio ma quel 
java script va nel codice html, quindi se vuoi cambiare il look della 
pagina devi rivedere il codice html, giusto? personalmente credo che finchè 
si può sia meglio tenere separati formattazione e contenuto: se un giorno 
mi gira di cambiare lo stile dei link lavorare sul css è molto più comodo.
ciao 
Daria m.

 è la migliore per brevita' di sintassi, ma è solo una MIA idea :) )
Piccola nota... dell'autore! :D
Quella soluzione può andare bene se applicata "una tantum",
cioè una volta sola ad un singolo oggetto e basta.
Se invece gli elementi sono ripetuti...
è bene non ripetere anche lo stile.
Questo lo puoi ottenere con la soluzione di daria m. (cioè l'hover),
che io ritengo la migliore.
Oppure, se (come mi è sembrato) preferisci usare javascript,
puoi sempre richiamare da body onload l'onmouseover e l'onmouseout
per tutti gli elementi di una pagina:
function caricaLink() {
 for(i=0;i<document.links.length;i++)
 {
     document.links[i].onmouseover= new Function("if(this.style) this.style.backgroundColor='red'")
     document.links[i].onmouseout= new Function("if(this.style) this.style.backgroundColor='white'")
 }
}
Anche questa soluzione evita la ridondanza del codice
e può essere condivisa da più documenti,
ma è un pelino meno elegante dell'approccio via css,
che io preferisco!
Alla prossima!
MaRoK

> Oppure, se (come mi è sembrato) preferisci usare javascript...
Nota alla nota:
mi sono accorto che serve display:block anche in questo caso,
dunque... tantovale usare direttamente la soluzione via css,
che è molto ma molto meglio! :o)
MaRoK

 ha scritto nel messaggio
news:xXcG9.42236$3l.11...@twister1.libero.it...

Capito grazie :)
No non è che preferisco javascript ma a quanto sembra è inevitabile se vuoi
cambiare il colore di sfondo della cella senza che sia tutta cliccabile
visto che td:hover non funziona almeno su IE (che è il browser + utilizzato)
Quindi saresti obbligatoad utilizzare sia i css (per "a" e "a:hover" e
magari anche per stabilire graficamente il TD) e poi javascript per cambiare
SOLO lo sfondo della cella con onmouseover senza che diventi tutta
cliccabile come avviene agendo solo via css (sarebbe il primo script che ho
postato)
Naturalmente come hanno fatto notare sia deelan che Daria è brutto e
"frustrante" visto che non puoi cliccare su tutta la cella nonostante si
illumini ma magari ad alcuni potrebbe servire...
Grazie ancora a tutti
Ric.

 Daria m.
Ciao e ancora grazie!
Ric.

 che io ritengo la migliore.
esempio pratico:
http://www.zeldman.com/
il menu in alto a dx e' descritto
come:
<div id="secondarynav">
<ul>
<li id="secondarytop"><a href="/about/" title="History, FAQ, bio, 
etc.">about</a></li>
<li id="contact"><a href="/contact/" title="Write to us.">contact</a></li>
<!-- altre voci... -->
</ul>
</div>
cioe' come una unordered list (che io preferisco alle
tabelle), lo stile e'
(tolgo le parti poco interessanti):
#secondarynav	{
   /* posizionamento del div.  */
}
#secondarynav ul {
   /* via i "bullet" dalla lista */
   list-style: none;
}
#secondarynav li {
   /* per ogni list-item viene applicato un bordo */
   border-bottom: 1px solid #066;
   /* larghezza fissa per i <li> */
   width: 100px;
}
/* applica a tutti gli anchor della lista... */
#secondarynav li a {
   /* ecco il famoso display block */
   display: block;
   /* bordi piu' spessi sia a sx che a dx (par condicio) */
   border-left: 2px solid #6cc;
   border-right: 2px solid #6cc;
   background-color: #399;
}
/* l'amato/odiato hover sul link */	
#secondarynav li a:hover {
   /* cambiano anche il caolore dei bordi :) */
   border-left: 2px solid #9cc;
   border-right: 2px solid #9cc;
   /* cambio del background color */
   background-color: #5aa;
   color: #fff;
}
...e vissero tutti felici e contenti. :)


 Per il resto concordo con te.
Sì può fare e mi sembra che qualcuno abbia anche detto come: la soluzione 
centralizzata mi sembra un buon compromesso. Come dici tu: a volte bisogna 
arraggiangiarsi. :0) Quello che non mi convinceva era un intervento troppo 
definitorio nel codice html: lì per lì può sembrare una buona soluzione, ma 
se sono pagine che prima o poi verranno "riassemblate" sul lungo periodo 
potrebbe farti perdere un mare di tempo.
ciao
daria m.
-- 
---------------------------------------------------
Life would be easier if I had the source code
---------------------------------------------------

 il menu in alto a dx e' descritto
-CUT-
Chiarissimo :-)
Certo che usare la lista è una bella furbata :) Non ci avevo mai
pensato...provero'!
Grazie ancora di tutto
Ric.

 pensato...provero'!
e questa e' solo un'idea, leggi anche:
"Truly inline lists"
http://www.alistapart.com/stories/taminglists/
-- 
goldicus1970 AT 
yahoo.it
http://www.netspyke.com/deelan

 Speriamo che IE e NETSCAPE si adeguino allo standard completo.
Mhhh, non ne sarei così sicuro, anzi direi che probabilmente Mozilla è
più utilizzato di Netscape, e cmq i due condividono il motore di
rendering, quindi teoricamente dovrebbere mostrare le pagine in modo
identico.
-- 
  _  _ >>Now on Linux<<  _     ||              Home Page:
 | \| |___ _____ ___ ___|_|___ ||  
http://digilander.iol.it/nemesis2001
 | .` | -_|     | -_|_ -| |_ -|||     e niente sarà più come prima ...
 |_|\_|___|_|_|_|___|___|_|___|||            ... o quasi ;)