Autor Zpráva
André
Profil *
Ahoj, potřeboval bych, aby toto http://kod.djpw.cz/beeb vypadalo jako chlívek s fotkou na této stránce www.allmusic.com/genre/country-ma0000002532.

Nejsem profík a nenapadá mě, jak hodit tu opacitu dolů a jak tam vrazit text, zdroják na tom webu je plnej vaty.
Předem děkuju.
Bubák
Profil
Kokni na http://kod.djpw.cz/eeeb, není to hotové, ale snad si dál poradíš.
Doporučuji k přečtení http://jecas.cz/opacity, abys věděl, jaké jsou možnosti, pokud chceš průsvitné pozadí pod textem na neprůsvitný text.
Fisir
Profil
Reaguji na André:
jak hodit tu opacitu dolů
Nadřazenému divu dáš position: relative a divu s opacity position: absolute; left: 0; bottom: 0;.

jak tam vrazit text
Normálně jej vepíšeš. Ale neuvidíš jej, protože je stejně jako pozadí psaný černým písmem. Navíc používáš vlastnost opacity, která zprůhlední celý element, ne jen jeho pozadí (jak je to na tvé ukázce). Tudíž budeš muset použít zápis barvy v rgba v kombinaci s nějakým šířeji podporovaným zápisem barvy (tudíž třeba nejdříve deklarace ve formátu rgb a až poté to přebít zápisem v rgba, který zohlední jen ty prohlížeče, které jej podporují).

Živá ukázka.
Bubák
Profil
Fisir:
Tudíž budeš muset použít zápis barvy v rgba.
RGBA barvy nemají stoprocentní podporu, doporučuji použít nějaké kompatibilnější řešení.
Fisir
Profil
Reaguji na Bubáka:
V živé ukázce je to řešené kombinací rgb a rgba.
André
Profil *
Díky oběma.
Trochu jsem to poupravil a z obrázku udělal odkaz. http://kod.djpw.cz/ieeb
Tři věci, které by bylo vhodné vyladit:
1. Jak udělám, aby se už při najetí na obrázek barvil pruh, ne jenom při najetí na pruh?
2. Udělalo se likatelné bílé místo vedle obrázku, což je nežádoucí, kdybych dal dva obrázky vedle sebe. Jak udělat klikatelný jen obrázek?
3. Neprůhledná barva textu. Není to tak akutní jako předešlé dva body, ale vyřešení by bylo fajn. Rád bych to měl přes opacity a plně kompatibilní s prohlížeči napříč různými zařízeními, s tim rgba mi to nepřijde moc standardní.
Fisir
Profil
Reaguji na André:
Ad 1) Místo .pruh:hover dej a:hover .foto .pruh.
Ad 2) Ve kterém prohlížeči? V IE 11 se nic takového neděje.
Ad 3) Smaž opacity a za deklaraci background-color přidej další, u .pruh background-color: rgba(0, 0, 0, 0.5) a u :hoveru background-color: rgba(0, 153, 204, 0.5). Pokud prohlížeč podporuje rgba, .pruh bude průhledný, pokud ne, bude neprůhledný.
juriad
Profil
3) Nebo vytvořit dva překrývající se pruhy.
První (spodní) bude mít opacity, ale jinak bude prázdný a ten druhý bude mít průhledné pozadí a bude obsahovat text.
André
Profil *
Fisir:
Paráda, takže všechny body pořešeny, jen zbývá bod č. 2, klikatelný pruh přes celou šíři stránky mimo obrázek. V IE 10 bez problému, ale Firefox a Chrome to tak zobrazuje.
Nejaktuálnější kód - http://kod.djpw.cz/neeb či přímá ukázka http://jsfiddle.net/we7Aa/embedded/result/

Juriad:
Takhle nějak, že? To mi přijde jako shůdnější varianta.
http://kod.djpw.cz/oeeb
Fisir
Profil
Reaguji na André:
Nastav .foto display: inline-block.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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