Pixylophone - archiv

Skákající C a Č

Další dva příspěvky do sbírky Skákal pes — tentokrát na písmena C a Č. Přičemž přiznávám upřímně, že s tím "C" to není tak docela košer, protože při nejlepší vůli se mi tam nepodařilo dostat ani psa, natož myslivce. Ale snad mi to projde i tak...

Kořenky

To je taková malá záhada... Nemůžu sehnat vhodné kořenky. (To jsou takové ty lahvičky s víčkem, co se do nich dává celý pepř, zázvor, koriandr a jiné sušené bylinky — to jen tak na okraj.) Jenže nejlevnější, co jsem zatím viděl, stály kolem 30 korun (za jednu a ještě nic moc pěknou), většinou se ale pohybují spíš kolem 50 Kč za kus, a výš. Tak jo, jeden by si řekl "kořenky jsou prostě drahá sranda, co naděláš". Ale pak mi ovšem vysvětlete, jak je možné, že v Delvitě se prodává koření Kotányi přímo v kořenkách, celkem pěkných a i s tou skleničkou to stojí taky kolem 30 Kč! Tady se děje něco podivného... Buďto má koření v těch tyglíkách nulovou hodnotu, nebo má Kotányi nějaký zdroj ultralevných kořenek. A taková levná kořenka je k nezaplacení — já jich potřebuju aspoň třicet, tak vím, o čem mluvím.

Ale jeden nápad bych měl. Nemá někdo zájem o přibližně půl kila sušené bazalky drhnuté? Bez skleničky, pochopitelně.

Pes skáče dál, Křeček se bude stěhovat

Rozhodl jsem se skoncovat se samostatným Epileptickým křečkem. Byl to náhodný experiment, nadále už nemá smysl, aby žil na samostaném serveru. V nejbližší době přestěhuju všechny křečkoviny sem a pan Křeček bude nadále existovat pěkně spořádaně v mé chaloupce.

A kromě toho přibyl další Skákající pes — tentokrát skáče i přes písmena. Začal celkem logicky s A a B.

Šebrle je pí*a

"Teda já jsem pí*a," zaznělo právě v přímém přenosu z MS v atletice z úst Romana Šebrleho po jeho nepříliš podařeném výkonu. To nic, není důvod, proč by sportovci měli mluvit jako když másla ukrajuje. Ale dobrý byl následný komentář moderátora (necituji úplně přesně): "Tak tento výraz by měl sice zaznít v televizi až po desáté hodině. Ale myslím, že přesně vystihuje současný Romanův stav."

O šířce prvku, Exploreru, Mozille a matrjošce

Když ani stokrát zopakované není dost, nezbývá než opakovat po sto prvé. Zvlášť když se jedná o tak častý problém, jakým jsou potíže s počítáním rozměrů prvků v CSS.

Problém

Specifikace CSS považuje za šířku prvku (width) šířku jeho obsahu. Rozměry okolních oblastí, tedy výplní (padding) a rámečků (border), se k ní dodatečně přičítají. Pokud tedy určíme nějakému prvku, např. DIV, že má být široký 100px, má mít 10px levý i pravý padding a k tomu 1px rámeček:

div { width:100px; padding:10px; border:1px solid black } ,

bude jeho celková šířka:

100 + 2×10 + 2×1 = 122 px = celková šířka.

Bo tak to má byt a tak je to spravne. Nemyslí si to ale v Microsoftu, kde při výrobě prohlížeče MSIE toto zadání "špatně pochopili" a zapracovali do svého programu jiný algoritmus. MSIE 5 při stejném zadání chápe zadanou hodnotu width jako celkový rozměr, který v sobě již má zahrnut padding i border. V MSIE tedy platí:

100 − 2×10 − 2×1 = 78 px = šířka obsahu.

Nemá cenu diskutovat, co je lepší nebo logičtější. Je to jednou dáno a jazyk CSS určuje, že hodnota width udává pouze šířku obsahu. Výplně a rámečky se k ní přičítají a společně určují vnější rozměr prvku. Jiný přístup je chybný.

Kdo to jak dělá

Chybný postup (tzv. MSIE-model, border-box-model) používá především starý prohlížeč MSIE (verze 5, 5.5), který se již nevyrábí. Korektní postup (W3-model, content-box-model) pak zase používají všechny nové prohlížeče, vyrobené v posledním roce, dvou (např. Safari).

A mezi nimi je velká (patrně nejrozšířenější) skupina prohlížečů, které se vyrábějí již delší dobu. Výrobci těchto prohlížečů se rozhodli zabudovat do novějších verzí svých programů hned dva režimy zpracování:

