Planeta Srbija

Ovo je pitanje koje se jako često ponavlja, a najviše na nekim forumima kao što su EliteSecurity. Pitanje uglavnom postavljaju ljudi koji žele da nauče kako da prave stranice, ali još uvek to ne umeju da urade, pa postavljaju pitanja tipa: Pozz, da li ima neko da me nauči kako da napravim takav i takav sajt? Zdravo, [...]

Skoro sam tražio forum aplikaciju napisanu u ASP VBScript jeziku, za jedan sajt na kojem trenutno radim. Našao sam ono što mi je trebalo i to je Snitz 2000 forum aplikacija. Znam, veoma je zastarela, i mogao sam da uzmem i neki drugi, ali mi trebaju samo osnovne stvari, ne tamo neke fancy gluposti (privatne poruke, rođendani i slično). Kako sam kod nije pisan da po XHTML standardu, očekivao sam da je ono što dobijem bude jako loše. To loše nije zbog toga što kod nije XHTML validan, ni zbog toga što je prepun tabela, već zbog toga što sadrži jako zastareo HTML kod (da, onaj što se ne koristi zbog CSS-a).

Pošto sam morao da se bakćem sa CSS-om kako bih poništio stare vrednosti (font, center, basefont tagovi, i neki atributi, kao bgcolor i slično), sledi tutorijal kako poništiti zastareo HTML korištenjem CSS-a. Verujem da će mnogima koristiti, jer i dalje ima dobro napisanih aplikacija sa veoma loše napisanim HTML-om.

Prvi korak - font tag

Font tag je najzastupljeniji u celoj aplikaciji. Realno, on je meni i najveći problem, jer zbog njega ne mogu da formatiram sadržaj onako kako bih želeo. Prvo što sam dodao u CSS kod je kratka deklaracija:

color: inherit;

To bi (u teoriji) trebalo da poništi bilo kakvo bojenje teksta font tagom. Naravno, Internet Explorer je (i) ovaj put zakazao (odnosno, nisam dobio ono što sam želeo). Tu kao spas dolazi mogućnost korišćenja neke vrste JavaScripta (ispravite me ako grešim) u CSS-u, kao “fantastični” feature IE-a.

color: inherit; color: expression(this.parentNode.currentStyle['color']);

Ovo rešava taj problem. Sledeći problem odnosi se na samo postavljanje fonta, jer je to i svrha font tag-a. Prvo što sam dodao u font selektor je resetovanje podešene familije fontova. Koristiću skraćenu varijantu (samo font), jer Opera ima problema sa čitanjem font-family atributa.

font: inherit; font-family: expression(this.parentNode.currentStyle['fontFamily']);

Rešen je i ovaj problem. Jedino što još ostaje je da resetujem veličinu fonta i to bi bilo to, barem što se font taga tiče.

font-size: 100%;

Ova deklaracija radi u svim browserima. Dakle, generalni reset font (i basefont) taga izgleda ovako:

font, basefont { color: inherit; color: expression(this.parentNode.currentStyle['color']); font: inherit; font-family: expression(this.parentNode.currentStyle['fontFamily']); font-size: 100%; }

Success! Uspeo sam da se rešim najdosadnijeg (i najrasprostranjenijeg ako mogu da dodam) zastarelog HTML koda.

Drugi korak - ostali zastareli tagovi

Za svaki slučaj, odlučio sam da poništim još par tagova, kao što su center, u, s, blink, strike, marquee i nobr. Kao i kod resetovanja font i basefont tagova, i ovde se koriste slične tehnike (reset za normalne browsere, a zatim reset i za Internet Explorer).

center { text-align: inherit; text-align: expression(this.parentNode.currentStyle['textAlign']); } s, strike, u { text-decoration: inherit; text-decoration: expression(this.parentNode.currentStyle['textDecoration']); } nobr { white-space: normal; } marquee { overflow: visible; -moz-binding: none; } blink { text-decoration: none; }

Dakle, ovim sam se rešio i uticaja ovih zastarelih tagova, iako ih u osnovnom kodu aplikacije nema (previše).

Treći korak - atributi

