DIV jako hiperłącze Opcje

[8rol]

Witam.

Chcę zrobić tak, aby po kliknięciu w dowolne miejsce wewnątrz mojego diva użytkownik został przeniesiony na inną podstronę.
Początkowo zrobiłem to za pomocą zdarzenia onclick przypisanego do tego diva. Później jednak okazało się, że możliwe jest wstawienie całego tego diva jako nazwy hiperłącza. Pomyślałem, że będzie to lepsze rozwiązanie z względu na użytkowników z wyłączoną/blokowaną JS.

Jednak w takim wypadku strona nie waliduję się poprawnie w walidatorze. Problemem jest umieszczenie elementu blokowego (div) wewnątrz liniowego (a).

Tak więc w jaki najlepszy sposób zrobić "klikalnego" diva?

[Damonsson]

Może, nadaj

[CSS] pobierz, plaintext 
a {
display: block
}
[CSS] pobierz, plaintext 

? ;>

Ten post edytował Damonsson 22.09.2010, 23:21:05

[essey]

Definitywnie tak! Nie należy dawać div'ów między znaczniki <a></a>.
Najkorzystniejszym rozwiązaniem jest ustawienie wysokości, szerokości oraz wyświetlania jako blok dla linku.
Jest to bardzo wygodne, gdyż można nie tylko określić rozmiar linku, ale i ustawić podmianę tła po najechaniu (hover).
W wypadku divów i hover konieczne są kombinacje za pomocą js, aby obsługiwać to w starszych wersjach IE.

Jeżeli chcesz zrobić to za pomocą div'a z powodu np. zawartości w nim (np. nie tylko link, ale jakieś ramki itd.), polecam korzystanie ze znacznika <span></span>, któremu również możesz nadać parametr display:block i pozycjonować wewnątrz <a></a>, a dodatkowo jest zgodny ze standardami.

[devnul]

Definitywnie tak! Nie należy dawać div'ów między znaczniki <a></a>.

bzdura

[essey]

devnul, mówię o html4. Zanim html5 zostanie spopularyzowany...
Wyskoczyłeś z tym ....

[krispak]

Wlasnie o to chodzi aby go popularyzowac i stosowac

[CSS] pobierz, plaintext 
div {
  width: 100px;
  height: 100px;
}
a {
  display: block;
  width: 100%;
  height: 100%;
}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div><a href="">Link</a></div>
[HTML] pobierz, plaintext 

Jest i klikalny div..

[devnul]

devnul, mówię o html4. Zanim html5 zostanie spopularyzowany...

chwila a to się nie dzieje właśnie teraz? bo z takim podejściem to faktycznie trzeba by ze 20 lat poczekać. Korzystanie z html5 nie oznacza skreślania nawet starych przeglądarek (włączając IE6), skoro google sobie mogło pozwolić na wdrożenie w html5 to i my maluczcy możemy

[everth]

@devnul - chcesz powiedzieć że eksperymentujesz na klientach?

[devnul]

@devnul - chcesz powiedzieć że eksperymentujesz na klientach?

dlaczego eksperymentuje? stosowanie czegoś co działa i oferuje większe możliwości uważasz za eksperyment? Poza tym narzędzie (w tym wypadku język/technologia) zawsze należy dobierać do potrzeb a nie odwrotnie. A decyzja o tym czy stosujemy taką czy inną technologię po przedstawieniu konkretnych za i przeciw jest podejmowana zawsze z klientem. W tym wypadku html5 to np dostępność multimediów na urządzeniach przenośnych Apple (czy to się komuś podoba czy nie stają się coraz popularniejsze) a minusem jest konieczność w celu zapewnienia pełnej kompatybilności wstecznej (w sensie przeglądarek) załączenie odpowiednich skryptów js

Ten post edytował devnul 23.09.2010, 14:34:37

[everth]

@devnul - przecież tam był śmiech, mało mnie obchodzi jakich kosmicznych technologii używasz w codziennym życiu, jeśli tylko klienci są happy (im zresztą pewnie też to zwisa). Chodzi mi raczej o rzucanie na prawo i lewo HTML5.

Przecież ta nazwa to marketingowa zagrywka - w zasadzie poza kilkoma dodatkowymi tagami (których obsługa jeszcze kuleje ->video) praktycznie to wszystko było możliwe wcześniej ze starym poczciwym html4 uzbrojonym JSem (no i flashem, którego teraz się tępi w imię interesów jakiegoś innego konsorcjum). Jedyny zysk jaki widzę z promowania HTML5 to to, że ludzie wreszcie zaktualizowali przeglądarki. I tyle.

[devnul]

@devnul - przecież tam był śmiech

