Vylepšenia Blogu

V prvom rade sa pozrime na HTML našej stránky s detajlom...

<div id="article"> <div class="article_todo"> ... javascriptova funkcia ... <span class="article_print">Vytlač príspevok</span> <br/> <span class="article_send">Odporuč príspevok</span> </div> <h3>NADPIS ČLÁNKU</h3> <div class="article-date">Dátum publikovania</div> <div class="article-perex">Perex článku</div> <div class="article-content">Obsah článku</div> <div class="article-data"> <span class="article-theme">téma</span> | <span class="article-fixed">stály odkaz</span> </div> </div> #kotva pre komentáre  

Ako môžeme vidieť, opäť je tu niekoľko objektov, ktoré majú svoje samostatné identifikátory a preto ich vieme úplne presne špecifikovať. Ako úplne prvý objekt sa tu nachádza DIV s ID article. Toto je takzvaný kontajner pre všetky objekty, ktoré sú v ňom uložené. Vďaka tomu, že je celý článok v takomto kontajnery, vieme všetky objekty vo vnútri "pozíciovať" aj na relatívne pozície. O tom si však budeme písať pri vysvetlovaní CSS a menení práve tejto časti.

Odkedy blog.sk prešiel pod denník pravda, pribudla aj nová funkcia. Resp. 2 funkcie. Jednou je možnosť odoslania článku priateľovi a druhá možnosť je možnosť článok vytlačiť. Obe tieto funkcie sú skryté v objekte ktorý nemá presne definovaný názov, no vieme ho určovať cez triedu, ktorá sa volá article_todo. Vo vnútri tohto objektu sa nachádzajú ďalšoe dve samostatne ovládateľné triedy - article_print a article_send.

Hneď pod objektom s triedou article_todo máme heading - H3 - ktorý určuje v podstate nadpis článku v detajle. Ak nechceme ovplyvniť všetky heading 3-ky, musíme si našu CSS zapísať ako #article h3. Inak by sme ovplyvnili úplne všetky H3.

Hneď po názve nasleduje dátum vydania, ktorý je v objekte s triedou article-date. Potom nasleduje perex s triedou article-perex a hneď potom article-content.

Ešte pripomínam, že v CSS sa každý zápis definuje inak. Ak chceme definovať CSS pre objekty s identifikátormi, použijeme tento zápis:

#identifikator { vlastnost: hodnota; }

Ak chceme definovať iba triedu, použijeme tento zápis:

.trieda { vlastnost: hodnota; }

Po obsahu článku sa stretávame s objektom, ktorý má nadefinovanú tiriedu article-data, ktorá obsahuje 2 ďalšie objekty s triedami: article-theme a article-fixed. V týchto dvoch objektoch sa nachádzajú linky - hypertextové odkazy, ktoré môžeme práve vďaka tým dvom triedam ovplyvňovať.

Zvlášť sa pozrieme na komentáre, ktoré sú k článkom, nakoľko tie si (vzhľadom na formuláre) zaslúžia viac pozornosti.