Keskustelu: Nettisivujen teko: Taulukon solusta linkki/animaatio? (CSS, HTML)

Voisin varmaan löytää vastauksen netistäkin, mutta nyt on sen verran hankala kysymys, että ei oikein meinaa löytyä helposti vastausta, niin kysynpä täältä...

Kysymys: minun täysyisi saada taulukon solusta linkki, jonka ympärille tulee keltainen neliö, kun osoittimen vie linkin päälle. Eli taulukon solulla ei normaalisti kehyksiä, paitsi silloin kun osoitin on sen yläpuolella. Olis myös näppärä jos kehykset saisi pyöreiksi, pystyyköhän senkin määrittelemään ihan normaalilla CSS määrittelyllä?

Tarvitaanko tässä javascriptiä?
Jos ei, niin jaksaisiko joku koodaa pari riviä avuksi meikälle? ei tartte olla täsmällistä koodia, korjaan itse virheet,jos tarpeen.

Paulus M kirjoitti:

Kysymys: minun täysyisi saada taulukon solusta linkki, jonka ympärille tulee keltainen neliö, kun osoittimen vie linkin päälle.

http://blaze.dyndns.ws/~blaze/celllink.html

Paulus M kirjoitti:

Olis myös näppärä jos kehykset saisi pyöreiksi, pystyyköhän senkin määrittelemään ihan normaalilla CSS määrittelyllä?

Tämä ei sitten onnistukaan.

Blaze kirjoitti:

Paulus M kirjoitti:

Kysymys: minun täysyisi saada taulukon solusta linkki, jonka ympärille tulee keltainen neliö, kun osoittimen vie linkin päälle.

http://blaze.dyndns.ws/~blaze/celllink.html

Opera ei tykkää tuosta.. Ja sama homma IE 6:lla.

Kiitokset nopesta vastauksesta ja jäätävän vauhdikaasta koodauksesta!

Mutta mitenköhän tuon linkin sais viittaamaan taulukon soluun, kun tuossa
esimerkissäsi se ilmeisesti vielä viittaa tekstiin:

<td>
   <a href="#">linkki</a>
</td>

Voisiko siitä johtua, ettei myös neliötäkään tule:

td a:hover {
	outline: 2px solid #ff0;
}

koska eikö tämä nyt tarkoita sitä, että kaikki taulukot, jotka toimivat linkkeinä, saavat keltaisen neliön, kun hiiri ylittää ne?
Jos näin, niin ilmiötä ei tapahdu, jos tekstistä tekee linkin, eiks jee?

Sanoit, ettei pyöreitä kehyksiä saa, mutta kai saa pyöristettyä neliön kulmat?
Muistelisin, että se on mahdollista, mutta taidan muistaa väärin.

Newb kirjoitti:

Opera ei tykkää tuosta..

Pötyä. Testasin nimittäin Operalla.

Newb kirjoitti:

Ja sama homma IE 6:lla.

No sillä nyt ei toimi mikään :P

En muista ulkoa, mitkä kaikki selaimet tukee tuota outlineä. Toki saman voi tehdä border-ominaisuutta käyttäen, mutta silloin se border pitää laittaa myös ei-:hoverille, jotta solu ei pompi ympäriinsä kun sen koko muuttuu.
Ja ainakaan IE6 ei tukenu läpinäkyvää borderia, joten kaikissa tapauksissa ei tuokaan auta.

Paulus M kirjoitti:

Mutta mitenköhän tuon linkin sais viittaamaan taulukon soluun, kun tuossa
esimerkissäsi se ilmeisesti vielä viittaa tekstiin:

Ei mitenkään. HTML sallii linkkien sisälle vain inline-elementtejä. Yksinäinen a-alementti taulukon soluun ja sille display: block; on lähimmäksi tuota, mitä pääset. (Siis juuri kuin esimerkissäni on.)

Paulus M kirjoitti:

td a:hover {
	outline: 2px solid #ff0;
}

koska eikö tämä nyt tarkoita sitä, että kaikki taulukot, jotka toimivat linkkeinä, saavat keltaisen neliön, kun hiiri ylittää ne?

Kaikille a-elementeille, joiden päällä hiiri on, ja jotka ovat td:n sisällä laitetaan outline.

Paulus M kirjoitti:

Sanoit, ettei pyöreitä kehyksiä saa, mutta kai saa pyöristettyä neliön kulmat?
Muistelisin, että se on mahdollista, mutta taidan muistaa väärin.

CSS3-standardissa (josta on olemassa working draft) tulee olemaan border-radius-ominaisuus, jolla tuo onnistuu, Gecko (Firefoxin renderöintimoottori) tukee tuota nimellä -moz-border-radius. Muullapa sitten oikein ei. Lisäsin malliksi, toimii tosiaan sitten vain Geckoa käyttävillä selaimilla.

Täytyy sanoa, että jannu osaa kyl koodata!
Ei näyttänyt tosiaan IE:llä toimivan muu kuin tuo vaihtoehtoinen tapa, mutta sekin vähän kehnosti.

Firefoxilla homma toimii loistavasti!

kiitokset!

Blaze kirjoitti:

Newb kirjoitti:

Opera ei tykkää tuosta..

Pötyä. Testasin nimittäin Operalla.

Operalla (Versio 9.25) se näyttää tältä. Eli vaihtoehtoinen tapa toimii mainiosti, mutta ylemmästä esimerkistä jää ylä-, ja vasen alareuna pois.

Newb kirjoitti:

Operalla (Versio 9.25) se näyttää tältä.

Katos joo, en tiennykkään, että vanhemmassa on tollanen bugi. Mulla on tosiaan 9.5

Vielä tähän väliin heitä yhden kysymyksen, ku ei viitti uutta alotustakaan tehdä:

miten saan fontin muunnettua ilman, että tulee kappalevaihtoa?

eli kun käytän tagia

<p class = "meikänomafontti">Ja katos vaan, kappalekkin vaihtuu</p>

niin tapahtuu samalla kaksi rivinvaihtoa.

Ongelma esiintyy Firefoxilla, mutta ei IE:llä.
Taulukko laajenee reippaasti yli tuon 49:n pikselin, koska Firefoxilla ilmeisesti kappalevaihto vie tilaa, vai mikä on se vika?
Onko mahdollista määrittää, että taulukko ei yksinkertaisesti laajene yli asetetettujen mittojen?

(ongelma löytyy täältä http://www.howberry.com/)

<table width = 670 height = 49 align = "center">
<tr>

<td width = "25%" align = center valign = middle background = "pictures/porakivi2.jpg" >
<a href="index.html"><p class= "normal">Etusivu</p></a>
</td>

Paulus M kirjoitti:

miten saan fontin muunnettua ilman, että tulee kappalevaihtoa?

eli kun käytän tagia

<p class = "meikänomafontti">Ja katos vaan, kappalekkin vaihtuu</p>

niin tapahtuu samalla kaksi rivinvaihtoa.

http://www.w3schools.com/css/tryit.asp?filename­=trycss_text_background
Eli span:llahan se onnistuu.

Joo, niinpä toimii, kiitokset!