i o czym to świadczy? o tym że sobie żartujesz czy o tym że z powodu własnej ignorancji śmiejesz się z tego że ktoś widzi racjonalne zastosowanie dla tej technologii?

Przecież ta nazwa to marketingowa zagrywka

tak jeśli przez html5 rozumiesz także rozbudowanie js o nowe funkcjonalności oraz css3 to zgadzam się z Tobą - w takim kontekście to jest marketingowa zagrywka, jednak jest wycelowana w osoby nie mające technicznej wiedzy o tym temacie, mająca na celu uproszczenie całego zagadnienia do jednego pojęcia.

w zasadzie poza kilkoma dodatkowymi tagami (których obsługa jeszcze kuleje ->video) praktycznie to wszystko było możliwe wcześniej ze starym poczciwym html4 uzbrojonym JSem (no i flashem, którego teraz się tępi w imię interesów jakiegoś innego konsorcjum). Jedyny zysk jaki widzę z promowania HTML5 to to, że ludzie wreszcie zaktualizowali przeglądarki. I tyle.

najwyraźniej pojęcia nie masz o różnicach między 5 a poprzednikami. przykładem jest choćby właśnie element poruszony w tym wątku

[HTML] pobierz, plaintext 
<a href="#"><div>coś</div></a>
[HTML] pobierz, plaintext 

który jest poprawny z punktu widzenia standardu (w poprzednich wersjach html/xhtml nie był). I takich zmian jest mnóstwo. Jeżeli Tobie to zwisa to w jakim celu włączasz się do dyskusji? Tylko po to żeby powiedzieć że zwisa Ci to czy tamto? Bo mnie to średnio interesuje, średnio ma to tez związek z tematem.


//EDIT:

@everth (na dole):

@devnull - twoje problemy w postrzeganiu świata nie są moimi problemami - potraktuj to jako podsumowanie całego swojego postu a dla mnie możliwość nabicia licznika. Zresztą mi to zwisa.

podobnie jak Twoje problemu w czytaniu nie są moimi problemami, jednak irytują mnie gdy przekręca się mojego nicka.

Ten post edytował devnul 23.09.2010, 15:13:00

[everth]

@devnull - twoje problemy w postrzeganiu świata nie są moimi problemami - potraktuj to jako podsumowanie całego swojego postu a dla mnie możliwość nabicia licznika. Zresztą mi to zwisa.

[essey]

Problem przy stosowaniu html5 i css3 pojawia się, jak już wspomnieliście, przy próbie stworzenia kompatybilnej witryny z wstecznymi przeglądarkami. Niemniej nie zniechęcam użytkownika do uczenia się i stosowania nowego języka.
HTML5 i CSS3 wciąż są w fazie "rozwojowej". To, że google pozwoliło sobie na wprowadzenie html5, tylko dowodzi, że my tego nie powinniśmy jeszcze robić Nie ukrywam, videoplayer na youtube w wersji beta napisany pod html5 jest wygodny.

Niestety często tworząc aplikacje dla klientów, musimy sięgać do rozwiązań, które nie zawsze idą z duchem czasu. W tym wypadku jest to html4. Dam sobie rękę obciąć, że to właśnie o tą wersję pytał "8rol". Dlatego też nie widzę potrzeby, aby podobne dywagacje miały tu miejsca. Odpowiedź została udzielona. Jeżeli chcecie popolemizować na ten temat, zapraszam do innego działu.

[devnul]

Problem przy stosowaniu html5 i css3 pojawia się, jak już wspomnieliście, przy próbie stworzenia kompatybilnej witryny z wstecznymi przeglądarkami. Niemniej nie zniechęcam użytkownika do uczenia się i stosowania nowego języka.
HTML5 i CSS3 wciąż są w fazie "rozwojowej". To, że google pozwoliło sobie na wprowadzenie html5, tylko dowodzi, że my tego nie powinniśmy jeszcze robić Nie ukrywam, videoplayer na youtube w wersji beta napisany pod html5 jest wygodny.

Niestety często tworząc aplikacje dla klientów, musimy sięgać do rozwiązań, które nie zawsze idą z duchem czasu. W tym wypadku jest to html4. Dam sobie rękę obciąć, że to właśnie o tą wersję pytał "8rol". Dlatego też nie widzę potrzeby, aby podobne dywagacje miały tu miejsca. Odpowiedź została udzielona. Jeżeli chcecie popolemizować na ten temat, zapraszam do innego działu.

