CSS

01.01.2005.

Ljudi, koristite XHTML

Upravo sam napisao ogroman post i slučajno zatvorih browser i izgubi mi se sve. Nemam šta sad puno pametovati, bitno je samo da koristite XHTML, a zaboravite na HTML.

XHTML je nova, čistija i preciznija (ako se tako može reći) verzija HTML-a nastao komibiniranjem HTML 4.01 i XML-a, uzevši elemente od HTML-a, a sintaksu od XML-a. Gotovo je identičan HTML-u 4.01, tako da nema mnogo izmjena. XHTML je stvoren kako bi s vremenom u potpunosti zamijenio i izbacio iz upotrebe HTML.

W3C od januara 2000-te preporučuje korištenje XHTML-a, a to vam znači da je stabilan i provjeren od strane ljudi koji stoje iza W3C organizacije.

Generalno gledajući većina današnjih web stranica na World Wide Webu je napisana "lošim" HTML kôdom, a upravo XHTML vam ne dâ da pišete "loš" kôd već on mora biti 100% tačan i mora poštivati neka pravila.

Danas na tržištu imate mnoštvo browsera, od kojih se neki pokreću na kompjuterima, neki na mobitelima, a neki na pocket računarima. Ova dva posljednja spomenuta nemaju ni resursa ni snage da interpretiraju "loš" markup. Tako je, misleći i na sadašnjost (obične PC računare) i na budućnost (expanziju moćnih mobitela i pocket računara) te kombinirajući snagu HTML-a i XML-a, stvoren markup koji je ostaje upotrebljiv i danas i koji će biti upotrebljiv u budućnosti. To je još jedan od razloga zašto je stvoren XHTML i zašto ga odmah sada trebate početi koristiti.

Više o XHTML-u (EXtensible HyperText Markup Language) pročitajte na starom dobrom W3C-u.

Pokušaću pretražiti bosanskohercegovačke web stranice i naći one koje koriste XHTML:

sarajevo-x.com - XHTML 1.0 Transitional
Blogger.ba - XHTML 1.0 Transitional
Predsjednistvobih.ba - XHTML 1.0 Transitional
Eusrbih.org - XHTML 1.0 Transitional
CRA.ba - XHTML 1.0 Transitional
Pungas.com - XHTML 1.0 Transitional

To je nažalost sve što sam uspio nabrzinu naći. Ako vi nađete još koji web sajt sa XHTML-om, javite na komentarima pa ću ga ja dodati.

Objavio/la adminx u 23:17, 10 komentar(a), print, #

01.01.2005.

Document Type Definition

Ukoliko želite kreirati web stranice koje imaju validan XHTML markup kojeg kontroliše CSS, prva stvar koju morate uraditi, kako bi bili sigurni da nećete dobiti nešto što ne želite, jeste odrediti DTD (Document Type Definition) vašeg dokumenta.

Nepotpun ili netačan DTD može vam prouzrokovati mnogo problema u CSS-u. Kako izgleda pravilan i potpun DTD možete vidjeti ovdje:

[b]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">[/b]

Ovo je bio primjer Transitional XHTML 1.0 DTD-a, koji je danas i najrasprotranjeniji i koristi se upravo na blogovima. Listu svih validnih DTD-ova koje možete koristiti pogledajte ovdje.

Ukoliko ne budete koristili pravilan i tačan DTD, možete zaboraviti na pixel-perfect dizajn.

Objavio/la adminx u 22:16, 1 komentar(a), print, #

05.12.2004.

Kako vertikalno centrirati ?

Zasigurno je već svima poznato kako W3C, doduše odavno, al u posljednje vrijeme sve više ne preporučuje korištenje tabela pri izradi izgleda stranice. Tabele su vam omogućavale da na jednostavne načine napravite izgled vašeg HTML dokumenta sa neograničenim brojem kolona i redova, te za razliku od layera, nisu vas ograničavale pri vertikalnom poravnanju. Znači vrlo lako se mogao podesiti bilo kakav vertikalni alignement u bilo kojoj ćeliji. Ali, danas pošto napokon, dolazi vrijeme stranica koje svoj dizajn ne grade na tabelama, što donosi mnoge prednosti, već na divovima - tableless, postoje i mnoga ograničenja koja vam ne omogućavaju da radite ono što ste radili sa tabelama. Jedno od njih je i nepostojanje vertikalnog poravnanja, tj. alignementa. Da skratimo priču, i pređemo na današnji savjet.