• standardní režim, kdy prohlížeč pracuje co nejpřesněji podle specifikace jazyků (X)HTML, CSS atd. V tomto režimu se méně tolerují chyby a používá se zde také korektní W3-model pro výpočet rozměrů boxů.
• manýristický (quirk) režim, kdy prohlížeč simuluje chybné chování starých verzí MSIE nebo Netscape, se všemi jejich manýrami, libůstkami a chybami. Napodobuje jejich chybné postupy a nepřípustné odchylky od specifikací (které tehdy buďto neexistovaly, nebo na ně všichni kašlali a dělali si všechno po svém). V tomto režimu je formátování stránky méně předvídatelné. Zde se většinou používá onen vyžilý MSIE-model pro výpočet rozměrů.

Z důvodů zpětné kompatibility jsou tedy tyto prohlížeče schopny zpracovat oba modely (správný, i ten chybný). Podle potřeby použijí vždy jen jeden z nich — na staré stránky chybný MSIE-model, na stránky nové pak W3-model. Jak prohlížeč pozná, co je stará stránka a co nová? Rozhodně ne podle data vytvoření. To by nemohlo fungovat. Stránku posuzuje podle použitého značkovacího jazyka.

• pokud je stránka vytvořená v jazyce HTML 3.2, HTML 4 (Transitional), nebo dokonce v nějaké neurčité meta-verzi jakéhosi pseudo-jazyka (tj. použitý jazyk není určen deklarací DOCTYPE), použije se quirk režim vykreslování
• pokud je stránka vytvořena striktní verzí HTML 4 (Strict), nebo jazykem XHTML, používá se standardní režim zobrazování.

Tento přepínač režimů v sobě obsahují prakticky všechny moderní prohlížeče — MSIE 6, Mozilla / NN 6+ (a všechny prohlížeče postavené na jádře Gecko), Opera a další.

Podrobnější popis přepínání zobrazovacích režimů podle typu dokumentu je uveden v samostatném článku.

Více možností zobrazení téže stránky

Pokud tedy například do jednoho dokumentu umístíme pod sebe dva prvky #div1 a #div2, kterým v CSS nastavíme:

#div1 { width:100px; border:1px solid black
#div2 { width:100px; border:20px solid black

tak mohou nastat v zásadě čtyři možnosti:

• A. starý prohlížeč, který vůbec nepodporuje CSS, zobrazí prvky nezformátované
• B. starý prohlížeč s chybným MSIE-modelem (typicky MSIE 5) zobrazí oba prvky celkově stejně široké. První bude mít obsah široký 98px, druhý 60px (zbytek šířky "spolkne" rámeček).
• C. ultra nový prohlížeč, nezatížený problémy se zpětnou kompatibilitou (např. Safari), zobrazí prvky podle specifikace CSS: oba budou mít obsah široký 100px, kolem něj pak bude příslušný rámeček. První prvek tedy bude celkově široký 102px, druhý 140px.
• D. ostatní prohlížeče, které mají přepínač režimů (např. MSIE 6, Mozilla, Opera), se zařídí podle typu dokumentu. Pokud dokument bude XHTML, nebo striktní HTML, použijí standardní režim (zobrazí stránku jako C), v ostatních případech použijí quirk režim (zobrazí stránku jako B).

Pozn.: MSIE 6 obsahuje ještě jednu závažnou chybu: pokud XHTML dokument začíná XML deklarací (což by měl, pokud používá jiné kódování než UTF-8), IE to špatně pochopí, nepovažuje jej za striktní a zpracovává jej v quirk režimu. Tuhle chybu považuji za menší katastrofu a nechápu, že ji Microsoft ještě nedokázal opravit. Ale nedivil bych se, kdyby to byl nějaký prapodivný úmysl.

Podívejte se na tento příklad umístěný v dokumentu XHTML (použije se standardní režim) a v dokumentu se starou verzí HTML (použije se quirk režim).

Co s tím? Matrjoška hack!

Možností, jak se tento problém řeší, je celá řada. Používají se různé hacky — tedy konstrukce v CSS, které jeden prohlížeč "nepřekousne" a jiný ano. Tím se prohlížeči MSIE 5 nabídne jedna hodnota šířky, prohlížečům ostatním hodnota jiná. Někdo dokonce používá i dvojí verzi stránek (jedny pro MSIE, jedny pro ostatní). A tak dále. Osobně to nemám moc rád. Vystačím si vždy s jedním prostým nástrojem, kterému říkám "Matrjoška hack".

Znáte matrjošky? Takové ty ruské dřevěné panenky, co se skládají do sebe: jednu otevřete, v ní je druhá, menší; v ní je další a další... Princip matrjošky je ideální pro vyřešení všech problémů s odlišnými modely výpočtu šířek v prohlížečích.

