ipsace i tiskace

Pokud jste četli cestopisný spot, možná si vzpomínáte, že jsem slíbil, že se k výsledku výpravy vrátím. Ano, nelhal jsem, koho zajímá obsah, klikněte si na reportáž z Rigy a koukněte na zcela exklusivní fotky, v Česku dosud nezveřejněné.

Ale protože jsme v koutku webdesignu, musí mít tento spot ještě další důvod. A tím je provedení té stránky. Protože většina fotek je nočních, hned mě napadlo, že by se to v plejboji vyjímalo jako černá dvoustrana. Tak jsem z toho udělal megazínovou stránku na obrazovce vašich monitorů.

Pokud jste někdy měli v ruce časopis, jistě vás zarazilo několik věcí, které byly jiné, než jste zvyklí z webu. Ta nejmarkantnější je, že na žádné stránce magazínu na vás neciví po straně prázdné nevyužité místo. Oni to mršky v tiskárně vytisknou tak, aby se to na stránku vešlo tak akorát.

Naprotitomu, bohužel, většina webových stránek má nastavenu jakousi pevnou šířku, která je úplně jiná, než je šířka Vašeho okna, milé uživatelky. Takže pokud nechcete koukat na bílý papír nebo hnědou texturu, pokapanou od pomerančové šťávy, musíte si okno upravit podle fixního lejoutu autora. Jenže každý to má jinak velké a vy, milé uživatelky, se musíte neustále přizpůsobovat, nikdy to autor nevystihne tak, jak vy toužíte. Přestává to pro vás být potěšením.

S papírovým magazínem to je jiné. Obsah se trefí přesně do stránky, nikdy ho kus vpravo nechybí, magazín nemá dole žádný posuvník, jedině když redakce projeví originální smysl pro humor.

A právě takhle se to dá dělat i na webu. Nikdo se vás nebude ptát, proč to máte takhle nebo onakle. Autor se prostě okamžitě přizpůsobí vašim momentálním náladám a potřebám. A ty se mění, trochu vás, milé uživatelky, už znám. Budete to mít přesně tak, jak chcete, nezáleží na tom, jestli to chcete ve vlaku s mobilem, v kavárně se stařičkou patnáctkou monitorem, nebo doma na letišti s projektorem 3x2 metry. Nevěříte? Ukážu vám to, a budete to tak chtít už furt. Brzy nashle.

Hardcore CSS octavec

Řeč byla o flexi lejoutu. Na té stránce jsem si s tím trochu hrál a budu opravdu ráth, kdyby mi některý opravdový webmistr toto dílko zkritisoval.

Začnu já. Ten dokulata obtékaný text je tam v polovině stránky samoúčelný a asi se vám nebude líbit. Prostě jsem si to chtěl zkusit no... :-) (thx Dero)

Přišel jsem na několik pro mě neřešitelných mezí. Když chci obtékaný objekt nějak flexibilně pozicovat vzhledem ke spodnímu okraji, prostě to nejde. Ještě snesitelné je to vpravo (viz konec pvní půlky stránky) Ale k pravému okraji to jde jedině marginem jednotlivých octavců, což vytvoří dost ohyzdně vypadající schody, které navic v extrémních hodnotách rozměrů okna vůbec nestíhají.

Další zajímavý jev, který jsem dříve neznal:
Vpravo je několik plovoucích bloků, které mají clear:right; float:right. Když v kódu vytvořím nějaký blok plovoucí vlevo za posledním blokem vpravo, umístí se tento do úrovně posledního "odplavaného" bloku vpravo. Tedy ten blok vpravo ho s sebou odnese dolů, i když pro blok vlevo je dost místa vlevo nahoře. Řešení je posunout blok vpravo níže v kódu tak, aby byl za tím blokem vlevo. Vztekal jsem se nad tím docela dlouho, než jsem na to přišel.

Nevýhoda tohoto řešení je, že při velkém zúžení stránky se vpravo mezi plovoucími bloky může objevit vertikální octup, čili nebudou na sebe bezprostředně navazovat.

Další špek, který jsem si zkusil, je popis obrázků textem přes ně. Najedete-li na text myší, zmizí a vy máte fotku celou. Finta spočívá ve třídě schovej .schovej:hover {visibility:hidden}. Jenže ono to problikává, když přes to přejede myš. Ještě větší legrace byla, když jsem použil .schovej:hover {display:none}.
To to osciluje, i když na tom myší stojíte a nehýbete. Důvod je asi jasný.

Je to řehole, ale k fixnímu lejoutu se nesnížím :-)

Update, aby to neblikalo