Autor Zpráva
stencek
Profil *
Dobrý den,

Řeším problém při tvorbě odkazu s pozadím, kde má byt text zarovnán na spod. Určitě jste se s tím již setkali. Máte náhled fotky, pod kterým je popis a vy chcete, aby se po najetí (ať už na popis nebo na fotku) prováděla stejná akce. Například aby fotka "ožila" barvami a odkaz pod fotkou se podtrhl (či naopak zbavil podtržení). Jak to ale vyřešit bez JavaScriptu a přitom validně?

Ukázku jsem dal na web, ať je to vidět: Vertikální zarovnání

CSS soubor najdete zde style.css

Mockrát děkuji za jakýkoliv nápad či radu.

S pozdravem J. Štencek
Joker
Profil
Řešení pomocí pozicovaného DIVu není validní, protože blokový prvek DIV do řádkového A nepatří.
...což se ovšem dá obejít. Blokový <div> sice validní není, ale <span style="display:block"> validní je.
Edit: myslím samozřejmě uvnitř odkazu
stencek
Profil *
Děkuji, zkoušel jsem snad všechno, ale ta nejjednodušší věc mě samozřejmě nenapadla. Ještě jednou moc děkuju J.Š.
Bubák
Profil
A co s fotkou, má být v tagu IMG, nebo jako obrázek na pozadí?
Chamurappi
Profil
Přesunul jsem dotaz do správné kategorie.
Edit: A nebo ne, přesunul jsem ho zase zpátky :-)

Reaguji na stenceka:
Element <div> v odkazu funguje, optimalizaci pro W3C Validátor bych neřešil, nikdo jím nebrouzdá.
stencek
Profil *
Chamurappi:
No přece jenom řešení se spanem je šikovnější. A když už ne kvůli W3C, tak aspoň pro vlastní klid duše ;)
Joker
Profil
Chamurappi
Odbočka, doufám že nevyvolám nějaký flamewar zas O:-)
Element <div> v odkazu funguje
Z vlastních zkušeností bych podobný způsob uvažování "normálnímu kodérovi" rozhodně nedoporučoval.
Vody "občas fungujících porušení pravidel" jsou podle mě dost zrádné a zanést si tak do kódu mimořádně špatně odhalitelné chyby je snadné.

Nezpochybňuju že to funguje, jen říkám, že pro "normálního smrtelníka" je daleko snazší si pamatovat / validátorem ověřit jednoduché pravidlo ("blokový prvek do řádkového nepatří"), než si pamatovat seznamy prvků, co uvnitř čeho funguje a nefunguje.
habendorf
Profil
Tak především, další element, ať už div, nebo span, je tam zcela zbytečný.

<a><img>text</a>

a {display:block;border:xxx;text-align:center;}
a img {display:block;margin-bottom:xxx;}
habendorf
Profil
Jo ono to má asi být backgroundem. No pak je to ještě mnohem jednodušší - stačí padding.
stencek
Profil *
paddingem bych asi neuspel u Exploreru ;)
habendorf
Profil
paddingem bych asi neuspel u Exploreru ;)

Co to? Hlavně se vyjádři, jestli chceš img nebo background.
stencek
Profil *
Už svým druhým příspěvkem jsem poděkoval za řešení Jokerovi ;) A ano..chtěl jsem background - tak je to napsané i zde.
habendorf
Profil
Budiž, chtěl jsem ti dát lepší řešení, ale tvoje věc.
Joker
Profil
Budiž, chtěl jsem ti dát lepší řešení, ale tvoje věc.
Však i my ostatní se můžeme poučit.

Ale už mě to trklo taky: obrázek dát rovnou na pozadí odkazu a nastavit padding-top na výšku obrázku plus nějaké drobné, žejo? ;-)
Chamurappi
Profil
Reaguji na Jokera:
Vody "občas fungujících porušení pravidel" jsou podle mě dost zrádné
Najednou.

jen říkám, že pro "normálního smrtelníka" je daleko snazší si pamatovat jednoduché pravidlo ("blokový prvek do řádkového nepatří")
Ale když ho zjednoduší moc, tak si neuvědomí, že může dát blokový <span> do <a>.


Reaguji na stenceka:
Jsi normální smrtelník? Jestli ano, tak to ti nezávidím, protože se spoustu zajímavostí vůbec nedozvíš (a navíc umřeš).

Edit: No dobře, tak lomítka v <br/> řešit nebudeme, aby Plaváčka nepřestalo bavit sem chodit.
Plaváček
Profil
Chamurappi

Nejsem moderátor, ale nešlo by zařídit, aby se všichni drželi tématu a odpovídali na danou otázku?

O lomítkách si přece můžete pokecat v jiném vlákně. Při vší úctě k novému moderátorovi musím říct, že už mě přestává bavit sem na diskusi chodit, protože v tématu o CSS, kam jsem se uchýlil, bych neočekával další neplodné diskuse o problémech, výhodách, nevýhodách a podobných sproných teoretických otázkách týkajících se jiných, k tomu přímo určených sekcí.

Tazatel se zeptal, dostal odpověď, habendorf navrhl kvalitní a šikovné řešení a span není blokový prvek.
Joker
Profil
Chamurappi
Podle mě zvyknout si, že blokový prvek může být uvnitř řádkového není "v praxi neškodné", podle mě je to naopak zdroj těch snad nejhnusnějších chyb, které člověk může na stránce udělat.
Nejhnusnějších proto, že při pohledu na kód všechno vypadá v pořádku, akorát to prostě nefunguje. Stalo se to mně, stalo se to větším profíkům na weby než jsem já, nedoufal bych, že začátečníkovi se to nikdy stát nemůže.


edit: zatímco jsem měl asi hodinu rozepsaný příspěvek, zbytečnost řešení lomítek v tomhle tématu už byla vyřešena.
stencek
Profil *
Vyzkoušel jsem i habendorfovo řešení. Díky za něj - je opravdu jednodušší a elegantnější. Já jsem nakonec stejně použil span, protože jsem text v odkazu potřeboval mírně napozicovat a k tomu se mi to skvěle hodí.

Chamurappi: Považuji se za normálního smrtelníka. Magické schopnosti a nesmrtelnost bych připsal spíše JESPRu ;) Ale i jako obyčejný smrtelník bych se rád dozvěděl zajímavé věci..a myslím, že mi v tom ani nic nebrání.
Plaváček
Profil
stencek

Pak doporučuji toto vlákno: http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=10&topic=1 1358 . S CSS problematika lomítek nesouvisí.
stencek
Profil
Plaváček: Toho jsem si vědom, taky jsem zde žádnou diskuzi o "xHTML vs. HTML" nezačínal.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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