Řežba webu VI
Finální úpravy. Zadavateli se sice původní návrh webu líbil o něco víc (je prudce optimistický), ale měl spoustu nedostatků (pro začátek barvy, špatně rozšiřitelné menu, všeobecný optimismus způsobený wicked worn lookem), ale nakonec mi asi dají volnou ruku.
Jak se zatím změnil náš návrh? Upravil jsem logo kapky, zvětšil původní fotku a optimalizoval menu (formát GIF má 7kB, původní JPG mělo asi 24kB). Další optimalizace se týkala pozadí – přidal jsem div main2 s následujícími atributy:
div#main2 {border-left: #832B4F 1px solid; border-right: #832B4F 1px
solid; margin: 0 1px; min-height:100%; _height:100%;}
Takže je teď efekt v pozadí tvořen divem a ne obrázkem (čímž trošku hřeším proti semantice, ale na druhou stranu tento krok zmenšil přenášený objem dat a navíc bych web mohl zfluidnit, popř. zelastičit).
Výsledek vidíme v příkladu 12, kterým s největší pravděpodobností uzavřu celý seriál Řežba webu.
Komentáře
Ještě jedna maličkost. Možná sis to neuvědomil, když jsi to psal, ale pokud by obsah stránky byl kratší než menu, tak ten okraj, který jsi tímto příspěvkem předělal, bude jen po okrajích daného bloku a asi to nebude vypadat nejlíp. Asi by to chtělo upravit tak, aby to bylo přes celou výšku stránky (možná bude potřeba přidat nějaký další DIV).
Sorry, nenapsal jsem to správně. Ten okraj bude zasahovat maximálně do velikosti menu, ale dál už nebude. Stačí si to vyzkoušet při změnšování písma. Pravděpodobně se to projevuje jen ve Firefoxu (respektive v prohlížečích s jádrem gecko), protože MSIE to zobrazil dobře a Opera zvětšuje celou stránku.
Pozadí – ok, skutečně se snižuje (promyslím)
Menu – neviděls někde příklad, v němž by tento problém řešili? Zkoušel jsem to u jiného projektu, ale nepřišel jsem na nic – standadní image replacementy jsou nepoužitelný, pokud chceš aby viditelná část byla taky odkaz.
Semantika – nerad vnořuju divy tam kde nejsou potřeba.. ale konkrétní semantické pravidlo to asi nebude.. :-)
Abych řekl pravdu, tak na to menu jsem nikde žádnej příklad neviděl a jediný řešení, který mě napadá, je ten obrázek rozřezat na víc podobrázků a použít na to Pixyho trik s image replacementem (nebo jak se to jmenuje). Nevýhodou je pak to, že se zvýší počet http požadavků (na každej obrázek jeden). Další možností řešení by mohlo být to, že by to menu prostě nebylo obrázkový, ale pouze textový. Myslím, že by to nevypadalo zas až tak hrozně a bylo by pak přístupný kdykoliv. Zkusím se někde poohlídnout po nějakým řešení nebo když budu mít čas, tak zkusím nějaký vymyslet.
Pokud jde o tu sémantiku, tak tak jak jsi to podal, je to už pochopitelný, ale i tak jeden div navíc není na škodu. Kdyby jich bylo 50, tak už by se dalo o nějaké chybě mluvit.
Zapomnel jsem dodat, zkousel jsem to v IE5.01, IE6, Opere 7.54 a Firefoxu 1.0. Vsude to jelo. Jen IE buguje a pri vypnutych obrazcich u roll-overu stejne nacpe do pozadi bitmapu.
Tam je pořád ten stejný problém. Pokud si vypnu obrázky, ale ponechám styly, tak není menu přístupné (vůbec nic se nezobrazí). Bohužel nemám teď vůbec čas se tomu věnovat a o víkendu jsem mimo republiku, ale zkusím se nad tím zamyslet někdy po víkendu (pokud budu mít čas).
All hail to Mustafa. Dost drsný (Firefox 1.0 s vypnutýma obrázkama a menu pořád valí)..
Měl bych dvě připomínky. Nevím co je na tom sémanticky špatně, když do kódu přidáš navíc nějaký ten DIV či SPAN? Podle mě se mohou tyto dva prvky používat v libovolném množství (nemělo by se to přehánět), aniž by to mělo nějaký vliv na sémantiku. Druhá připomínka se týká nepřístupného menu s vypnutými obrázky, ale zapnutým CSS. Mohou být uživatelé, kteří si nepřejí zobrazovat obrázky, ale CSS zapnuté mít budou a v takovém případě nebude menu vůbec vidět (vyzkoušet se to dá například ve Firefoxu s instalovaným pluginem Web Developer Toolbar). Už to tu psal někdo u předchozího článku z této série a možná bys o tom mohl zkusit něco napsat. Co ty na to?