Autor Zpráva
Dranel
Profil
Zdravím,
hned na úvod bych rád řekl, že toho není tolik, jak to na první pohled vypadá. Nuže. Již nějaký ten den řeším problém týkající se kulatých rohů. Mé požadavky jsou zhruba následovné:

– Mít pouze jeden HTML kód (co nejvíce sémantický = co nejméně zbytečných prvků), kterým mohu obalit jak řádkové, tak blokové elementy (takže jak jedno slovo, tak i celý odstavec)
– Mít co nejméně CSS kódu, který rozezná (při nejlepším automaticky, při nejhorším pomocí použití dvou různých tříd v HTML kódu), zda-li se jedná o řádkový (viz náhled) či blokový (viz náhled) element
– Výsledek musí být fluidní dle obsahu, nikoli fixní na určitou šířku/výšku. To znamená že když to místo jednoho slova budou dvě nebo když v odstavci zvětším písmo, nic se nerozsype.
– Rohy musí být průhledné. Tzn, že na nich nebude zub, když daný prvek podložím například fotkou. Nebo jinak: Pokud změním v následujících příkladech barvu na pozadí, plynně se tato barva zdědí i na rohy a nikde nemusím nic víc měnit. To znamená, že se používá průhledný obrázek a vše se řeší přes barvy na pozadí různých prvků.
– Žádné použití JS ani ničeho jiného. Opravdu čistě jen HTML+CSS.
– Totožné zobrazování ve všech místních majoritních prohlížečích. To znamená IE6, IE7, FF3, OP9 i Chrome.
– Pro své příklady prosím používejte kostru, jakou mají oba níže uvedené příklady. Jde hlavně, aby různé dílčí kódy měly nějakou formu, aby se v tom člověk vyznal a aby byl prohlížeč díky DOCTYPU ve standardním režimu.
– Snažte se použít co nejméně obrázků, nejlépe jeden, konkrétně tento.
– Cílem je udělat co nejjednodušší řešení, takže se prosím vyhněte řešením jako jsou Nifty corners, různé znaky místo obrázků a tak podobně.

1. řešení:
– Problémem je, že při změnění barvy na pozadí zůstanou na rozích zuby. Podklad každého rohu je totiž určen zvlášť ve stylu. Výhodou je malá výška u inline elementu.

2. řešení:
– Peoblémem je tentokrát naopak výška, kdežto rohy jsou zde v pořádku. Schválně si skuste změnit barvu pozadí, rohy to nerozhodí.

U obou příkladů je hlavním problémem neuniverzálnost na inline/block elementy - musí se určit ručně - třídou. Tak co, pokusí se někdo vyřešit tento zdáním malý problém? Budu vděčný i za jakoukoli radu či dílčí kód.
Dranel
Profil
Ále notak, chlapi. Snad jste se nelekli takového zadání :-). Takoví chytří lidé se tu pohybují a najednou jsou všichni sticha... opravdu budu vděčný i za jakýkoli nápad, který mě třeba i jen malinko posune k cíli ;-)
RockFire
Profil
Nechápu, co je za problém u druhého řešení... Jako že je to moc vysoké? Pokud ano, dej padding na 0.
Nox
Profil
RockFire
A zkoušel jsi to? Na tom paddingu je totiž založené vykreslení, jediné co mi šlo byl záporný margin na cornerscenter, ale to pak nebylo hezké
Dranel
Profil
RockFire
Díky, i snaha se cení. Bohužel je to tak, jak píše Nox.
Dranel
Profil
Tak jo, já to teda zjednoduším, protože takto to asi nepůjde:

Stačí, když bude jen jeden HTML kód a výsledek (inline/block) se bude měnit pomocí třídy aplikované na obalový element :-)
yFang
Profil
Zkoušeli jste se dívat na to 2.řešení v IE7?
Mezi rohami na výšku není černá, ale bílá.
Dranel
Profil
yFang
Díky za upozornění. Ale jak jsem již (možná) psal: Ani jedno není dokonalé - kdyby bylo, nic bych tu nemusel řešit ;-)
yFang
Profil
Dranel
Zkus tohle (jestli jsi to ještě nenašel):
http://www.smileycat.com/miaow/archives/000044.php
je tam docela dost řešení, třeba ti nějaké bude vyhovovat.
Dranel
Profil
yFang
Díky, našel. Právě to procházím - už jsem za půlkou ;-)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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