[HTML]<div w <a - alternatywa Opcje

[DiamondPir]

witam...
potrzebuję zrobić box/div w którym będę miał <table
i muszę dodać taką akcję, że jak kliknę gdziekolwiek na ten box to mnie przenosi na podany link

kod:

[HTML] pobierz, plaintext 
<a href="http://strona.pl/" >
    <div>tabela</div>
</a>
[HTML] pobierz, plaintext 

nie jest dobrym rozwiązaniem.
Potrzebuję alternatywy...

proszę o pomoc

[b4rt3kk]

Nie wiem za bardzo o co chodzi? Żeby cała tabela była linkiem?

A jeśli chcesz by link był wyświetlany blokowo, jak div, to dodaj w css:

[HTML] pobierz, plaintext 
a {
display: block;
}
[HTML] pobierz, plaintext 

[DiamondPir]

chodzi właśnie o to żeby cała tabelka była linkiem...
Twój przykład oczywiście mogę wykorzystać ale wstawiając tabelkę w <a> nie jest to dobre rozwiązanie...
czy nie można np zrobić <div onclick="load:http://strona.pl" czy coś w tym stylu?

[Spawnm]

Tak na szybko to np:

Kod

$('#my_div').click(function(){
   window.location = 'http://strona.pl';
});

Oczywiście w czystym js będzie lepiej i szybciej jeśli nie korzystasz z jquery.

[kamil4u]

Tak na szybko to np:

Bez przesady - tu wystarczy CSS

Tak jak pisano: display: block; , ale odwrotnie wsadzone elementy: http://jsfiddle.net/r84ph/

[DiamondPir]

zobaczcie co chcę osiągnąć...: http://jsfiddle.net/5dLYU/

w <a chcę mieć mniejsze boxy w których będę sobie mógł wstawiać jakieś teksty...
i pytam czy rozwiązanie które przedstawiłem jest poprawne... Czy wstawienie DIVÓW w A jest poprawne pod względem walidacji i czy to działa na każdej przeglądarce...

[CuteOne]

nie jest poprawne.. skorzystaj z przykładu Spawnm'a

[Pawel_W]

a właśnie że jest, html5 już dopuszcza

tutaj źródło: http://html5doctor.com/block-level-links-in-html-5/

[Damonsson]

Mimo wszystko, radzę zastosować się do rady użytkownika @kamil4u.

[Pawel_W]

robienie setki linków to nie jest dobry pomysł, chyba po to właśnie powstają tego typu ułatwienia? a z tego co wiem to nawet IE6 nie ma z tym problemu

[kamil4u]

A nie można poprawnie i bez kombinowania? http://jsfiddle.net/r84ph/1/

--edit--
A racja... nie doczytałem... Tylko "po co?"

Ten post edytował kamil4u 5.09.2012, 20:32:06

[Damonsson]

Cały szkopuł w tym, że autor tematu chce trochę "oszukać" użytkownika i te boxy są fikcyjne, tak naprawdę kliknięcie w obrębie całego DIVa ma przenosić na stronę X, więc polemizowanie jak to zrobić jest trochę bez sensu, bo zawsze będzie to niepoprawne, cokolwiek by ktoś wymyślił.

[DiamondPir]

CSS tutaj nie wystarczy bo jednak mój ostatni przykład stąd http://jsfiddle.net/5dLYU/ nie zachowuje się poprawnie na IE w trybie zgodności...

No ale wyskrobałem to na nowo według przykładu Spawnm http://jsfiddle.net/5dLYU/1/
niby działa ale czy takie rozwiązanie będzie działać na każdej przeglądarce?

[-Paeeo-]

Bez sensu...

Robisz normalnie linki (<a>), w jego środku span'y z display: table oraz table-cell/row jak wolisz... Możesz robić span w spanie. Ważne, aby nie robić <p> w spanie bo zwróci błąd.
Przykład:

<a href="">
<span style="display:table;width:200px;height:100px;background:#444;">
<span style="display:table-cell;width:50px;">asd</span>
<span style="display:table-cell;width:50px;">asd</span>
<span style="display:table-cell;width:50px;">asd</span>
<span style="display:table-cell;width:50px;">asd</span>
</span>
</a>

[DiamondPir]

acha no też można... prześpię się i przetestuję jak to będzie chodzić na IE

[-Paeeo-]

Możesz też sprawić, aby wewnętrzny span (załóżmy jakiś w span style="display:table-cell") był traktowany jako akapit (<p>), dla lepszego traktowania przez Google, przy pomocy jQuery. Nie wiem czy zwróci błąd (trzeba testować), ale spokojnie spany Ci wystarczą Pozdrawiam!

[Pawel_W]

Bez sensu...

Robisz normalnie linki (<a>), w jego środku span'y z display: table oraz table-cell/row jak wolisz... Możesz robić span w spanie. Ważne, aby nie robić <p> w spanie bo zwróci błąd.

pod IE7 nie przejdzie

co do wersji @Spawnma zadziała, o ile ktoś ma włączoną obsługę js (można spokojnie założyć że wszyscy), ale tworzenie takich linków ma katastrofalne znaczenie dla seo

[zegarek84]

[CSS] pobierz, plaintext 
.mylink {text-decoration:none;color:#000;
display:block;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.box {position:relative;}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div class="box">
    <table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
    <a href="http://www.google.pl" class="mylink">
    </a>
</div>
[HTML] pobierz, plaintext 

http://jsfiddle.net/zegarek84/PgK3Q/2/
soją drogą nie widzę nic złego w tym, aby wszystko objąć linkiem skoro html5 na to pozwala i w dodatku wszystkie przeglądarki od dawien dawna poprawnie to obsługiwały...
http://jsfiddle.net/zegarek84/PgK3Q/

[DiamondPir]

jedynym sposobem który działa na starych IE (w trybie zgodności) jest sposób ze spanem w linku:

[PHP] pobierz, plaintext 
<a href="">
 <span style="display:table;width:200px;height:100px;background:#444;">
 <span style="display:table-cell;width:50px;">asd</span>
 <span style="display:table-cell;width:50px;">asd</span>
 <span style="display:table-cell;width:50px;">asd</span>
 <span style="display:table-cell;width:50px;">asd</span>
 </span>
</a>
[PHP] pobierz, plaintext 

tyle tylko że jeśli najedzie się kursorem na span to kursor zmienia wygląd na text (zaznaczanie) i trzeba jedynie dodać w css:

[PHP] pobierz, plaintext 
cursor:pointer;
[PHP] pobierz, plaintext 

wtedy to działa prawidłowo i prawidłowo wygląda...

opcje z divami w <a nie są poprawne bo IE ich nie otwiera

[Pawel_W]

opcje z divami w <a nie są poprawne bo IE ich nie otwiera

ciekawe, sprawdzałem pod IE6,7,8,9 i działało może masz błędy w kodzie i włącza Ci się quirks mode?