Řekněme, že máme několik prvků, které chceme nacpat pod sebe přesně do daného prostoru. Každý z prvků má mít jiný padding, jiný rámeček, přitom mají mít stejnou vnější šířku — chceme tedy, aby jejich vnější okraje byly zarovnané. Postupem matrjošky to vyřešíme snadno.

Každý prvek umístíme ještě do jednoho DIVu (prvek DIV je důležitý, protože je neutrální: bez CSS se nijak neformátuje a jeho přítomnost není patrná). Tomuto vnějšímu prvku nastavíme pouze šířku; padding a border nastavíme jako nulové. A vnitřnímu prvku pak nastavíme potřebný padding a border (šířku necháme automatickou).

Proč? Inu proto, že je-li padding=border=0, mizí všechny problémy s formátovacími modely — v tomto případě se všechny prohlížeče zachovají stejně (je jedno, jestli padding a border přičítají, nebo odečítají: jsou nulové). A u vnitřního prvku zase využíváme automatické šířky. Určíme potřebný padding a border a pokud šířku nastavíme jako width:auto (nebo ji nenastavíme, auto je výchozí hodnota), prvek se automaticky roztáhne na potřebnou šířku, aby vyplnil celý dostupný prostor (vymezený tím vnějším DIVem).

Podívejte se na jednoduchý příklad použití tohoto jednoduchého háčku. A znovu opakuji: já nepoužívám nic jiného, s tímto prostým řešením si bohatě vystačím.

Hledám hosting

Těžký nával spamu Sobig.F mě donutil obrátit se na mého poskytovatele hostingu s dotazem, jak je to u nich s antivirovou a antispamovou ochranou mailboxů. Odpověď mě docela dorazila: nabizime antivirovou a antispam ochranu v balicku 'antivir' za 200kc mesicne... Vzhledem k tomu, že celý hosting mě stojí 150 Kč měsíčně, připadá mi tahle služba celkem brutální. Nemůžu se přitom ubránit pocitu, že provozuje-li někdo na serveru antivirový program, je už skoro jedno, jestli běží nad jedním mailboxem, nebo nad všemi — a určitě nestojí tolik, aby si museli účtovat 2.400,- ročně od každého zákazníka.

I když jsem jinak se svým stávajícím hostingem nadmíru spokojen, nemůžu jinak, než se poohlédnout po nějakém jiném. Rád uvítám každý tip nebo nabídku na dobrý hosting. Potřebuji:

• prostor v řádu stovek MB (min. 250 MB)
• "neomezený" přenos
• Linux + Apache (s možností nastavení základních parametrů, pokud nevyhovují výchozí — např. Options Indexes Off, ale ve zvoleném adresáři On atd.)
• modifikace 403/404 stránek výhodou (ale není nutné)
• PHP verze 4, s možností doplňků podle potřeby (především GDlib 2+, —enable-exif, —with-jpeg, —with-png, expat [XML Support] apod.)
• mySQL není nutné
• pár mailboxů + správa aliasů a forwarderů
• SMTP/POP3
• antispam/antivir filtr na serveru
• dobrá a spolehlivá konektivita na páteř/NIX
• správa DNS — hosting domény pixy.cz; aliasing pixy.cz na www.pixy.cz
• domény 3. úrovně + jejich aspoň minimální správa (např. pouhá redirekce přes PHP je dostatečná)
• FTP přístup
• spolehlivá a pravidelná záloha dat
• spolehlivá a rychlá technická podpora

V případě dohody se nebudu bránit ani nějaké přátelské propagaci dobré hostingové firmy na svých stránkách (v umírněné podobě, podle vlastní volby).

Máte-li tedy někdo dobré (a více než dobré) zkušenosti s kvalitním a spolehlivým hostingem, dejte mi vědět — e-mailem nebo v komentářích. A prosím: žádný flame, žádný spam. Děkuji.

Radium for Reason

Chci kupovat master keyboard Radium od M-Audio (USB MIDI). A k tomu na druhý konec (do počítače) posadit Reason 2 coby softsynťák. Potřeboval bych vědět, jakou to tak může mít naživo latenci (zpoždění mezi stiskem klávesy a zvukovým výstupem). Poraďte, jestli s tím máte někdo nějakou zkušenost — tím myslím spíš s něčím píchnutým do Reasonu (imho už je skoro jedno, jaký MIDI kbd se mačká). Jde mi hlavně o to, jestli se to dá používat pro normální hraní, nebo to zpoždění bude tak velké, že se na to hrát nedá (tipuju, že únosné budou milisekundy, desetina sekundy už je asi příliš). Z M-Audio mi odpověděli hodně mlhavě a obecně, že to záleží hlavně na hardwaru — sice jsem jim poslal popis svého HW (eMac G4/700 + 640 MB RAM + OSX 10.2), ale chápu, že kvůli mě to testovat nebudou a slíbit mi to si netroufnou...