Pod ovime se podrazumeva reset HTML atributa, kao što su bgcolor, valign, border i slični tagovi, koje je zamenio CSS. Prvi od popravljenih je dosadni align atribut, kojeg sam se rešio na sledeći način:

*[align] { text-align: inherit; } * { text-align: expression(this.align ? this.parentNode.currentStyle['textAlign'] : ''); }

Prvi deo se odnosi na ostale browsere, dok se drugi odnosi na Internet Explorer (jer IE ne prepoznaje attribute selektore). Sledeći su atributi za img tagove. Sada želim da se otarasim border, hspace i vspace atributa, koji su postavljeni u HTML kodu.

img { border: none; margin: 0; }

Sada nastaje problem. Vidite, svi browseri čitaju hspace i vspace atribute kao margine, ali ne i Internet Explorer, pa je praktično nemoguće rešiti ovaj problem uz samo CSS, već se može rešiti pomoću JavaScript-a (ko zna kako, neka ostavi komentar).

Sledeće, u duhu popravke zastarelog HTML-a, resetovaću i pozadinsku boju stranice (bgcolor atribut):

body { background: transparent; }

To je sve što se tiče zastarelih atributa. Verovatno ih ima još, ali ovo su svi koji su mi trebali za popravku forum aplikacije.

Poslednji korak - tabele

Kao što sam napomenuo, source aplikacije je prepun tabela, i kao poslednji korak ostavio sam rešavanje i njih kao “minornog” problema. CSS je u ovom slučaju veoma jednostavan, i (za divno čudo) nema nikakvih expression-a.

table, tr, th, td { width: auto; height: auto; background: transparent; vertical-align: inherit; border: none; border-collapse: collapse; } Rezime

Ovo je u trenutnom vremenu veoma dobro rešenje. Ipak, trebalo bi razmisliti i stvarno popraviti kod (na pravi način), a ne CSS trikovima. Ipak, kada imate postojeći kod, koji je BTW tuđ i glomazan, ovakvo rešenje je i više nego dobrodošlo.

Možete preuzeti kompletno rešenje (sa komentarima).

Evo i prvog tutorijala kojeg sam ovde objavio. Kao što sam naslov kaže, radi se o stilizovanju “message box-ova”, odnosno mesta na kojima se ispisuju poruke. Te poruke su dosta korisne kada se prikazuju tokom ili nakon izvršavanja nekog upita, jer korisniku daju informaciju šta se dešava. Sada želim da podelim sa svima neka rešenja [...]

Mala zajebavancija medju blog svetom, CSS Naked day, pa eto da se priključim borbi protiv globalnog zagrevanja time što ću obnažiti moj blog

Evo kod Nikole cele inicijative na domaćem jeziku, pa ako Vas interesuje više detalja skoknite tamo.

Do sledeće prehlade…

Убацио сам подразумевану тему за Drupal портовану на WordPress под називом Garland. Разлог, осим мале промене, јесте и флексибилна ширина теме. На високим резолуцијама типа 1680×1050 гледање сајта предвиђеног за резолуцију 800×600 је у најмању руку заморно и осакаћено. (more…)

Написао Александар Урошевић за блог Записи. Слободна употреба садржаја у складу са BY-CC-SA 3.0 лиценцом.

Повезани записи Тема иконица Gnomaws 0.2 (2) Gnomaws 0.3 (2) Да л’ сам први? (0) Avast не воли Google? (3) Да ли је legalno.org превара? (15)

Ceo dan sam danas proveo radeći na ovome, i evo ga! Novi dizajn sajta www.avramtar.com! Pravi Web 2.0 dizajn. Hehe, štagod to značilo

Kompletno tableless odrađen (čist CSS), krupni fontovi, shiny logo, Web2.0 badge (”beta”), “stripes” pozadina, rounded corners… to je ono što ga sačinjava. Preovlađuju nijanse žute boje iii… ma šta više pričam, evo pa pogledajte:

sl. 1. Novi dizajn AVrAmTARa

Jel’ da da je lep?

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 tovaj CSS, i to je to - uzivajte u vasem CSS meniju.

elem, danas mi je rođendan, par novih dešavanja oko domaćih blogova, i diskusija o css izazovu (fka css fajt ;)