zxz 17.02.2015 14:05
Predmet:CSS Box

Na slici imate pregled sta je sta odnosno na sta se odnosi koja naredba.
PreuzmiIzvorni kôd (HTML):
  4. div {
  5.     background-color: #C0C0C0;
  6.     width: 450px ;
  7.     padding: 15px;
  8.     border: 15px solid #800080;
  9.     margin: 25px;
  10. }
  12. <TITLE>Title of your page</TITLE>
  13. </HEAD>
  15. <div><b><h2>NAPOMENA:</h2></b>
  16. Nepoznavanje pravila, izbjegavanje
  17. itanja pravila i openito izbjegavanje sa njihovim upoznavanjemm, <b>NE OSLOBAA</b> vas odgovornosti i obaveze da se u skladu s navedenim pravilima ponašate.
  18. </div>
  19. </BODY>
  20. </HTML>
Prilozi:
css1.gif (Velicina datoteke:4.13 KB)

zxz 18.02.2015 11:15
Predmet:Border

PreuzmiIzvorni kôd (HTML):
  4. p.prvi {
  5.     border-style: solid;
  6.     border-width: 6px;
  7.     border-color: #FF0000;
  8. }
  9.  
  10. p.drugi {
  11.     border-style: solid;
  12.     border-width: 1px;
  13. }
  15. <TITLE>Border stil</TITLE>
  16. </HEAD>
  18. <p class="prvi">Prvi border stil.</p>
  19. <p class="drugi">Drugi border stil.</p>
  20. <p>Bez stila.</p>
  21. <p><b>Napomena:</b><br> border-width nema ucinka ukoliko ne dodamo i border-style.</p>

zxz 18.02.2015 11:47
Predmet:Outline-Stil

Primjer kada je sve u jednom redu boja stil i debljina.
PreuzmiIzvorni kôd (HTML):
  3. <STYLE type="text/css">
  4. p {
  5.     border: 1px solid green;
  6.     outline: red dotted thick;
  7. }
  9. </head>
  11. <p><b>Napomena:</b><br> IE8 podrzava samo ako je naveden tip dokumenta</p>
  12. </BODY>
  13. </HTML>

zxz 19.02.2015 10:35
Predmet:Margine

Primjer za margine.
PreuzmiIzvorni kôd (HTML):
  4. p {
  5.     background-color: yellow;
  6. }
  7.  
  8. p.marg {
  9.     margin-top: 100px;
  10.     margin-bottom: 100px;
  11.     margin-right: 150px;
  12.     margin-left: 50px;
  13.     background-color: red;
  14. }
  16. <TITLE>Margine</TITLE>
  17. </HEAD>
  19.  <p>Ovo je bez margina tekst samo sa zutom pozadinom</>
  20.  <p class="marg">E ovo je sa mrginama sa sve cetiri strane. Donja margina se i nemoze primijetiti ako nemamo neki tekst ispod ovoga teksta</p>
  21.  <p> Tekst bez margina</p>
  22. </BODY>
  23. </HTML>

zxz 20.02.2015 09:40
Predmet:Padding

PreuzmiIzvorni kôd (HTML):
  4. p {
  5.     background-color: #D8E4F8;
  6. }
  7.  
  8. p.pd {
  9.     padding-top: 85px;
  10.     padding-right: 20px;
  11.     padding-bottom: 15px;
  12.     padding-left: 150px;
  13. }
  15. <TITLE>Pading</TITLE>
  16. </HEAD>
  18. <p>Ovo je klasican tekst sa bojom pozadine</p>
  19. <p class="pd">Ovo je sa padding i sa bojom pozadine da bi se moglo bolje uociti</p>
  20. </BODY>
  21. </HTML>

zxz 20.02.2015 10:43
Predmet:Skriveno-visibility