Ve spamu až po uši!

Cca 20-30 virospamů za hodinu. Každých 15 minut, kdy se kontroluje nová pošta, na mě vyskočí okno, jestli chci stáhnout příliš velký mail "Thank You", "Re: Your Application", "Re: Details", "Whicked Screensaver" apod. Tak ty se mažou rovnou na serveru. K tomu ještě řádka Virus Alertů a zpráv od mailserverů o nedoručených mailech... Skončí to někdy?

Je kódování windows-1250 standardní?

Pooh a Yuhůů se hádají (a s nimi se překřikuje řada dalších), jestli je kódování windows-1250 standardní nebo normou nebo co vlastně je. Docela se divím, že po tolika letech v tom ani lidi od počítačů nemají jasno...

Takže aby bylo jasněji, uvedu zde na přeskáčku několik faktů, z nichž si můžete udělat přesnější obrázek, jak to s tím vlastně je.

• Neexistuje žádné "kódování používané na Internetu", tím méně jeho standard. Kodifikována jsou pouze kódování pro jednotlivé internetové služby (WWW, mail atd.). Dlužno podotknout, že pro každou je to určeno jinak.
• Standardy vydává ISO (International Organization for Standardization). Jediná standardní kódování jsou tedy ta, která začínají na "iso-". Pro češtinu to je iso-8859-2.
• Existuje ovšem řada dalších kódování, která nejsou standardní, ale běžně (a zcela korektně) se používají (např. zmíněné windows-1250).
• Kterákoli internetová služba si může zvolit kódování, jaké uzná za vhodné (standardní či nestandardní), stejně jako kódování nemusí omezovat vůbec. Internet je otevřený a jednotlivé služby nemá "pod palcem" žádný oficiální ředitel, ale jen první/nejsilnější/zvolený provozovatel či "veřejný správce".
• U obecně používaných internetových služeb (web, mail, ftp atd.) se historicky ustálilo, že za normativní definice, jimiž se mají všichni řídit, budou považovány dokumenty RFC (Request For Comments). Zdůrazňuji ale, že vše je jen věcí vzájemné dohody, a že tyto "standardy" se všeobecně dodržují dobrovolně a jen proto, aby si všichni navzájem rozuměli — Internet však jejich dodržování nevyžaduje a když kdokoli bude chtít, může si zřídit vlastní službu a vymyslet vlastní "standardy".
• Služba e-mail, jakožto jedna z nejstarších, stanovuje (v RFC 2049), že minimální poštovní klient musí podporovat kódování iso-8859-x — o jiných kódováních zde není ani řeč. V mailu tedy není kódování windows-1250 nijak kodifikováno a o poštovní programy a servery nejsou povinny s ním umět pracovat, ani vědět, že vůbec existuje. A dodnes se setkávám s nečitelnými dopisy jen proto, že byly napsány ve windows-1250. V e-mailu je tedy pro češtinu "povoleno" pouze kódování iso-8859-2.
• Služba WWW byla svěřena do správy organizace W3 Consortium, která vytváří a spravuje specifikace technologií, které se v rámci této služby (tedy na WWW stránkách) používají — tj. HTML, XHTML, XML, WML, CSS atd. Ve specifikacích jazyků (X)HTML je uvedeno, že lze používat jakékoli kódování registrované u IANA. Kódování windows-1250 zde dodatečně registrováno bylo, jeho používání je tedy legitimní (např. od defacto neexistujícího pseudokódování x-mac-ce).
• Program, který umí windows-1250, umí obvykle i iso-8859-2. Naopak program, který umí iso-8859-2, už ale windows-1250 umět nemusí. Jinými slovy, iso-8859-2 je obecnější a šířeji podporované.
• Novější spefikace postupně upřednostňují Unicode, tedy např. kódování UTF-8. Proprietární kódování (iso-8859-2, windows-1250) by měla postupně vymizet a být nahrazena právě Unicodem.

Takže shrnuto: windows-1250 není standardní kódování (standardní je jen ISO), je zcela legitimní na WWW stránkách, není povoleno v e-mailu. Více se dočtete např. na cestina.cz — i když od doby největší slávy tohoto webu už se mnohé změnilo, většina informací je platná trvale.

Jsem zpět. Karabadang baraka!

