NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Odkaz přes celý TD tabulky

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
tbartolen
Člen
Avatar
tbartolen:6.12.2016 14:35

Ahoj, v WP si pomocí pluginu dělám skrolovací odkazy. Tabulka vypadá asi takhle:

<table class="vyber">
<tbody>
<tr>
<td>[ps2id url='#1']Předkrmy[/ps2id]</td>
<td>[ps2id url='#2']Polévky[/ps2id]</td>
<td>[ps2id url='#3']Saláty malé[/ps2id]</td>
<td>[ps2id url='#4']Saláty velké[/ps2id]</td>
</tr>
.vyber td:hover {
  background-color: blue; }

KDybyc tam měl klasické href odkazy, tak bych to řešil asi nějak přes margin / pading...ale tady si nejse jistý, jak to vyřešit, aby byl odkaz přes celou bunku a ne jen na textu.

Děkuju za radu :)

Editováno 6.12.2016 14:36
Odpovědět
6.12.2016 14:35
Navštiv www.fb.com/skkelticz
Avatar
Odpovídá na tbartolen
Neaktivní uživatel:6.12.2016 15:13

Já myslím, že do výsledného html ti ten plugin ale vygeneruje odkazy normální, tak aby věděl prohlížeč co s nimi.

<table class="vyber">
<tbody>
<tr>
<td><a href="#1" rel="m_PageScroll2id">Předkrmy</a></td>
<td><a href="#2" rel="m_PageScroll2id">Polévky</a></td>
<td><a href="#3" rel="m_PageScroll2id">Saláty malé</a></td>
<td><a href="#4" rel="m_PageScroll2id">Saláty velké</a></td>
</tr>

Tak je normálně nastyluj v css

Nahoru Odpovědět
6.12.2016 15:13
Neaktivní uživatelský účet
Avatar
tbartolen
Člen
Avatar
Odpovídá na Neaktivní uživatel
tbartolen:6.12.2016 16:48

Nefunguje to tak, jak má , pokud udělam klasický odkaz.

Nahoru Odpovědět
6.12.2016 16:48
Navštiv www.fb.com/skkelticz
Avatar
Odpovídá na tbartolen
Neaktivní uživatel:6.12.2016 17:57

Ale wp ti stejně vygeneruje normální odkazy.
Prohlížeč netuší co znamená

[ps2id url='#1']Předkrmy[/ps2id]

ale wp mu pošle

<a href="#1" rel="m_PageScroll2id">Předkrmy</a>

a s tím css podle kterého to prohlížeč vykreslí.

A proto napiš css tak jako by tam měl být normální odkaz.

Třeba takhle

.vyber {width:100%;text-align:center}
.vyber td:hover {background-color:blue}
.vyber td a {display:block;width:100%;margin:0;padding:0}
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
6.12.2016 17:57
Neaktivní uživatelský účet
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.