Autor Zpráva
miamia
Profil
zdravim,
prosim Vas, ako mam spravit nieco taketo ako na http://www.dnv.com/moreondnv/
ked prejdete mysou napr na "Corporate Responsibility" tak sa cely div stane klikatelnym.
maju to prepojene na obrovsky js subor, ktory robi to kuzlo. tento subor ma vyse 8000 lines, neporadil by niekto, ktore riadky treba vyextrahovat z neho, aby mi to fungovalo tiez?

dakujem moc

Moderátor Chamurappi: Tvůj projev je špatně srozumitelný, piš prosím s diakritikou.
helda
Profil
Ahoj,

Osobně si myslím, že sem je zbytečné plést javascript. I když by se mnou někteří mohli nesouhlasit.
Vše to co tu uvádíš by mělo jít udělat v CSS....

1) Klikatelný div
<a href="xxx" id="klik"><div class="div"></div></a>

2) CSS div si nastyluj jak chceš.... Zde uvádím příklad na zbarvení pozadí klikatelného divu.
#klik a:hover {
  text-decoration: none;
  background-color: gray;
}


P.S. Nezloušel jsem funkčnost, ale mělo by to fungovat.
P.S.2. Pokud by jsi chtěl/a, aby ta barva (v mém příkladu šedá) byla průsvitná, tak si ji budeš muset vytvořit v nějakém grafickém editoru.
panther
Profil
helda:
1) Klikatelný div
blokový div do řádkového odkazu?

Zde uvádím příklad na zbarvení pozadí klikatelného divu.
uvádíš špatně. Žádný odkaz uvnitř #klik není.

P.S. Nezloušel jsem funkčnost, ale mělo by to fungovat.
nebude, viz výše.

P.S.2. Pokud by jsi chtěl/a, aby ta barva (v mém příkladu šedá) byla průsvitná, tak si ji budeš muset vytvořit v nějakém grafickém editoru.
a opacity v CSS je vzduch?


miamia:
obrovský JS soubor se mi procházet nechce, ale když už to má být s vypnutým JS nefunkční, proč nepoužít obyčejný onclick s přesměrováním na podstránku na tom divu?
Trejpa
Profil
helda:
Zanořovat blokové elementy do řádkových je prasárna. Příklad tvého stylu na uvedeném HTML se nijak neprojeví.

miamia:
Na dané stránce hlídá javascript prvky se třídou linkedActive. Jakmile je nad nimi myš, změní jim třídu (pro kterou je v CSS nastaveno šedé pozadí a klikavý kurzor) a nastaví klikatelnost (zřejmě přes onclick) s adresou podle aktuálně zanořeného odkazu s třídou linkedSource.