Přese všechna očekávání byla Ohře celkem sjízdná (a tam kde ne, byla aspoň schůdná). Škoda jen, že jsme to museli zapíchnout už kdesi před Stráží... Poslední den už od rána pršelo, a tak jsme nakonec ani nevyjeli — a mohli jsme, chvíli poté, co jsme vydrhli raft, se vyjasnilo a začal zase pařák. Ovšem musím říct, že na raftu je ta řeka docela bžunda — když se člověk může přestat starat o to, aby se neobrátil, užívá si to úplně jinak (a že posledně na vertexe to byla moje primární a namnoze jediná starost; kdo zná vertexy, chápe).

A na řece ani noha, kempy prázdné, hospodský vás málem prosí, ať to zapíchnete u nich, z Huberťáku je pár neškodných kamínků, kterých by si jeden skoro ani nevšiml. Jenom ryby nebraly, potvory (až na tu nedomrlou štiku, co nakonec utekla i se třpytkou). Jó, mohlo toho být aspoň o týden dva víc... Ještěže mě někdy na podzim čeká ještě čtrnáct dní volna v kuse.

P. S.: Schválně, kdo znáte odpověď na pozdrav z titulku? Ať vím, co čtete

Pixy: Kladiva na webdesignéry

Podle občasných komentářů, mailů a ohlasů k některým mým kritickým či kritizujícím článkům zjišťuji, že část čtenářů mé výtky vůči webdesignérským chybám chápe špatně. A rozhodně jinak, než bych si přál. Rád bych proto svůj vztah k webdesignérům, špatným stránkám a podobnému mudrování trochu lépe vysvětlil.

V prvé řadě chci, aby byla jasná jedna věc. Každý, kdo si sedne a vlastními silami si dokáže vytvořit (jakékoli!) webové stránky, má můj hluboký obdiv a jeho práce si nesmírně vážím. Vím, že naučit se všechny ty HaTMatiLky a pochopit, jak TO celé funguje, není žádná sranda. Znám spoustu lidí, co to přese všechnu snahu nikdy nedokáží; nejsem ani takový sklerotik, abych už zapomněl na své krušné začátky a své první hrůzné stránky, které jsem kdy vyplodil. Kdo si jako amatér a nadšenec dokáže udělat vlastní stránky, zaslouží si poklonu. I když je udělá špatně — je to pochopitelné, žádný učený z nebe nespadl a chybami se člověk učí. Když je navíc dokáže udělat dobře, zaslouží si k té pokloně ještě smeknout.

Ale současně s tím platí i druhá věc: když někdo tytéž stránky udělá za peníze, když se dokonce sám prohlašuje za webdesignéra a dělá přitom špatné, ošklivé a nepřístupné paskvily, zaslouží kopnout do zadku.

Webdesignérem není každý, kdo vytvoří nějaké WWW stránky. Za webdesignéra se takový člověk dá považovat až tehdy, kdy tuto práci vykonává komerčně, za peníze. Stejně jako v kterémkoli jiném řemesle: koupím-li si pilku a vrtačku a kamarádovi vyrobím stůl, jsem kutil. Šikovný, nebo lempl, to je jedno — když se mu to nelíbí, může si stůl udělat sám. Pokud mi za to ale zaplatí, stal jsem se truhlářem a jakákoli lemplovina se rázem přestává tolerovat.

Kdykoli se tady vyjadřuji k nějakým stránkám, vyjadřuji se k práci webdesignéra. Tedy takového autora, který si za svou práci nechal zaplatit a z kategorie kutil-amatér se tím přesunul do kategorie profesionál. A zde jde okamžitě veškerý amatérismus stranou. U profesionála musíme očekávat dokonalou znalost problematiky, perfektní práci a jakékoli chyby jsou neomluvitelné.

A to jsou ta díla, ke kterým se občas vyjadřuji. Když bych zjistil, že se obouvám do amatéra, který stránky vytvořil z čirého entuziasmu a zadarmo, sklapnu a hluboce se omluvím.

Když zůstanu u truhlářského příměru — pokud na túře v horách potkám odpočívadlo s lavicí neuměle stlučenou nějakým dobrákem, můžu mu být nanejvýš vděčen. Když se však kývající stůl a nalomená lavice budou nacházet v lesní restauraci, pomyslím si už o jejích majitelích své — a bude mě přitom houby zajímat, kdo a za kolik ta sedátka stloukl. A konečně: zadřu-li si do zadku třísku na nekvalitní židli v MacDonaldu, nepřejdu to už ani mávnutím ruky a budu si stěžovat.

Ve webdesignu to beru úplně stejně.

