Draganov blog - AXXT

Ogorčen količinom loše dizajniranih sajtova koje u zadnje vreme viđam na zoni i DPT-u reših da makar malo pokušam da doprinesem edukaciji.

Danas ću pokušati da objasnim sta je to “Vertikalni ritam” (moj slobodni prevod)

sve to naravno ima objasnjeno na netu, posebno lepo na ovoj stranici a boga mi i ovde, ali sto bi to neko čitao, kad može lepo da zakači svoj sajt na forum i još da se ljuti kad mu neko kaže da to njegovo ne vaja i da nije u pravu.

elem, ovde sam stavio primer sa dobro i leše podešenim marginama, po meni razlika je više nego očigledna, evo i slike za one koji i dalje ne kapiraju u čemu je štos

Znači nije poenta da vertikalni razmak između svih elemenata bude isti ili potpuno odokativan (kao u lošem primeru), već treba za mernu jedinicu uzeti visinu jedne linije običnog teksta i onda srazmerno tome podesiti sve elemente na stranici.

naravno, može neko da izabere da koristi 4x i 3x ili 2x i 4x razmake, sve zavisi do stranice, nije ni svaka situacija ista, no važno je da postoji neka pravilnost i da se ne krši vertikalni ritam stranice.

• DEMO
• CSS Fajl

CSS Menu - mali, brz, lak za uptrebu, dobar za SEO

Ovo je moja omiljena tehnika pravljenja CSS menija. I principu to je kombinacija par CSS tehnika (image replacement, css list menus..).
Pokazalo se kao sasvim ok tehnika, apsolutno isto se prikazuje u FF, IE i Operi i ima sasvim normalan HTML ispod haube, tako da ce Google i ostali pretrazivaci sasvim korektno indeksirati vas sadrzaj - a to je valjda najvaznije.

Primer

Uputstvo za upotrebu

1) Napraviti pozadinsku sliku

Paznja ovo je jedna slika, a ne dve.
Ako je vas meni 400px sa 50px (kao u ovom primeru) pozadinska slika treba da bude 400px by 100px. Gornja polovina je za normalno stanje, a donja za rollover.

2) HTML kod

<div id=“main-nav”>
	<ul>
		<li><a href=“#” class=“home”><span>Home</span></a></li>
		<li><a href=“#” class=“about”><span>About us</span></a></li>
		<li><a href=“#” class=“faq”><span>F.A.Q.</span></a></li>
		<li><a href=“#” class=“contact”><span>Contact</span></a></li>
	</ul>
</div>

3) Ubaciti CSS

Sve sto ostaje je ubaciti ovaj CSS, i to je to - uzivajte u vasem CSS meniju.