Jednoduše toho lze docílit třeba takto:
<style>
.klikave:hover { cursor: pointer; cursor: hand; background: #eee; }
</style>
<div class=klikave onclick="window.location='http://djpw.cz/'">
obsah bloku…
</div>


Jednodušeji bez skriptů (a vytahování nebo zdvojování adresy odkazu) pomocí řádkových elementů:
<style>
a.klikave, a.klikave b { display: block; }
a.klikave:hover { background: #eee; }
</style>
<a href="http://djpw.cz/" class=klikave><b>Nadpis</b> <img src=obrazek.gif> popis</a>
Chamurappi
Profil
Reaguji na panthera:
blokový div do řádkového odkazu?
Odkaz je řádkový jen ze zvyku. Sémanticky vzato tohle ničemu nevadí.

a opacity v CSS je vzduch?
To zprůhlední všechno, nejen barvu pozadí.


Reaguji na miamiu:
Na odkázané stránce to je nejspíš řešené nějakým onclickem, ale nebál bych se použít obyčejný odkaz — zabalit do něj vše, co má odkazovat. Můžeš mu nastavit display: block a strčit do něj, co hrdlo ráčí, celkem bez problémů.
Edit: Pozdě.
Keeehi
Profil
helda, panther, Chamurappi:
Já osobně v odkázaném případě nevidím div, na který by se mělo klikat. To že si miamia myslí že tam je, ještě neznamená že tam je.co já vidím je toto:

<a href="/moreondnv/cr/" class>Corporate responsibility</a>
a v css k tomu paří toto: display: block;padding: 0.6em 0.7em 0.7em; což rozšiřuje klikatelnou oblast odkazu. IMHO miamia si myslela že za toto rozšíření může div, ovšem on to je padding.
Chamurappi
Profil
Reaguji na Keeehiho:
Ten padding je mrňavý, klikatelný je skutečně celý <div>. Stará se o to JavaScript. I hover efekt tam má na svědomí skript měnící třídu.
Nevýhoda a zároveň symptom takového řešení mimochodem je, že cíl nejde otevřít prostředním tlačítkem myši do nového tabu, ani přidat k oblíbeným, ani… ani nic jiného, co je obvyklé u odkazů.
miamia
Profil
ten div vyzera takto:

<div class="item">
<div class="image"><img src="/binaries/NEW%20supporting%20graphic%2024-100x81px_tcm4-261136.jpg" alt="" /></div>
<h4><a href="/moreondnv/cr/index.asp" >Corporate Responsibility</a></h4><p>DNV ensures that Corporate Responsibility (CR) is an integral part of its management system and business culture. This means staying ahead in all facets of sustainable development: economically, environmentally and socially. </p></div>

a javascript kod v subore z <head> sa postara o to, aby to bolo klikatelne podla ahrefu. no a ja by som chcel zistit, co mam pouzit, aby mi to tiez fungovalo pri rovnakom zapise divov.dik
Trejpa
Profil
miamia:
Popis fungování skriptu a jednodušší alternativy jsi dostal. Nechceš-li se v tom hrabat, tak máš smůlu, nám se také zadarmo nechce (my to ale na rozdíl od tebe nepotřebujeme). Má-li to pro tebe někdo naprogramovat, tak se ptej v sekci Práce a zakázky. Nebo si ten skript zkopíruj a použij ho celý.
Bubák
Profil
Nebo to udělej podle připravovaného HTML5:
<!DOCTYPE HTML>
<style>
a	{background: #eee; display: block; text-decoration: none;}
a:hover	{background: #def;}
</style>

<a href="#">
<h1>nadpis</h1>
<p>odstavec</p>
</a>

Nemám jak vyzkoušet, zda a jak jak to funguje ve starších IE, bylo by dobré, aby to fungovalo minimálně v IE6.
Chamurappi
Profil
Reaguji na Bubáka:
bylo by dobré, aby to fungovalo minimálně v IE6
Funguje to i v pětce. Je to dost spolehlivá konstrukce, přestože se jí mnoho lidí bojí.
Petr ZZZ
Profil
Bubák:
Inspiroval jsem se Tvým kódem – za který Ti děkuji :-) – a vyplodil toto (testováno v IE6):

<!DOCTYPE HTML>

<style>
html         { background-color:#ff0; }
a            { display: block; text-decoration:none; padding: 10px; border: outset 20px; }
h1, h2, h3, h4, h5, h6, p { margin:10px; }
.aaa a:link        { border-color:#f00; background-color:#0f0; color:#000; }
.aaa a:visited     { border-color:#f00; background-color:#3c3c3c; color:#fff; }
.aaa a:active      { border-color:#0f0; background-color:#00f; color:#000; }
.aaa a:hover       { border-color:#00f; background-color:#036; color:#03f; }
</style>

<div class="aaa">
    <a href="index.htm">
        <h1>Nadstavec</h1>
        <p>Podstavec</p>
    </a>
</div>

<p>A nějaké další zajímavosti...</p>

Za barvy a široký rámeček se omlouvám, ale to se dá pozměnit, že. :-)

P.S. Připomnělo mi to jeden můj starší problém, možná ho tak nějak podobně nakonec vyřeším:
Lze nacpat element <marquee> a další bloky do odkazu?
miamia
Profil
vďaka všetkým za rady, ničmenej skúsim sa v tom ešte pohrabať, lebo zbytočne baliť do <a> elementy p a h mi akosi nevonia.
ale ak by ste niekto na presne rovnaké riešenie došli skôr ako ja, alebo našli na nete, sem s ním :-) diky
Petr ZZZ
Profil
miamia:
lebo zbytočne baliť do <a> elementy <p> a <h> mi akosi nevonia.

Odhaduji, že stačí jeden z nich, nebo zkrátka nějaký jiný blokový prvek. Určitě lepší, než to řešit přes JavaScript.
Bubák
Profil
Chamurappi:
Funguje to i v pětce. Je to dost spolehlivá konstrukce, přestože se jí mnoho lidí bojí.
Díky za info, přiznávám, že jsem teprve ve stádiu překonávání strach z uvedené konstrukce. Až budu mít čas a náladu, tak to vyzkouším i v zřídka používaných prohlížečích, počínaje prohlížečem Amaya a w3m konče.
Koukám, že obavy překonávám poměrně dlouho, už je to delší dobu, co jsem četl třebas:
http://diskuse.jakpsatweb.cz/?action=vthread&forum=10&topic=104984#5

Petr ZZZ:
Prosím oprav si překlep v [#10]: text-decoation (chybí r)
Díky za upozornění, tuhle deklaraci jsem tady přidal až po otestování kódu, proto mi překlep uniknul.

miamia:
zbytočne baliť do <a> elementy p a h mi akosi nevonia
Já pomalu překonávám obavu a začínám si zvykat. Ale myslím si, že možnost obalit cokoliv odkazem je lepší, než jeden z návrhů jakési specifikace (tuším, že XHTML2, ale to nepovažuji za důležité), aby jakýkoliv element mohl být odkazem, tedy že by mohl mít atribut "href".
Ostatně, několik návrhů řešení jsi dostal, musíš se s tím poprat sám.
mckay
Profil
Jen, jestli se můžu vložit, tím způsobem, kterým to ukazoval Trejpa (display: block;), to dělám, dělá to dost ostatních lidí a myslím, že je to tak správně. Ostatně je to validní zápis :).

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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