ipsace i tiskace
1.10.2007
Weby s tajemstvím
A) Máte dostatečně pomalé připojení? Taxe koukněte na příběh strýčka krásné Veroniky. Pokud splňujete podmínky, vidíte, že web se načítá, dokonce jsou tam vidět i nějaká písmenka, ale jinak je to černá plocha, na které nic nepřečtete. Teprve když se načte stránka komplet, což může trvat i 10 sekund, místo pod textem se náhle rozsvítí a můžete si ten mimořádně zajímavý příběh vychutnat.
B) Nepovedlo se? Pak máte smůlu a váš šlahoun je příliš tlustý. Ale nezoufejte, stejný efekt si můžete prohlédnout i na rychlejší lince. U Misantropa musíte drahnou dobu hledět na tyrkysové pozadí, kde velmi obtížně rozeznáte tyrkysový text. Obsah stránky pro vás zůstává tajemstvím. U mě tato doba trvá neuvěřitelných 23 sekund! Pak přijde rána do očí a už vidíte vše normálně. Rozebereme si, čím to je.
V případě A se jedná o chybku zbytečnou. Není divu. Dvaadvacetileté studentce netechnické školy každý rád odpustí, že brilantně neovládá HTML. Je odkázána na někoho, kdo jí to udělá (ostatně skoro každé dívce jejího věku to někdo dělá). Výjimečně jsem to nebyl já, ale jakýsi Theron Parlin. Chyba je zde zcela neopoctatněná a vznikla špatným překopírováním původní Theronovy šablony, Theron sám ji má perfektně funkční.
Žádné neštěstí. Pokud Veronika projeví zájem, udělám jí to bez chyby a rád, ona totiž píše i vypadá skvěle!
Případ B je zapeklitější a chyba je zde zdůvodnitelná. Obsahová část blogu má fixní šířku a bílé pozadí, na němž je tmavotyrkysové písmo. Jenže okraje mimo tuto oblast udělal autor ASH721 tmavé, v téměř shodné barvě jako písmo.
Vyřešeno je to tím nejobvyklejším způsobem, celý dokument má nadefinováno pozadí i písmo v tyrkysové barvě. (Teď možná některé z vás povytáhly obočí... – ano!) Vlastní obsahová část má potom komplet předefinováno pozadí na bílé. Tato část má fixní šířku 769 a jméno "obsah". A obaluje celý blog, včetně postranního menu a všech externě "tahaných", případě javascriptových vychytávek. A tady je zakopán pes. Prohlížeč vykreslí blok "Obsah" teprve tehdy, až "má jasno", kde který element bude ležet. Což trvá poměrně dlouho. A pozadí bloku se vykresluje vždy až nakonec. Dokud se všechny vychytávky nepostahují, je obsahová část zcela nečitelná. Poctatné části stylopisu jsou:
body,html { background: #034B5A; color: #023540;}
#obsah {width: 769px; background: #fff; }
Protože se s Atrhurem známe, pokusil jsem se mu to v rychlosti alespoň částečně opravit tak, že jsem dodefinoval pozadí alespoň u nadpisů a patiček spotů. Proto na ilustračním screenshotu vidíte bílé pozadí aspoň u nadpisů. Je to dáno tím, že rozměry a umístění nadpisu je prohlížeči jasné ihned po jeho předání, proto se jeho pozadí vykreslí okamžitě, nemusí se čekat na načítání dalších prvků. Moje nedokonalá úprava tedy spočívala v předpisu:
p.more, h2, h1 {background-color:#fff}Chtěl jsem ještě obělit pozadí pod každým spotem, ale zjistil jsem, že žádný vhodný div, který by obaloval každý spot, není. Zasahovat do šablony jsem Arthurovi nechtěl a pro nedostatek času jsem to nechal takto před mnoha měsíci nedodělané. Stydím se.
Protože teprve teď, při psaní tohoto spotu, jsem v CSS objevil div, který obaluje všechny články, ale neobsahuje sloupec menu. Jmenuje se "pole".
Možná tam ten div tenkrát nebyl, možná jsem byl slepý, na tom nesejde. Nyní tedy mohu kvalifikovaně poradit. Když tomuto prvku nadefinujeme pozadí, doba, po kterou bude obsah zahalen rouškou tajemství, se poctatně zkrátí. Misantropovým uživatelkám se zlepší prožitek a mně se znehodnotí jedna didaktická pomůcka :-)
Pár rad na závěr
Pokud jste webdesignérky a chcete se vyvarovat podobných problémů, mám pro vás několik rad.
- Definujte pozadí od nejmenších celků, strukturu dokumentu volte tak, abyste vždy takový celek měl k disposici. (V našem příkladu obalový div každého spotu). Jeden div navíc nikoho nezabije :-)
- Pokud dáváte jako pozadí nějaký obrázek, vždy nadefinujte stejnou barvu pozadí, jako je převládající barva tohoto obrázku. Pamatujte, že obrázky na pozadí se stahují až nakonec!
- Snažte se pokud možno nemít v <body> stejnou barvu textu jako pozadí. Vyvarujete se tak potenciálních problémů, zlepšíte přístupnost. Uvedený případ u misantropa by šlo řešit čistě. Nedávat pozadí tyrkysové, ale okraje vytvořit pomocí dllouhého obrázku na pozadí, který by měl střed bílý, dlouhý 769px, okraje by pak byly tyrkysové.
body {background:#fff url(dlouhy.gif) repeat-y center;}K výše zmíněné kolisi by tak nikdy nemohlo dojít. - Pokud používáte vzdálene služby, vždy je ve struktuře dokumentu oddělte od textového obsahu, respektive obsah oddělte od nich.
Milé webdesignérky, vím, že jsem neobjevil žádnou Ameriku, ale praxe na českých webech mi dává zapravdu, že takového opakování není nikdy dost. Ostatně, že to jde bez prodlev, vidíte i na blogu Alky, kde už zase přibývají články.
A pokud pro vás zněly některé z těchto rad nově, pak rychle skočte na druhý díl o stylování formulářů, který jsem napsal před pár pátky. Šup, šup!
Komentáře (23)
Varování:
Budu zde nechávat jen komentáře, které se mi líbí. Demokracie je sen. Nechte si o ní zdát :-)Vůbec netuším, o čem to mluvíš, ale pěkně prosím, cokoliv uznáš za vhodné...
Popisuješ, jak by to šlo řešit u Misantropa obrázkem na pozadí. Já myslím, že by to šlo vyřešit i bez obrázku, a sice obalením celého webu ještě do jednoho divu se stoprocentní velikostí. Tomu bych právě nadefinoval pozadí a html a body nechal na pokoji.
O tomhle problému jsem sice věděl, ale neřešil :) (Přitom jsem na něj sám trpěl - nemám zrovna nejrychlejší připojení) Sypu si tedy popel na hlavu.
Díky, šerife, za (druhé) napomenutí. :)
[5] Moc se tesim, az ti tam sahnu, ale raci to udelame tak, aby to nikdo nevidel, co myslis? :-) Sleduj vzkazy na blogisku :-)
[6][7] Jasne, ctrl+A je zakladni hmat ctenarky blogu :-)
[8] Buuuu.... skyt.. beeeee...vzlyk. Znicili mi pomůckuuuuuu .. :-)
Spomaľte si svoj internet! Potom bude vidno tie chybky dlhšie :)
Tlustý šlahoun je prostě fajn. Ale na druhou stranu, i s tenkým kašpárkem se dá zahrát pěkné divadélko, ne? :-) (úsměv, smile, das Lächeln, sourire, motteggio...)
Přidání komentáře...
Aktivní styl
Odkazy