Na pár dní mizím

Tělo i mozek si žádají odpočinek, na několik málo (opravdu málo) dní proto mizím ponořit se někam do vody. Původně byla sice v plánu pětidenní flákárna na raftu po Ohři, ale protože to vypadá, že tentokrát bychom Ohři šli pěšky, tak se spíš uplacatíme někam, kde je vody přece jen trochu víc... Do úterý večer nechci počítač ani vidět.

Jak prodělávat na Internetu: nové kapitoly

Dnes jsem přidal další přírůstky do online knihy 123 kroků ke špatnému webu: Jak prodělávat na Internetu. Nová kapitola nese název Začínáme od píky a zatím obsahuje další tři kroky k vytvoření spolehlivě prodělečných webových projektů.

Kdo si hraje na loutkáře?

Žertvův deníček je prý reklamní kampaní na novou knihu, tvrdí Žertva, údajně vulgo Michal Viewegh. No nevím. Prezentovaná obálka je montáží z obálky Případu nevěrné Kláry, se základní barvou windowsí plochy a s ošklivými mikrosoftími písmy. Pokud to má být pravda, Viewegh zázračně změnil svůj styl a navíc dělá hrubky (hned několik i v tom stručném přiznání). Kdopak si to ze svých čtenářů dělá prdelky?

Sedmatřicet!!!

Na obou teploměrech za našimi oknny je třicet sedm ve stínu! Tohle jestli není rekord, tak už nevím. Byl jsem venku čtvrt hodiny a myslel jsem, že vstupuju do prádelny. To přece není normální...

8 litrů na sto? V mílích na galon to neumíte?

Díky Markovi a Sově jsem se právě dozvěděl, že Google už je i kalkulačkou. A co těch zmíněných 8 litrů na sto? Takhle: 8l/100km in miles per gallon. Anebo třeba 30 mi/gal in l/100km.

Je to paráda, protože patřím právě mezi ty, které Marek zmiňuje: v browseru mám vestavěnou Google-kolonku a běží mi nonstop celý den. Zkoušel jsem to, je to fakt efektivnější než si pouštět kalkulačku. Příštím krokem bude multijazykový slovník, encyklopedie a co já vím ještě... Jen aby toho jednou nebylo přespříliš.

Update: Když zadáte Googlu vyhledat číslo 42, jako první se vám vrátí odkaz Arts > Literature > Authors > A > Adams, Douglas

Jak vodorovně vycentrovat stránku

Během několika dní mi přišel již několikátý dotaz na centrování obsahu na stránkách. Zarovnávání prvků v CSS už jsem se zde sice jednou věnoval, pro řadu začínajících autorů to ale patrně není až tak triviální věc. Zkusím se tedy na vodorovné zarovnávání bloků zaměřit ještě jednou a ještě podrobněji.

Chceme-li uvnitř bloku zarovnat jeho řádkový (inline) obsah, slouží k tomu vlastnost text-align s hodnotami left, right, center, justify. Její nastavení zajistí, že bude příslušným způsobem zarovnán text, obrázky vložené v textu apod. Na bloky uvnitř se to ale nevztahuje.

Vzájemná poloha jednoho bloku uvnitř jiného se řídí vztahy vlastností popisujících jejich rozměry — tedy width (šířka), padding (výplň), border (rámeček) a margin (vnější okraj). Umístíme-li dovnitř nějakého bloku (např. do DIV nebo třeba do BODY) nějaký další blok (DIV, P, H2 atd.) a tomuto vnitřnímu bloku nastavíme, aby vyplnil celý prostor, který má ve vnějším bloku k dispozici (např. mu nastavíme width:auto; margin:0), pak není co zarovnávat. Vnitřní blok vyplňuje veškerý určený prostor a to, jak se jejich vzájemná pozice jeví na stránce, ovlivňuje především nastavení vnějšího bloku.

Toto je první faktor, který ovlivňuje "zarovnávání" — to, kde v bloku vlastně bude prostor pro obsah. Rámeček či okraje (margin/padding/border) větší na jedné straně určí, že obsah bude vůči okrajům bloku posunut více k jedné straně. Stejné rozměry na obou stranách zajistí, že obsah bude uprostřed.

