http___www.izrada-webstranica.com_css.html_1.xml
1.1 1.2 1.3 2.1 2.2 3.1 3.2 3.3 3.4 6.1 8.1 10.1 11.1 12.1 13.1 15.1 17.1 18.1 19.1 20.1 21.1 22.1 24.1 26.1 27.1 29.1 30.1 31.1 36.1 37.1 38.1 39.1 40.1 41.1 42.1 43.1 44.1 45.1 46.1 47.1 51.1 52.1 53.1 54.1 55.1
In my previous post I was exploring the effect containing blocks have on absolutely positioned elements. I did say that containing blocks have an effect on z-index as well. The effect is that elements with a higher z-index but within a containing block are rendered behind an element with a smaller z-index. It turns out that the effect is probably a bug and that it only happens in older versions of IE, that is IE6 and IE7, IE8 renders correctly. I know its a complete pain to develop for old versions of any browser, I still have that scars from developing for Netscape 4 however a professional developer cannot pick and choose which browsers to support and like it or not my clients demand that I can produce sites that render in IE6 and 7. This is how the problem shows up. I reused the HTML from the previous post. This time I have a red div that has a z-index of 2 and a green div with a z-index of 1. Like this Positioning .container background-color: Blue; position: relative; padding: 5px; margin: 0px; .contained_p background-color: Red; position: absolute; top: 10px; left: 10px; margin: 0px; z-index: 2; .free_p background-color: Green; position: absolute; left: 10px; margin: 0px; z-index: 1; should be behind paragraph 1 paragraph 2 paragraph 3 paragraph 4 paragraph 5 paragraph 6 paragraph 7 paragraph 8 paragraph 9 Container should be on top The red div should be on top as it has the highest z-index however in IE6 and IE7 it looks like this it appears that the z-index value comparison is only valid for elements that are in the same containing block in IE6 and IE7 In IE8, Firefox and Opera it renders correctly like this Its pretty easy to see the effect when the HTML has been stripped back, however in the middle of a complex page that has some weird positioning or z-index problem then this can be very difficult to track down. Tags:
1.1 2.1 3.1 3.2 5.1 7.1 7.2 11.1 11.2 14.1 17.1 17.2 20.1 21.1 24.1 24.2 24.3 24.4 25.1 25.2 28.1 29.1 32.1 33.1 36.1 37.1 37.2 42.1 46.1 47.1 50.1 55.1 59.1 60.1 63.1 64.1 69.1 70.1 73.1 73.2 74.1 75.1 76.1 76.2 76.3 76.4 81.1 84.1 85.1 86.1 88.1 89.1 90.1 95.1 96.1 99.1 100.1 102.1 103.1 104.1 105.1 106.1 107.1 108.1 111.1 111.2 112.1 113.1 114.1 115.1 115.2 117.1 118.1 119.1 120.1 121.1 122.1 123.1 126.1 129.1 129.2 129.3 129.4 129.5 131.1 132.1 133.1 134.1 135.1 136.1 137.1 140.1 142.1 143.1 146.1 146.2 146.3 146.4 148.1 149.1 150.1 151.1 152.1 153.1 154.1 157.1 159.1 160.1 166.1 166.2 168.1 169.1 170.1 171.1 172.1 173.1 174.1 177.1 179.1 180.1 185.1 186.1 188.1 189.1 191.1 192.1 193.1 196.1 197.1 198.1 199.1 199.2 199.3 200.1 201.1 202.1 203.1 203.2 203.3 203.4 203.5 204.1 205.1 205.2 205.3 205.4
Što je CSS? CSS je skraćenica za Cascading Style Sheets, to je stilski jezik koji se koristi za definiranje izgleda Web stranice i pozicioniranje njezinih elemenata dok se HTML koristi za kreiranje strukture Web stranice. CSS se može pisati unutar samog HTML dokumenta ili se može pozvati vanjski CSS dokument koji će sadržavati CSS kod. Zbog jednostavnosti, količine dokumenata i činjenice da je ovo tutorijal za početnike mi ćemo CSS pisati unutar HTML dokumenta iako se inače za naprednije korisnike preporučuje da se piše u zasebnom dokumentu. Ovdje se piše sav CSS kod Kada bismo CSS-om htjeli tekst naslova (heading 1) obojati u crnu boju i definirati veličinu fonta od 14 pixela to bismo napravili na sljedeći način. Prvo definiramo koji element (selektor) ćemo stilizirati: Nakon toga definiramo područje unutar kojega ćemo pisati stilove za taj element. Stilovi se pišu unutar najobičnijih vitičastih zagrada: tu ćemo pisati stilove za h1 Unutar vitičastih zagrada napisati ćemo da želimo da font bude crne boje i veličine 14 px. Za one koji neznaju što je px, to je mjerna jedinica koja se koristi prilikom izrade Web stranica, 1 pixel = 0.26 mm to znači da 14 pixela = 3.70 mm.: color: black; font-size: 14px; Na predhodnom primjeru vidi se da se CSS stilovi se sastoje od 2 djela, svojstvo i vrijednost. Svako svojstvo ima neku vrijednost npr. u našem primjeru svojstvo color ima vrijednost black, a svojstvo font-size ima vrijednost 14px. Nakon svojstva piše se dvotočka koja odvaja svojstvo i njegovu vrijednost (color: black) a nakon vrijednosti piše se točka zarez (color: black;). Točka zarez daje nam do znanja da tu svojstvo sa svojom vrijednosti završava. Sada ćemo na isti način stilizirati heading 2 naslov. Njega ćemo samo za primjer obojati bjelom bojom i odrediti veličinu fonta 12 pixela: color: black; font-size: 14px; color: white; font-size: 12px; CSS u HTML dokumentu CSS style tagovi se pišu u headeru HTML dokumenta. Kreirat ćemo jedan prazan HTML dokument, ako neznate kako provjerite prvi dio našeg tutorijala u kojemu je sve objašnjeno: izrada Web stranica Naslov Naslov Podnslov Praznome HTML dokumentu dodat ćemo h1 i h2 naslove te njihove CSS stilove koje smo prethodno napisali da vam prikažemo kako CSS izgleda u svom prirodnom okruženju. Naslov color: black; font-size: 14px; color: white; font-size: 12px; Naslov Podnslov Sada su oba dva naslova stilizirana CSS-om. Mi smo u primjeru koristili samo dva svojstva boju (color) i veličinu fonta (font-size), ali CSS im mnogo više svojstava kojima se može stilizirati cijela Web stranica a ne samo njen tekst. Neka CSS svojstva koje se najčešće koriste i neke njihove vrijednosti: HTML klase Naš HTML kod moramo pripremiti da bi što lakše unutar njega mogli integrirati CSS stilove. Pripremu HTML-a ćemo izvršiti tako da ćemo svim HTML tagovima dodjelit određene klase. HTML klase koriste se da bi se uz pomoć njih HTML elementimd dodijelio nekakav stil. U nastavku ćemo prikazati primjer kako se dodjeljuju HTML klase i kako se definiraju njihovi stilovi: Naslov .glavni-naslov{ color: black; font-size: 14px; .podnaslov{ color: white; font-size: 12px; Naslov Podnslov Stiliziranje Web stranice CSS-om Nakon završetka prvog djela tutoriala izrada web stranica, krećemo na drugi dio u kojemu ćemo stilizirati HTML strukturu Web stranice. body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; - Kao što se   tag odnosi samo na paragraph, tagovi body i html odnose se na cijelo Web sjedište. Unutar ova dva taga unjet ćemo svojstva I njihove vrijednosti koje će se odnositi na cijlo Web sjedište - Svaki preglednik (browser) Web stranicama dodaje razmak na rubovima kojega smo uklonili postavljanjem vrijednosti margin i padding na nulu. - Definirali smo font koji će se koristiti na cijeloj Web stranici. - Boja pozadine koje će se koristiti na cijeloj Web stranici. - Pošto se naša Web stranica prilagođava veličini različitih ekrana postavili smo njenu minimalnu širinu. Širinu smo ograničili jer ispod te širine naša Web stranice nebi dobro izgledala. body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; Kao što znamo linkovi se pišu na sljedeći način  link . Kada u CSS-u navedemo svojstvo a znači da ćemo njime stilizirati sve linkove. Sada smo sve linkove obojali navedenom bojom. Ovaj kod #e4f5fd; zove se RGB kod, pojednostavljeno to znači da svaka boja koja postoji ima svoj kod, npr. crna boja je #000000; bijela boja je #FFFFFF; crvena boja je #FF0000; itd. RGB kodove svih postojećih boja možete saznati na sljedećoj Web stranici: RGB Color Codes Chart. body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; a:hover{ text-decoration:none; hover označava stanje kada netko pokazivačem miša pređe preko određenoga elementa (eng. hover = hrv. lebdjeti). a:hover označava stanje kada netko pokazivačem pređe preko nekoga linka. Znači kada netko pređe mišem preko linka ukloniti će se njegovo podcrtavanje. To je standardni efekt koji se koristi zbog bolje preglednosti. Evo primjer kako to funkcionira, pređite mišem preko ovoga linka: primjer hover efekta body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; a:hover{ text-decoration:none; Ovo vrijedi za sve paragrafe na Web stranici. Ovim stilom definirali smo boju teksta koji se javlja u paragrafima body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; a:hover{ text-decoration:none; .menu{ height:50px; margin:0px auto; position:relative; color:black; box-shadow:0px 0px 5px 5px #3d78b3; background-color:#3d78b3; Redom ćemo objasniti što smo sada stilizirali u menu klasi. - height:50px; Odredili smo visinu ovog područja - width:100%; Odredili smo širinu područja - margin:0px auto; Vrijednost margine smo definirali na ovaj način nebili centrirali cjeli menu na sredinu ekrana. Prva vrijednost se odnosi na vertikalnu marginu, druga na hosrizontalnu. Postavljanjem horizontalne margina na vrijednost auto centrirali smo taj element na sredinu. - position:relative; Relativno pozicioniranje na Web stranici - z-index:9999; Elementi koji imaju z-index vrijednot npr. 15, prikazivat će is ispod elemenata sa z-index vrijednosti od npr. 16. Postavljanjem z-index vrijednosti na 9999 očito je da želimo da se ovaj element pokazuje iznad svih ostalih. - color:black; Boja teksta unutar ovog elemenata biti će crna - box-shadow:0px 0px 5px 5px #3d78b3; Ovo svojstvo definira sjenu elementa. Svojstvo ima 5 vrijednosti, prve četri su u pixelima a jedna je boja. Prva vrijednost označava vertikalno pozicioniranje sjene, druga horizontalno. Treća vrijednost označava koliko će sjena biti raširena. Četvrta vrijednost označava količinu zamagljenosti sjene a zadnja vrijednost je boja sjene. - background-color:#3d78b3; Definirali smo boju pozadine. Dali smo vam neke osnovne primjere CSS stiliziranja da bi shvatili na koji način funkcioniraju i kako ih se treba koristiti u kombinaciji sa HTML strukturom stranice. Sada ostaje na vama da samostalno eksperimentirate i dizajnirate CSS prema vašim željama i potrebama. Da biste nastavili svoju CSS edukaciju predlažemo jedan od najboljih resursa za učenje, gdje uz praktične primjere možete i samostalno isprobavati vlastite CSS kodove: CSS Tutorial. Sretno :)