no bez przesady to nie jest nowy język to jest rozbudowana wersja starego języka, różnic jest wiele, ale poprawnie napisany kod w html4 działa po naprawdę drobnych zmianach jako html5
polecam na początek i dalsze przegooglanie się przez temat. A to że google sobie pozwoliło to jest właśnie świetny argument za bo skoro oni docierając na setki różnych konfiguracji sprzętowo-softwarowych pozwolili sobie na taki krok to znaczy że jest to już na tyle bezpieczne że w obrębie storny którą odwiedzać będzie znikomy promil użytkowników internetu możesz sobie śmiało na to pozwolić

[essey]

@devnul, ja na to patrzę nieco inaczej. Google jest gigantem w branży informatycznej. Oni mogą sobie pozwolić na narzucanie własnego zdania na praktycznie każdy temat. Ludzie pomarudzą, pomarudza, a w rezultacie przyznają im rację. Oni tworzą trendy - że tak się wyrażę Wprowadzili HTML5, ale w tym samym czasie również Google Frame.
W wypadku klientów indywidualnych, kiedy on żąda, aby strona chodziła właśnie na JEGO komputerze, na JEGO przeglądarce, której używa od wielu lat, a jest staromodnym człowiekiem i nie lubi zmian, nie ma zamiaru instalować frame itd. to wdrożenie w pełni funkcjalnego CSS3 i HTML5 (bo to idzie w parze), jest niemożliwe.
A niestety, klient którego opisałem powyżej, to nie wytwór mojej wyobraźni, a smutny fakt polskiej szarej rzeczywistości. Klient nasz pan

I o ile w swoich projektach mogę wdrażać nowe wersje języków programowani, o tyle w wypadku projektów zewnętrznych niejednokrotnie jest to nieosiągalne. Czas to zmieni.

Ten post edytował essey 23.09.2010, 16:20:15

[devnul]

W wypadku klientów indywidualnych, kiedy on żąda, aby strona chodziła właśnie na JEGO komputerze, na JEGO przeglądarce, której używa od wielu lat, a jest staromodnym człowiekiem i nie lubi zmian, nie ma zamiaru instalować frame itd. to wdrożenie w pełni funkcjalnego CSS3 i HTML5 (bo to idzie w parze), jest niemożliwe.
A niestety, klient którego opisałem powyżej, to nie wytwór mojej wyobraźni, a smutny fakt polskiej szarej rzeczywistości. Klient nasz pan

zatrudnij handlowca, skoro klient nie rozumie że strony nie robisz dla niego tylko dla jego klientów/użytkowników a odsetek osób korzystających z przestarzałych rozwiązań jest coraz mniejszy w sporej części przypadków wręcz oscyluje na granicy błędu statystycznego. Jeżeli nie potrafisz wytłumaczyć że rzecz A jest dla niego lepsza niż rzecz B to działasz zarówno na swoją jak i na jego szkodę. Na swoją bo utrzymujesz obecny stan rynku, a czemu na jego szkodę to już tłumaczyć chyba nie trzeba

[8rol]

Może, nadaj

[CSS] pobierz, plaintext 
a {
display: block
}
[CSS] pobierz, plaintext 

? ;>

Od początku tak mam, jednak nic to przecież nie zmienia, gdyż dla walidatora liczy się poprawność szkieletu html.

Jeżeli chcesz zrobić to za pomocą div'a z powodu np. zawartości w nim (np. nie tylko link, ale jakieś ramki itd.), polecam korzystanie ze znacznika <span></span>, któremu również możesz nadać parametr display:block i pozycjonować wewnątrz <a></a>, a dodatkowo jest zgodny ze standardami.

Rozwiązanie też nie najlepsze, gdyż wewnątrz diva którego chce umieścić w <a> znajdują się inne divy, obrazki itp.
Zamiana głównego diva na span skutkuje tym, że pojawią się problem taki, że w elemencie liniowym <span> nie może znaleźć się blokowy div itd.

No nic, albo będę musiał tak to zostawić (div bezpośrednio jako nazwa hiperłącza [przy Document type html 4]) lub pomyśleć nad przejściem na html5.

Jak ktoś ma jeszcze jakaś koncepcję to chętnie ją poznam.
Pozdrawiam

[devnul]

to może zwyczajnie?

[HTML] pobierz, plaintext 
<div onclick="document.location='http://nowyadres.pl/';">costamwdivie</div>
[HTML] pobierz, plaintext 

[essey]

Początkowo zrobiłem to za pomocą zdarzenia onclick przypisanego do tego diva.

to może zwyczajnie?

[HTML] pobierz, plaintext 
<div onclick="document.location='http://nowyadres.pl/';">costamwdivie</div>
[HTML] pobierz, plaintext 

Uważne czytanie to klucz do sukcesu.

8rol możesz wkleić html ewentualnie screen efektu końcowego. Pomożemy Ci z skonstruowaniem tego w zgodzie z walidacją.

Ten post edytował essey 23.09.2010, 19:15:49