V druhém kroku pak můžeme ovlivnit, jak bude v tomto prostoru umístěn samotný obsah. Pokud nějakému vnitřnímu bloku určíme menší šířku než má k dispozici (třeba width:50%), zbude kolem něj volné místo. Potom o umístění vůči vnějšímu bloku rozhodují jeho okraje (margin). Budou-li stejné, blok bude vystředěn, bude-li jeden větší, bude blok posunut k jedné straně. Můžeme určit přesnou velikost okrajů (např. 0, 1em, 3cm atd.), můžeme použít procentní šířku (např. 20%), nemusíme je definovat vůbec (pak se použije výchozí hodnota 0), nebo můžeme použít hodnotu auto. V tom případě se do tohoto okraje započítá veškeré zbývající místo. Pokud budou mít hodnotu auto oba okraje (levý i pravý), rozdělí se zbývající místo mezi ně rovnoměrně a blok bude vystředěn.

Lépe snad budou ukázky různých nastavení vidět na obrázku.

V praxi

Nejčastěji autoři potřebují vycentrovat hlavní obsah v rámci celé stránky. V prastarých verzích HTML se k tomu používala nestandardní značka <CENTER>, která však vystředila všechno — texty i bloky bez rozdílu. CSS používá jiný přístup a rozlišuje řádkové a blokové prvky, což může být pro autory, kteří s CSS teprve začínají, poněkud matoucí.

Díky výše uvedeným postupům ale není problém jakýkoli prvek na stránce zarovnat podle naší potřeby. Nejsnazší možností je nastavit stejné okraje (margin/padding) prvku BODY. Veškerý obsah se pak bude nacházet uprostřed stránky. Např.:

body {
   margin: 0 10%;
   border-left: 1px solid black;
   border-right: 1px solid black;
   padding: 2em;
   }

Viz příklad 1.

To ale obvykle nestačí. Často chceme obsahu např. dát jiné pozadí než okolní stránce. V tom případě postačí celý obsah uzavřít do jednoho bloku, který vycentrujeme vůči BODY. Např.:

body {
   margin: 0;
   background: blue;
   }

#stranka {
   width: 600px;
   margin: 0 auto; /* <— auto zajistí "vycentrování" */
   padding: 2em;
   border-left: 1px solid black;
   border-right: 1px solid black;
   background: white;
   }
...
<body>
<div id="stranka">
... obsah ...
</div>

Viz příklad 2.

To je celé. Nic složitého v tom nehledejte... Snad až na jednu drobnost. Prohlížeč MSIE 5 pro Windows obsahuje chybu. Vlastně dvě chyby, které se ovšem výborně doplňují. 1) Neumí správně zpracovat margin:auto a bloky s tímto nastavením nechá umístěné vlevo. 2) Vlastnost text-align:center aplikuje chybně nejen na text, ale i na bloky. Pokud tedy nechceme tento prohlížeč zcela ignorovat, můžeme jeho chybné zpracování snadno ošetřit.

