960 grid system je zanimljivi CSS šablon koji vam omogućava lako sastavljanje osnovnog kostura/izgleda vaše buduće web strane. Suština je da omogućuje često upotrebljivane dimenzije bazirane na širini od 960 pixela. Postoje dve varijante: prva je sa 12 kolona i širinama od 60px svake, a druga je sa 16 kolona i širine od 40px svake kolone. Zbunjuje vas da to kad pomnožimo i izračunamo matematički ne daje ukupno 960px? To je zato što svaka kolona ima marginu sa leve i desne strane od 10px, što znači da između svake kolone imamo 20px razmaka, a sa krajnje leve i desne strane 10px. Kako to izgleda vizuelno, možete pogledati ovde.
Kako koristiti?
Upotreba ovog šablona nije teška, moglo bi se reći i da je laka. Kao prvo treba da skinete šablon sa 960.gs stranice i stavite u direktorijum vašeg web projekta. Da napomenem zip arhiva sadrži dosta toga ne samo CSS fajl koji treba da se koristi. Unutar code direktorijuma zip arhive se nalaze CSS fajlovi i to 3 komada. Dva CSS fajla, reset.css i text.css služe kao vrsta nekog reseta/poništavanje svih stilova web čitača ako se oni učitaju. Ovo u suštini se ne mora koristiti, ali kako hoćete, nama je bitna upotreba 960.css fajla. Njega ćemo prvo učitati u našu stranicu gde hoćemo da upotrebimo:
<link type="text/css" rel="stylesheet" media="all" href="putanja_do_css/960.css" />
Sada posle toga možemo pristupiti kreiranju šablona izgleda stranice. Recimo napravićemo jedan osnovni sa zaglavljem, 3 kolone i footerom. Sledeći kôd ide između <body> i </body> tagova.
<div class="container_12">
<div class="grid_12">header</div>
<div class="grid_3">kolona 1</div>
<div class="grid_6">kolona 2</div>
<div class="grid_3">kolona 3</div>
<div class="grid_12">footer</div>
</div>
Kako radi?
960.css sadrži skup CSS klasa koje su unapred napisane i tako određene širine kolona za varijante. Ako ste pogledali šemu mogli ste lako zaključiti da kod varijante od 12 kolona „grid_3″ znači 3 kolone, što iznosi 3x60px + razmak između kolona (margina levo i desno = 20px, pošto je 3 kolone imamo 2 razmaka između njih = 40px) i sve to ukupno 220px!
I to je to. Naravno možete eksperimentisati i pokušati napraviti kompleksnije šablone ovo je bio samo jedan mali kratki uvod i kratko uputstvo. Možete posetiti matičnu stranicu i videti tamo nekoliko primera stranica koje koriste šablon i ovde opisani koncept.
Ljudi pomagajte!
Ovako, preuzela sam Vas CSS i upotrebila ga u izradi sajta http://www.superstitionsof.com. U pocetku sam bila odusevljena medjutim sada ne znam sta da radim.
Naime u Internet Exploreru izgleda savrseno tako da sam mislila da se i iz drugih browsera jednako vidi, medjutim juce sam se sokirala kada sam sajt pogledala iz Firefoksa. Tamo se jadan raspao i neznam kako da resim taj problem.
Sigurna sam da sam ja nesto zabrljala ali nemam pojma sta, pa VAS MOLIM DA MI POMOGNETE. Mislim da nije nista strasno i da je u pitanju jedna linija koda ili tako nesto.
U svakom slucaju znam da mi mozete pomoci, pa Vas jos jednom MOLIM da mi se javite putem maila a nakon toga vam mogu dati i svoj broj telefona i naravno sve sto je potrebno.
Puno Vas pozdravljam i unapred puno hvala!
Ocajna nespretna webmasterka
Pozdrav Mirjana!
Probaj da promenis border-width u klasi grid_9 na nesto manje, npr.:
.grid_9 {
background-color: #FFCC93; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #330000;
border: #FFCC93 double;
border-width: 0 10px 10px;
}
U sustini border je bio predebeo i zato je pomerio ceo div.
HVALA PUNO!
Probacu odmah,
divni ste!
Pozdrav!
Nema na cemu
Evo me,
Uspela sam da se spasem ali samo tako sto sam potpuno ukinula border. Cak i sa 5px isto reaguje.
Nema veze nije mi neophodan, samo sam htela da odvojim tekst od same ivice a ne znam za drugi nacin.
Veliki pozdrav, Mirjana!
Eventualno da probate:
p {
color: #330000;
font-family: Verdana, Arial, ‘Times New Roman’;
font-size: 12px;
margin: 20px;
}
i mozda
.grid_9 h3 {
margin-left: 20px;
}
U Firefox-u je rezultat ok, za IE ne bih znao reci.
Pozdrav, webija