Corel FORUM

Kate

Czy ktoś wie jak zrobić wiersz tabeli jako link bez użycia javascript?

ABu

Ja bym to rozbił na kilka linków, wyglądałoby to jakoś tak:

<table>
<tr>
<td>wiersz 1 kolumna 1</td>
<td>wiersz 1 kolumna 2</td>
<td>wiersz 1 kolumna 3</td>
</tr>
<tr>
<td><a href="http://www.google.pl">wiersz 2 kolumna 1 jako link do google</a></td>
<td><a href="http://www.google.pl">wiersz 2 kolumna 2 jako link do google</a></td>
<td><a href="http://www.google.pl">wiersz 2 kolumna 3 jako link do google</a></td>
</tr>
<tr>
<td>wiersz 3 kolumna 1</td>
<td>wiersz 3 kolumna 2</td>
<td>wiersz 3 kolumna 3</td>
</tr>
</table>

Kate

Jakieś to rozwiązanie jest ale, w takim przypadku klikalny będzie tylko tekst w komórkach a nie cała komórka.

ABu

A tak może być?

<table border="1">
<tr>
<td>wiersz 1 kolumna 1</td>
<td>wiersz 1 kolumna 2</td>
<td>wiersz 1 kolumna 3</td>
</tr>
<tr>
<td><a href="http://www.google.pl"><div>google</div></a></td>
<td><a href="http://www.google.pl">google</a></td>
<td><a href="http://www.google.pl">google</a></td>
</tr>
<tr>
<td>wiersz 3 kolumna 1</td>
<td>wiersz 3 kolumna 2</td>
<td>wiersz 3 kolumna 3</td>
</tr>
</table>

Teraz jest cała komórka. Działa w IE, FF i Operze.

Kate

Teraz to prawie idealnie, ale gdyby dodać tło i zmienianie jego koloru po najechaniu myszką, to tylko będzie zmieniać się jedna komórka. Ale ogólnie rozwiązanie jest ok. ...pozdrawiam;)

ABu

<html>
<head>
<title>Tytul</title>
<style type="text/css">
tr.wiersz
{
background-color: #E0E0E0;
}
tr.wiersz:hover
{
background-color: #FFE0E0;
}
</style>
</head>
<body>
<table border="1">
<tr class="wiersz">
<td>wiersz 1 kolumna 1</td>
<td>wiersz 1 kolumna 2</td>
<td>wiersz 1 kolumna 3</td>
</tr>
<tr class="wiersz">
<td><a href="http://www.google.pl"><div>google</div></a></td>
<td><a href="http://www.google.pl">google</a></td>
<td><a href="http://www.google.pl">google</a></td>
</tr>
<tr class="wiersz">
<td>wiersz 3 kolumna 1</td>
<td>wiersz 3 kolumna 2</td>
<td>wiersz 3 kolumna 3</td>
</tr>
</table>
</body>
</html>

A teraz? Niestety, nie działa w IE, ale nad tym pomyślę jutro (tam będzie potrzebna nieco większa gimnastyka z css i html, ewentualnie zastosowanie JavaScript)

Kate

A ja się męczyłam przez pół dnia żeby coś wymyślić, a tu okazuje się że nie jest to aż tak skomplikowane, no jeszcze jak zadziała pod IE to będzie świetnie;)

salza

Kate

Już teraz nie bronię się przed javascript. Ale czasami jestem ciekawa czy można coś zrobić w inny sposób.

Sk14d0wy

witam,
mam ten sam proble,
powyższy sposób nie działa u mnie. :cry:

oto czesc kodu css do linkow,

Kod:

a
{
text-decoration: none; }
:active {color: #b10616; }
:link {color: #b10616; }
:visited {color: #b10616; }
:hover { color: black; background-color: #70421d; }
display: block;
}

wstawialem width and height, robilem oddzielnie a.hover a:hover td.link:hover. albo inne rzeczy i wychodza 2 rzeczy zawsze.
1 to zmiana tła tylko za tekstem
2 niedziała

GangstaMike · Bywalec Dołączył: 31 Maj 2009 Posty: 40 Skąd: Polska

Napisałem kod na chybcika wszystko znajduje się pomiędzy <body>, działa w IE. Czysty CSS i zero JS. :)

Kod:

Immortal85

Czytając Wasze wypowiedzi do zadanego pytania mogę stwierdzić jedno: nie ma potrzeby używania Java Scripts - jest to dobre rozwiązanie, jednak w sytuacji kiedy możemy używać XHTML-a i CSS-a proponuję tego typu rozwiązanie działające pod FF I IE:

HTML

Kod:

CSS ZEWNĘTRZNY

Kod:

.nazwa td {
width: 20px;
text-align: center;
border: 1px solid #DCD193;
}
.nazwa td a {
display: block;
}
.nazwa td a:hover {
background-color: #FF0000;
font-weight: bold;
color: #FFFFFF;
}

Pisałem szybko, więc może gdzieś się wkraść błąd, ale można sprawdzić działanie na www.strony-internetowe.vot.pl

Pozdrawiam

Artur Miernik

Wiersz, to proste. Nie bardzo wiem, jak zrobić, żeby kolumna tabeli była łączem. Da się za pomocą CSS3?