Prvku BODY nastavíme text-align:center. To zajistí, že se v MSIE 5 vše vycentruje (tedy i prvek #stranka — ostatní prohlížeče k tomu použijí margin:auto). A prvku #stranka pak nastavíme zase zpátky text-align:left, aby celý obsah stránky nebyl vycentrován (pokud o to zrovna nestojíme). Řešení i s tímto drobným hackem najdete v příkladu 3 — od příkladu 2 se liší pouze touto drobnou úpravou a potažmo tím, že funguje i v MSIE 5.

Tento způsob zarovnání na střed je použit i na těchto stránkách (např. styly "Rekonstruktor" či "Blue/Green Velvet").

Update: Dále se centrování prvků na stránce věnuje také Sova v Síti článkem Centrování v CSS.

OK, tak mám taky RDF

Ukecali jste mě, moje RDF je k dispozici.

Přemety předmětných podmětů a podmětných předmětů

Průběh katastofy zhoršil špatný stav české krajiny, čtu v Týdnu 32/2003. Byla česká krajina poškozena katastrofou (zajisté), nebo byla katastrofa zhoršena stavem krajiny (to je také pravda)? Co měl ale autor na mysli?

Tyhle něchtěné záměny předmětu s podmětem jsou docela časté. Vlastně nastanou vždycky, když má předmět stejný tvar ve čtvrtém jako v prvním pádě. Což platí především u neživotných mužských a u středních podstatných jmen (tam, kde se ptáme koho/co a použijeme co — co: hrad, vidím: hrad; co: město, vidím: město), a to jak v jednotném, tak v množném čísle (zde to platí dokonce i u životných ženských a středních jmen — co: ženy, vidím: ženy; co: města, vidím: města). Není radno na to zapomínat, někdy nemusí být přehození významu tak neškodné a může mít docela fatální následky (počítače nahradí kuličková počítadla, nebezpečné sinice zabily viry atd.).

Náprava je přitom vždycky celkem jednoduchá:

• nahradit činný rod v přísudku rodem trpným. Např.: Počítače budou nahrazeny kuličkovými počítadly. Popř.: Počítače nahradíme (my) kuličkovými počítadly.
• použít sloveso, které se váže s jiným než čtvrtým pádem. Např.: S počítači zatočí kuličková počítadla.
• nahradit předmět rozvitou vazbou (či větou), u které bude předmětná vazba zřejmá. Např.: Práci počítačů nahradí kuličková počítadla.

Takže bacha na to, když podmět zastoupí předmět

Hovadismus na ČT 1

Tedy pane Janečku, jestli v tomhle prsty ještě nemáte, tak byste měl fofrem to hovado, které to napadlo, vyhodit. A jestli tohle už je vaše práce, měl byste vyhodit sebe. Vrátit funkci a jít se stydět do kouta.

Už i na ČT totiž nějakému debilovi začaly připadat závěrečné titulky filmů jako promrhaný čas a jal se přes ně pouštět upoutávky na další pořady. A já vůl si myslel, že takhle buransky usekávat filmy a zasahovat do nich jsou schopni jen na Nově. Není to pravda.

Pro pořádek: Závěrečné titulky, Vysoká hra patriotů, ČT 1, 9.8.2003, kolem 22:55. Jestli z toho Janeček vážně hodlá udělat druhou Novu, tak to tu televizi už můžu odhlásit. Na Novu nekoukám a jestli se jí má ČT přibližovat, tak teda potěš prso. Jen kvůli HBO a Spektru přece ty poplatky platit nebudu. Už hodně let mě ČT tak nenasr... nedožr... nezklamala.

Dva nové styly

Přidal jsem dva nové styly, fialový a zelený "velvet". Počet stylů se utěšeně rozrůstá — docela by mě zajímalo, čemu kdo dává přednost. Já si nejvíc zvykl na "rekonstruktor", což ale může být tím, jak mi to tu v pokoji pěkně ladí s okolím Do "zelených žabiček" (Green Velvet) ale určitě nepůjdu, to je spíš jen tak pro srandu.

Přísně tajný scénář jednání sněmovny!

Epileptický křeček získal tajný scénář nejbližšího zasedání poslanecké sněmovny.

Jak prodělávat na Internetu: 3 nové kapitolky (aktualizováno: 4)

Přidal jsem do knihy tři nové kapitolky:

• Krok 3. Mlžte rafinovaně: nechte je tápat a bloudit
• Krok 4. Když neumí zazvonit, ať sem nelezou
• Krok 5. Hledej, šmudlo...

Už jsem je měl hotové z dřívějška, takže jsem je jen formátoval do HTML, což šlo celkem rychle. Dnes ještě bude jedna, ale další kapitoly už musím vyrábět z gruntu, takže půjdou podstatně pomaleji

Update 16.50: Přidal jsem i tu čtvrtou slíbenou (díky za tip na příklad Jirkovi, akorát se mi trefil do rozepsané kapitolky).

• Krok 6. Teď tu jsem... A teď zase ne

Pískám jak čajník...

... a pomalu se mi strhává píšťalka. Podle těch parchantů meteorologickejch to vedro potrvá minimálně ještě týden. Nevím jak vy, ale já funguju jen do 22-25 °C. Pak mi odcházejí periférie, odpojujou se jednotky a jedu na záložní zdroj. Miluju říjen a listopad. Rudo-zlatý listí, sluníčko nesměle blikotá přes lehký opar a je 13 stupňů...

Teda fuj, to je ale masochismus... Koupil jsem si větrák. Ten horký vzduch se teď aspoň hýbe — ale že by to bylo nějak výrazně lepší...

Nová kniha: Jak prodělávat na Internetu

Dnešním dnem začínám na webu publikovat svou novou knížku "123 kroků ke špatnému webu: Jak prodělávat na Internetu". Bude se věnovat všem možným způsobům, které lidé dokáží vymyslet, aby udělali své webové stránky horší a ještě horší.

Kniha ještě zdaleka není napsaná. Bude vznikat postupně a hotové kapitoly se budou hned objevovat na webu. Začínám s předmluvou a prvními čtyřmi kapitolami, další budou postupně přibývat. A pochopitelně je to zdarma.

MobilGo v novém!

Eurotel předělal svůj "portál" MobilGo. Nejenže změnil grafiku do vkusnější podoby, více korespondující s webem Eurotelu, ale především autor konečně použil beztabulkový layout s CSS a hlavně bezchybný kód. A funguje to, musím dodat (o totální nefukčnosti tohoto webu jsem psal několikrát dříve. Wow! Bravo!! Go!!!

Dogma W4 v slovenčine

Jozef Izso preložil celý text DogmaW4 do slovenčiny. Veľká vďaka.