| Autor | Zpráva | ||
|---|---|---|---|
| Petr ZZZ Profil |
#1 · Zasláno: 11. 1. 2010, 19:50:19 · Upravil/a: Petr ZZZ
Že element <a> je řádkový a neměl by obsahovat blokové, jsem začínal tušit velmi pozvolna v průběhu dlouhých měsíců. O to větší je moje radost, když teď čtu, že se do něj přece jen bloky dají nacpat a validita ať si v nejhorším validuje třeba sama sebe. Jak je to ale doopravdy? Pokusil jsem se sestavit jednu tak trochu krkolomnější věc. Podle toho, zda v <a> jsou nebo nejsou bloky, funguje nebo nefunguje u odkazů hover tak, jak ho chci mít. Kód osekaný na to podstatné je zde dole a tady je živá ukázka.
To celé (obrázek a text pod ním) má klikat na úvodní stránku webu, ať kliknu na obrázek nebo na text nebo na černou plochu mezi tím. Je tam to samé třikrát, s rozdílnou funkčností. Pro lepší orientaci v kódu a na stránce jsou ty tři varianty oddělené čárkami ( — — — ), hvězdičkami (***) a křížky (+++). Hover textu takový, jaký ho chci mít, je pouze u první varianty, která jako jediná nemá v <á>čku blokové prvky; zato zde nekliká černá plocha nalevo a napravo od textu. A v IE6 ani u jedné z těch tří variant nekliká obrázek (v FF kliká; jiné prohlížeče jsem nezkoušel). Dá se to udělat pomocí HMTL a CSS tak, aby byl hover jako u první varianty a aby klikalo všechno? Byl bych moc rád, kdyby se na to mohl někdo mrknout, zda to prostě nejde, nebo zda tam mám, kromě těch bloků v <á>čku, ještě nějaké další chyby. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body { background-color:#300; color:#C90; font-family:Arial,Helvetica,sans-serif; font-size:1.2em; }
.bol { font-weight:bold; }
.cbs { background-color:#000; }
.ce { text-align:center; }
.fsm { font-size:1.2em; }
.fsp { font-size:1.5em; }
.ftxbs a:link { padding: 0em 0.3em 0em 0.3em; border: solid 0.1em; border-color:#000;
background-color:#000; color:#FF6; text-decoration:none; }
.ftxbs a:visited { padding: 0em 0.3em 0em 0.3em; border: solid 0.1em; border-color:#000;
background-color:#000; color:#FC0; text-decoration:none; }
.ftxbs a:active { padding: 0em 0.3em 0em 0.3em; border: outset 0.1em; border-color:#000000;
background-color:#000; color:#FF9; text-decoration:none; }
.ftxbs a:hover { padding: 0em 0.3em 0em 0.3em; border: outset 0.1em; border-color:#000;
background-color:#FC3; color:#630; text-decoration:none; }
.lhh { line-height:140%; }
.lhk { line-height:200%; }
.pic { margin-top:0.4em; margin-bottom:0.4em; padding: 0.01em; border:outset 0.2em;
border-color:#FC0; }
.haj { height:10px; }
p { margin:20px 10px 40px 10px; }
</style>
</head>
<body><a name="oben"></a>
<div class="cbs"> </div>
<a href="index.htm">
<marquee class="cbs" direction="left" scrollamount="1"
title=" Start " >
<img src="aaa.jpg"
class="pic" width="1094" height="400">
</marquee>
</a>
<div class="ftxbs cbs">
<marquee class="cbs fsp bol" behavior="alternate" scrollamount="1"
title=" Start ">
<p><a href="index.htm">
Text <br>
a další text. <br><br>
A zase nějaké <br>
povídání.
</a></p>
</marquee>
</div>
— — — — — — — — — — — —
<div class="ftxbs">
<a href="index.htm" class="ftxbs">
<marquee class="cbs" direction="left" scrollamount="1"
title=" Start " >
<img src="aaa.jpg"
class="pic" width="1094" height="400">
</marquee>
<div class="ftxbs cbs">
<marquee class="cbs fsp bol" behavior="alternate" scrollamount="1"
title=" Start ">
<p>
Text <br>
a další text. <br><br>
A zase nějaké <br>
povídání.
</p>
</marquee>
</div>
</a>
</div>
* * * * * * * * * * * * * * * * * * *
<a href="index.htm" class="ftxbs">
<marquee class="cbs" direction="left" scrollamount="1"
title=" Start " >
<img src="aaa.jpg"
class="pic" width="1094" height="400">
</marquee>
<div class="ftxbs cbs">
<marquee class="cbs fsp bol" behavior="alternate" scrollamount="1"
title=" Start ">
<p>
Text <br>
a další text. <br><br>
A zase nějaké <br>
povídání.
</p>
</marquee>
</div>
</a>
+ + + + + + + + + + + + + + + +
</body></html> |
||
| Str4wberry Profil |
#2 · Zasláno: 13. 1. 2010, 19:36:59
Ten nefunkční :hover je podle mě způsoben pouze špatně zapsanými selektory.
Je třeba si uvědomit, že „.ftxbs a“ chytne všechna <a> v něčem s „class=ftxbs“, ale nechytne <a class=ftxbs>. Potom taky dáváš border a background celému <a>, ale ne pouze tomu odstavci, kterému asi chceš („a:hover div marquee {}“ pro třetí případ). Explorer 6 u sebe nemám, takže se nemohu na „neklikatelnost“ podívat, ale ve všech ostatních prohlížečích mně kliká. Nechybí tam třeba jenom kurzor ruky? Příště zkus možná popsat svůj problém stručněji a v ukázce použít srozumitelnější třídy, podle mě to odrazuje případné rádce. |
||
| Bubák Profil |
#3 · Zasláno: 14. 1. 2010, 00:02:11
Str4wberry:
„Příště zkus možná popsat svůj problém stručněji a v ukázce použít srozumitelnější třídy, podle mě to odrazuje případné rádce.“ To byl můj případ, kdyby Petr ZZZ vytvořil tři malé živé ukázky, tak bych to zkouknul, i když IE6 také nemám. |
||
| Petr ZZZ Profil |
#4 · Zasláno: 15. 1. 2010, 17:19:10 · Upravil/a: Petr ZZZ
Str4wberry:
Předně dík za reakci! „Je třeba si uvědomit, že ‚.ftxbs a‘ ..... nechytne <a class=ftxbs>.“ Ano, v tom vidím problém, ale jak to řešit? Právě že první varianta má třídu ftxbs v nadřazeném elementu, jen druhá a třetí přímo v <a>. A první z těch tří příkladů má taky nejblíž k tomu, jak bych to chtěl mít. Text kliká ve všech třech variantách, ale jen v první má požadovaný hover. Právě v té první ale nekliká černá plocha vedle textu (v ostatních dvou kliká, ty ale zas mají nehezký hover). Dále: V IE6 klikají černé plochy vedle obrázků, ačkoli se nezobrazuje kurzor ruky, ale nekliká ani jeden z těch tří obrázků (a taky se tam nezobrazuje ruka). Ve FF klikají všechny tři obrázky (a zobrazuje se ruka). Zajímavé je taky, že v druhé variantě funguje u hoveru barva textu, ale ne barva jeho pozadí (týká se jak IE6, tak FF). Třída, která má dělat hover, je ftxbs, a je u všech tří variant stejná, pouze v kódu rozdílně umístěná. „...srozumitelnější třídy“ Ty třídy mají názvy podle jakéhosi mého systému (např. ftxbs = Fließtext background schwarz) a nechal jsem je takové, jak jsem na ně zvyklý, protože tu ukázku už nechci z webu mazat, tak abych v tom neměl větší zmatek než je nezbytně nutné. Snažím se o co nejkratší názvy tříd, ale takové, abych měl šanci znát je zpaměti (vysvětlující příklad). V tom příkladu na marquee je celkem 12 tříd a všechny jsou v hlavičce; doufal jsem, že je to zvládnutelné. „stručněji“ Snažím se, seč můžu. Bubák: „...tři malé živé ukázky“ Ony to v podstatě jsou tři ukázky, holt v jednom souboru. Jedna končí řadou čárek, druhá řadou hvězdiček a třetí řadou křížků: — — — — — — — — — — * * * * * * * * * * * * * * + + + + + + + + + + + + Všechny ty řady jsou dobře vidět jak v kódu, tak v prohlížeči. Doufal jsem, že to bude dostatečně přehledné. Tříd je dvanáct, všechny v hlavičce, ta je společná všem třem ukázkám. Každopádně dík za snahu. „...i když IE6 také nemám.“ Vetšina problémů se týká i FF (a asi i jiných prohlížečů). |
||
| Plaváček Profil |
#5 · Zasláno: 15. 1. 2010, 17:35:46
Petr ZZZ:
Mohu mít jednu otázku trochu mimo? Proč něco podobného řešíš? Má to nějaký praktický užitek? A připojuji se k Bubákovi, dloubat se v docela nepřehledném a dlouhém kódu se mi taky nechce. |
||
| Petr ZZZ Profil |
Plaváček:
„Proč něco podobného řešíš?“ Chtěl bych si zrobit stránku, po které budou jezdit písmenka a obrázky a současně bude celá stránka klikat. :-) „Má to nějaký praktický užitek?“ Ano. Tedy – doufám. Chci na té stránce transportovat myšlenku ochrany přírody, a sice vědecké ochrany přírody na základě podrobného poznání druhového bohatství. Což přesahuje rámec průměrného vnímání přírody výletníkem jako pouhé "zeleně na čerstvém vzduchu", i rámec průměrného vnímání přírody nimrodem jako okolí srnky. V té "zeleni" lezou broučci, mnozí jsou ale na pokraji vyhynutí a nikdo o nich neví. Máš rád kytky? Nebo máš ještě radši, když na nich sedí motýli, zdobenci, krasci, další krasci, tesaříci a další tesaříci? O tom to je. V té jedné větě pod obrázkem je shrnuto poselství, které jsme s kolegou tuhle publikovali na papíře v periodiku určeném cílové skupině (na požádání můžu zaslat pdf mejlem; kontakt je na mém webu): Č., L. & Z., P. (2009): Nejohroženější obyvatelé jihomoravského luhu. Lesnická Práce 2009/12. Kostelec nad Černými lesy. S. 28-29. „dloubat se v docela nepřehledném a dlouhém kódu se mi taky nechce.“ Škoda. Ale nevadí, ona ta první varianta je celkem funkční. Že nekliká černá plocha vedle textu, se dá zkousnout. Mě prostě zajímalo, zda jde dát do <a> blok a jsem zajedno s Chamurappim, když říká, že nelze rozumně zdůvodnit, proč by to mělo být zakázané. Však to taky – i když ne úplně na sto procent – funguje, validita sem nebo tam. Chtěl jsem vědět, zda to jde napsat tak, aby to fungovalo na 100%. |
||
|
Časová prodleva: 6 měsíců
|
|||
| Bubák Profil |
#7 · Zasláno: 15. 7. 2010, 01:24:25
Tož jsem to otestoval, i když jen v běžných prohlížečích a jde to.
|
||
| Nox Profil |
#8 · Zasláno: 15. 7. 2010, 07:30:50
Podle HTML5 už má normálně být i možné nacpat blok do odkazu, jinak dnes to samozřejmě funguje, jen není validní + když to dáš přes CSS na blok tak ještě víc v pohodě
|
||
|
Časová prodleva: 5 dní
|
|||
| Petr ZZZ Profil |
#9 · Zasláno: 20. 7. 2010, 09:11:36
Bubák, Nox:
Díky moc! :-) |
||
|
Časová prodleva: 14 let
|
|||
0