Autor Zpráva
Lojzek
Profil *
Ahojte
Mám tabulku 32 řádků, 5 sloupců. V každé buňce tabulky je jeden odkaz. Jde nějak (pokud možno pomocí css) udělat, aby fungovala jako odkaz celá buňka? Tzn. abych nemusel šipkou najíždět přesně na text konkrétního odkazu, ale aby stačilo najet na příslušnou buňku a zmáčknout. A samozřejmě taky aby ta buňka po najetí šipkou změnila barvu.
Anebo to zkusit radši nějak udělat z DIVů?
Předem díky za nakopnutí správným směrem.
swetko
Profil
cisto teoreticky
vytvorim si tabulku a kazde td bude mat 50x20px a nulovi padding
do kazdej umiestnim odkaz
nastavim aby odkaz bol blok a nastavim mu rozmery 50x20px z nulovim marginom
mozem mu nastavit aj hover a tym padom sa bude menit ako keby farba celej bunky
neskusal som to ale malo by to ist
Joker
Profil
Lojzek
Roztáhnout odkaz na celé rozměry buňky. Ale tuším, že například IE6 udělá "klikací" stejně jenom text a zbytek plochy odkazu vesele ignoruje.

Anebo to zkusit radši nějak udělat z DIVů?
Pokud to je tabulka, tak tabulkou.
peta
Profil
Lojzek
Viz ostatni.

Pokud vis, jakou sirku a vysku ma mit bunka, muzes zadat pres CSS odkaz jako display:block a nastavit rozmery. Po te pridat hover. A:hover . A melo by to presne tak, jak rikas fungovat.
Pokud mas ale na radku vice bunek, ktere maji reagovat na odkaz v prvni bunce, lze to udelat jedine pomoci javascriptu.

Joker
Zalezi na zpusobu. Zmenou na display:block bys mel docilit cely odkaz.
Pokud to nepomuze, je mozne pouzit line-height / width, mozna pridat padding a overflow. Takove siditko. :)
Jinak by musel pouzit javascript navazany na TD.
lojzek
Profil *
tak jsem to udělal takhle:

http://www.volny.cz/pmaster/klikbulka.htm

Funguje to v IE 6, IE7, FF a v Opeře. Jinde jsem to nezkoušel, páč se mně nechce :-)
Jenom ve FF ten hover nepřebarví pozadí v celé buňce, ale nechává dole jednu původní linku. To bych si asi musel pohrát s výškou bloku a řádku, možná s paddingem. Šířku bloku jsem nezadával, abych mohl použít sloupce různé šířky.

Ještě jednou díky všem za rady, těžko můžu čekat, že bych to někdy vymyslel sám ;)
Bubák
Profil
Jenom ve FF ten hover nepřebarví pozadí v celé buňce, ale nechává dole jednu původní linku.
To bude nějaká chyba Firefoxu (zaokrouhlovací?), s některými rozměry to funguje správně, s jinými dole zůstane 1px proužek.
Použij padding-bottom: 0.31em

CSS jde trochu zjednodušit:
.tabulkaseznam
{
font: 14px verdana, sans-serif; text-align: left;
border: 0; border-collapse: collapse;
}

a:link {
	color: #000; text-decoration: none;
	display: block; height: 17px; padding: 0.31em 0.7em;
}
a:hover {
	background: #f4f4f4;
	color: #00e;
	/* nezmenene vlastvosti neni treba znovu deklarovat */
}

.tabulkaseznam td
{
border:1px solid #fff;
background:#ddd;
}
lojzek
Profil *
ok, díky. Přepsal jsem css.
a:visited tam ale být musí, jinak to v IE6 po navštívení odkazu přestane fingovat.
lojzek
Profil *
fungovat :)
Bubák
Profil
Omlouvám se za chybu, namísto:
a:link {

má být pouze:
a {

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: