Vylepšenia Blogu

Naposledy sme si predstavili základné štýly, ktoré nám sformátovali hlavičku. Ďalej nám prichádza však formátovanie zvyšku stránky. To jest buď zoznamu príspevkov, alebo priamo detajlu príspevku.

#blog-title a { text-decoration:none; color:#333; } #middle, #end { margin:0px auto; width:955px; } #content, #menu { margin:20px 0; padding:10px; border:1px solid #ddd; } #content { min-height:540px; height:540px; float:left; width:725px; }

V týchto riadkoch kódov môžete vidieť, že sa ešte doplnila direktíva pre #blog-title a. Označenie a (anchor, alebo hypertextový odkaz) označuje miesto, kde je "link" na inú stránku, prípadne odkaz. Tu je zapísané, že "linka" nemá byť podčiarknutá a má byť tmavou sivou farbou.

Ďalej máme zadefinované štýly pre objekty MIDDLE, END, CONTENT a MENU, pričom MIDDLE a END majú poločné prvky, preto sú zapísané spolu. Nemajú žiadne okraje a ich šírka je 955 pixelov. Rovnako tak majú spoločné prvky aj CONTENT a MENU, pričom majú okraje (margin) 20 pixelov zhora. Odsadenie vo vnútri je 10 pixelov. Okolo objektov je rám o hrúbke 1 pixelu s jemnou sivou farbou.

Ako môžete vidieť, hneď potom je tam ďalšia deklarácia pre objekt CONTENT. Tá určuje, že minimálna výška bloku by mala mať 540 pixelov, výška by mala byť 540pixelov, float: left; určuje, že celý blok bude položený vľavo. Poznáme ešte aj definíciu float: right;, ktorá by daný objekt nechala vpravo. Šírka objektu CONTENT je nastavená na 725 pixelov.

V ďalšej časti kódu máme deklarácie objektov MENU, CONTENT a END, pričom si opäť vysvetlíme čo ktorá definícia znamená.

#menu { float:right; width:180px; } div[id] #content { height:auto; } #end { width:935px; clear:both; padding:5px; text-align:center; border:1px dotted #ddd; margin-bottom:10px; } #end a { color:#6590DF; text-decoration:none;}

Tu vidíme spomínaný float:right;, ktorý určuje objektu MENU, aby bol vpravo. Šírka menu je zadefinovaná cez width: 180px; čo znamená, že menu má 180 pixelov. Ďalej tu máme špecifický príkaz, ktorý prikazuje mozzile (firefox-u), že výška obsahového bloku (content) má byť automatická. Veľmi zaujímavá je deklarácia objektu end. Tu môžeme vidieť, že šírka je nastavená na 935 pixelov. Pribudol tu aj nový "tag" - clear: both;, ktorý určuje to, že všetky objekty vľavo aj vpravo majú byť zarovnané nad a pod daný objekt. Text-align: center; prikazuje textu v objekte, aby bol vycentrovaný. Border: 1px dotted #ddd; prikazuje objektu, aby mal okolo seba orámovanie, ktoré je tvorené z bodiek jemnej sivej farby so šírkou 1 pixelu. Margin-bottom: 10px; prikazuje, aby objekty, ktoré budú pod týmto objektom boli vzdialené 10 pixelov.

Ďalšie riadky CSS kódu však potrebujú ďaľší výklad HTML kódu a tak v ďalšej časti sa dostaneme presne k tomu, čo obsahuje objekt MENU.