Autor Zpráva
sjiamnocna
Profil
Ahoj.
Řeším program festivalu. Festival má několik míst, kde se konají přednášky, workshopy a koncerty. V jednom čase se může konat více akcí.
V systému mám o každém programu název, jméno organizátora, místo, čas zahájení a čas konce. Bloky by měly být široké podle délky trvání.
Chci nějakou časovou osu - nahoře časy, třeba po 2 hodinách od začátku dne. Místnosti by měly tvořit řádky, jednotlivé bloky (začátek a konec) by měly být zarovnány s časy v hlavičce programu (nemusí být zcela přesně) a místa mohou mít třeba jen jeden blok někde uprostřed, nebo na konci. Je to menší akce, takže první program v 8 - 10 a poslední cca v 20 - 22.
Každý blok bude obsahovat nějaké doplňující údaje, takže bude trochu větší.

Ilustrační obrázek :):


Jak to jen s HTML + CSS vytvořit?
Napadly mě flexy, ale nevím, nakolik jsou dnes již použitelné... Dále bootstrap, ale ten má jen 12 sloupců.
Nějaké nápady? Předem děkuji
Bubák
Profil
Pokud by byla zapotřebí sémantika, tak UL, LI, případně i A, po kliknutí by se otevřela stránka s podrobnostmi.
V CSS absolutně pozicované blokové elementy, pozice left podle začátku, right podle konce, width podle délky trvání.
Zkusím něco spáchat a dám tu odkaz.
Keeehi
Profil
+ pokud se na pozicování použijí procenta, tak to bude i gumové
Bubák
Profil
Živá ukázka
Odkaz
Časová osa by asi šla udělat elegantněji, ale teď mě elegantní řešení nenapadá.
Je to dělané tak, že 1 minuta odpovídá 3 pixelům, pozici a rozměry jsem počítal jsem v tabulkáči.

Keeehi:
+ pokud se na pozicování použijí procenta, tak to bude i gumové
I tak by to šlo.
sjiamnocna
Profil
@Bubák: Vypadá to dobře

Vyzkouším to s těmi procenty. Díky :)
Kajman
Profil
Když bude nadřazený div 100%=25 hodin, tak ty bloky pak mohou používat v left a width 1%=15 minut.

Nepotřebné hodiny ráno a večer by se schovaly kombinací zoomu (width>100%) a záporného left. Když by se pak přidalo něco před současný začátek nebo za současný konec, nemuselo by to celé přepočítávat a stačí spočítat jen ten zoom a posun.
sjiamnocna
Profil
@Kajman: To první jsem pochopil, ale co je to s tím zoomem? Že mi skončí jeden event v 13.00 a další je až v 16.00, tak se místo mezi nimi jakoby smaže?
Jak se smaže? Nechápu to
Keeehi
Profil
sjiamnocna:
Zoom je jenom potřeba, aby vycházely pěkně procenta. Pokud by byl celý program 25 hodiny, pak jedno procento odpovídá 15minutám. Což jsou hezká čísla. Ovšem ty nepotřebuješ 25 hodin. Takže použiješ zoom a s ním ořízneš přebytečné okraje. Nebo se vykašleš na zoom a hezká procenta a spočítáš si, že pro třeba osmihodinovou akci 5 minut je 0,96% a budeš počítat s trochu ošklivějšími čísly.
Kajman
Profil
Ne, myslel jsem to ještě trochu jinak.

Máte blok, který má 25 hodin (aby se to lépe dělilo) a nezajímá Vás prvních 10 hodin a posledních 10 (15-24 + 1 bonusová). Takže těch 5 hodin (10-15) můžete roztáhnout na plnou šířku rodiče. Tedy width bude 500% (100*25/5).

Ten blok bude v prvku, co má overflow:hidden, tak se přesahy nebudou zobrazovat. A aby byla desátá hodina na začátku nadřazeného boku, vypočítáte si ještě left nebo margin-left a tím ten zvětšený blok posunete doleva díky -50% (10*25/5).
Kajman
Profil
A pokud vlastně bude ten blok 100 hodin místo 25, tak 1% bude jedna hodina a ty barevné přednášky a koncerty se budou počítat ještě snadněji. Pokud to bude začítat v 10:15, tak left:10.25% (10 a čtvrt hodiny).

Živá ukázka
Odkaz

Pro hodně úzké zobrazení je možné ještě doplnit podmíněné kaskádové styly pro velikost písma.
Velikost písma podle šířky

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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