Dok mnogi pokušavaju da vertikalno centriraju <div> pomoću javascripta, ljudi su se dosjetili jednog drugog dosta jednostavnijeg i bezbolnijeg riješenja. O čemu se radi? Napravite jedan <div> i nazovite ga "kontejner". Unesite u njega neki tekst i to je sve što trebate napraviti u HTML dokumentu.

Znači HTML kôd treba da izgleda ovako:
[pre]<html>
<head>
<title>Vertical alignement</title>
</head>
<body>
<div id="kontejner">
Lorem ipsum dolor sit amet...
</div>
</body>
</html>
[/pre]
Sada možete početi pisati CSS. Što se tiče CSS-a, vertikalno poravnanje se postiže tako što se <div> #kontejner pozicionira apsolutno, te mu se podese atributi left na 50% i top na 50%. Zatim se tom divu moraju dodati negativne margine s lijeve i gornje strane. Numeričke vrijednosti margina moraju iznositi polovinu širine (za lijevu marginu), i polovinu visine diva (za gornju marginu).

CSS treba da izgleda ovako:
[pre]body
{
font-family: verdana;
font-size:10px;
color: white;
background-color: #003;
margin: 0px;
}
#kontejner {
background-color: #f00;
margin-top: -35px;
margin-left: -150px;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 75px;
}[/pre]

Objavio/la adminx u 23:04, 4 komentar(a), print, #

05.12.2004.

Šta je to CSS?

Na ovom blogu pokušaću vam napisati što više tutorijala, savjeta i trikova za CSS.

Da krenemo od početka...

Šta je to CSS?
CSS je skraćenica od "Cascading Style Sheets", a služi definiranju stilova koji određuju izgled HTML elemenata (font, boje, pozadine, razmake...). Ti stilovi se pohranjuju u "Style Sheets", externe fajlove sa .css extenzijom, ili jednostavno se pišu u zaglavlju HTML dokumenta ili čak inline, tj. na samim elementima. Externi stilovi su i najbolji jer vam omogućuju uštedu vremena pri radu i pri redizajniranju vašeg HTML dokumenta.

CSS su izmislili i specificirali momci iz W3C-a, a pojavili su se sa HTML-om 4.0 kao rješenje koje je proizašlo iz sve veće potrebe za odvajenjem sadržaja stranice od dizajna. HTML je od početka zamišljen kao takav da se brine samo o sadržaju - znači trebao je samo da prikazuje paragrafe, tabele, headinge, itd dok bi se za izgled brinuli browseri. Ali, kako su mnogi tvorci browsera počeli dodavati dodatne HTML tagove (kao font tag i color atribut) originalnom HTML-u, mnogi developeri sve su više nailazili na poteškoće u izradi svojih stranica. Da ne bi došlo do totalne zbrke, World Wide Web Consortium (W3C) - neprofitabilna organizacija, koja je odgovorna za standardizaciju HTML-a, kao dodatak verziji 4.0 HTML napravila je STILOVE (styles). Tada su i Netscape 4.0 i Internet Explorer 4.0 podržavali stilove.

Gledajući iz ugla jednog developera, dolazak CSS-a mnogi smatraju prekretnicom u web dizajnu jer je omogućio developerima da kontrolišu stilove i izgled više HTML stranica odjednom. Tako da danas developer može definisati jedan stil za neki element i iskoristiti ga na onoliko stranica koliko želi.

Zašto Cascading?

CSS ili Cascading Style Sheets, dobile su naziv cascading zato što se svi stilovi definisani za jedan element spajaju u jedan 'virtualni' stil i to po prioritetima sljedećim redom:

[pre]1. Defaultni stil browsera
2. Externi Style Sheet
3. Interni Style Sheet (unutar <head> taga)
4. Inline Style (unutar HTML elementa)[/pre]

Najveći prioritet ima INLINE stil i on poništava sve prethodno navedene stilove.

Objavio/la adminx u 01:29, 5 komentar(a), print, #

<< 07/2006 >>
ned	pon	uto	sri	cet	pet	sub
						01
02	03	04	05	06	07	08
09	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31