PreuzmiIzvorni kôd (HTML):
  4. p.skriveno {
  5.     visibility: hidden;
  6. }
  8. </head>
  10. <TITLE>Pading</TITLE>
  11. </HEAD>
  13. <p class="skriveno">Ovo je tekst koji se ne vidi</p>
  14. <p>Ovo je tekst koji se vidi</p>
  15. </BODY>
  16. </HTML>

zxz 21.02.2015 12:41
Predmet:Pozicija objekta

PreuzmiIzvorni kôd (HTML):
  4. p.poz_a {
  5.     position: absolute;
  6.     left: 120px;
  7.     top:500px;
  8.     color: green;
  9. }
  10.  
  11. p.poz_r {
  12.     position: relative;
  13.     left: 15px;
  14.     top: 25px;
  15. }
  16. p.poz_f {
  17.     position: fixed;
  18.     top: 5px;
  19.     right: 5px;
  20.     color: red;
  21. }
  23. <TITLE>Pozicija objekata</TITLE>
  24. </HEAD>
  26. <p class="poz_a">Ovaj tekst ima apsolutnu poziciju</p>
  27. <p>Ovo je klasican tekst. Znaci tekst koji nema odredeni stil</p>
  28. <p>Ni ovaj tekst nema odredjeni stil</p>
  29. <p class="poz_f">Ovo je fiksna pozicija. Znaci bilo sta da radite tekst ostaje na istom mjestu.</p>
  30. <p class="poz_r">Ovo je tekst sa relaticnom pozicijom. Znaci pozicija u odnosu na predhodni objekat"</p>
  31. </BODY>
  32. </HTML>

zxz 22.02.2015 13:28
Predmet:Floating-poravnanje

PreuzmiIzvorni kôd (HTML):
  6. img {
  7.     float: right;
  8. }
  10. <TITLE>Poravnanje elementa</TITLE>
  11. </HEAD>
  13.  <p>Ovo je tekst koji je van poravnanja i on ce ici preko cijele stranice, zavsno samo od duzine teksta.
  14.   Ako  vam je monitor veliki morat cete se nakucati teksta da vidite ucinak ili pak smanjite prozor Borowsera</p>
  15. <p><img src="nekaslika.gif" width="300">
  16. Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
  17. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
  18. Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
  19. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
  20. Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
  21. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
  22. Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
  23. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
  24. Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
  25. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
  26. Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
  27. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
  28. Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
  29. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
  30. </p>
  31. </BODY>
  32. </HTML>

zxz 24.02.2015 23:13
Predmet:Poravnanje

PreuzmiIzvorni kôd (HTML):
  4. .centar {
  5.     margin-left: auto;
  6.     margin-right: auto;
  7.     width: 50%;
  8.     background-color: #D4D0C8;
  9. }
  11. <TITLE>Poravnanje u centar</TITLE>
  12. </HEAD>
  14. <div class="centar">
  15.   <p>Ovo je div sa klasom Centar. Znaci tekst ce se pokazivati negdje u serdini stranice</p>
  16.   <p>Koliko gog kucali teksta izmedju otvorenog taga div i zatvorenog taga div tekst ce se ponasati kao sto je odredjeno u klasi centar</p>
  17. </div>
  18.  
  19. <p><b>Napomena: </b>Ovo nece raditi na IR8</p>
  20. </BODY>
  21. </HTML>

zxz 24.02.2015 23:18
Predmet:Poravnanje-Desno

PreuzmiIzvorni kôd (Visual Basic):
  1. <HTML>
  2. <HEAD>
  3. <style>
  4. .desno {
  5.     position: absolute;
  6.     right: 5px;
  7.     width: 300px;
  8.     background-color: #ECE9D8;
  9. }
  10. </style>
  11. <TITLE>Poravnanje u centar</TITLE>
  12. </HEAD>
  13. <BODY>
  14. <div class="desno">
  15.   <p>Ovo je div sa klasom desno. Znaci tekst ce se pokazivati na desnoj strani i duzini od 300px</p>
  16.   <p>Desna margina je samo 5px. Vije mozete staviti na nulu ili pak povecati</p>
  17. </div>
  18. </BODY>
  19. </HTML>