WeBlog Hanzely.eu

 

Vo svete web designu ste sa určite už stretli s pojmom "Svätý grál" webu, čo je pokročilé rozloženie web stránky pomocu relatívneho poziciovania v CSS, bez použitia starých techník tabuliek. Sám "web guru" pixy na svojom webe predstavil 3 stĺpcový layout bez tabuliek s opakovaným pozadím po oboch stranách. Ja som ale narazil na problém, ktorý nebol na žiadnej stránke riešený podrobne. O moje riešenie sa preto chcem podeliť v článku.

 

 

Problém, ktorý stál predo mnou bol následujúci. Obsah stránky má dva bloky (na obrázku očíslované 1 a 2), medzi ktorými je deliaca čiara tvorená obrázkom (číslo 3). Výšku jednotlivých blokov nevieme dopredu určiť a bude sa na každej stránke dynamicky meniť. Prostredný oddeľovač sa musí prispôsobiť a zväčšovať sa. Problém by nebol, pokiaľ by ona deliaca čiara bola celistvá od vrchu po spodok. Nechali by sme pozadie opakovať v bloku pod nimi. Lenže čiara mala vlastné ukončenia na oboch koncoch, ktoré museli byť na pozícii top a bottom (v objekte, kde nevieme ako ďaleko ten bottom bude). 

 

Napadali ma rôzne riešenia ako to skúsiť upraviť. Najjednoduchšie riešenie je použiť tabuľky. Tam je to primitívne, pretože rozdelíme stránku na 3 oblasti a ich výška bude stále rovnaká. Lenže túto možnosť som kategoricky odmietal. i kvôli možným problémom s dnes toľko diskotovaným SEO  Iné pohnútky ma tlačili k použitiu CSS vlastnosti z-index, ale pokusy stroskotali na mrtvom bode, kvôli nekompatibilite zobazovania internetových prehliadačov.

 

Riešenie, ktoré som nakoniec vytvoril je inšpirované vyššie zmieneným pixyho 3 stĺpcovým návrhom a matrošky (použitá čiastočne kvôli prehliadaču Internet Explorer 6). Odkaz na kompletné riešenie, ktoré je i online k vyskúšaniu, je na konci článku ako archív vo fromáte *.zip. Súbory môžete akokoľvek upravovať či okopírovať. Použité boli obrázky vo formáte *.png, ale transparentnosť som odstránil opäť z dôvodu kompatibility s IE6.

 

Zmienené riešenie bolo testované prehliadačmi:

• Internet Explorer (verzie 5.5, 6, 7 a 8)
• Mozilla Firefox (verzie 2 a 3.6)
• Google Chrome ( vo verzii 4.0)
• Opera (vo verzii 10.10)
• Safari (vo verzii 4.0.5)

Funkčné by ale malo byť v každom dovodobom prehliadači, ktorý podporuje štandardy W3C.

 

Javascriptový kód, ktorý v riešení nájdete slúži výhradne pre ukážku zobrazenia textu rôznych dĺžok v blokoch a nemá žiadny vplyv na funkčnosť riešenia. Jeho odstránenie sa teda očakáva.