Centar za edukaciju-BiH

iCentar → Racunari i oprema → Programirannje i baze podataka → Html/CSS → arhiva


switch Lista naslova: CSS Primjeri
Prosiri i skupi Opcije teme
Stranice (4):1,2,3,4

#11 17.02.2015 14:05
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,612


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>


Slicice prilozenih slika:
css1.gif
Tip datoteke:Informacije o tipu datoteke za:gif gif
Preuzimanja:350
Velicina datoteke:4.13 KB
Velicina slike: 570 x 332 Pikseli

Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#12 18.02.2015 11:15
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,612


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>
Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
Ovaj post je ureden 1 puta. Posljednja izmjena 18.02.2015 11:31 od strane zxz. ↑  ↓

#13 18.02.2015 11:47
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,612


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>
Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#14 19.02.2015 10:35
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,612


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>
Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#15 20.02.2015 09:40
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,612


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>
Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#16 20.02.2015 10:43
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,612


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>
Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#17 21.02.2015 12:41
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,612


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>
Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#18 22.02.2015 13:28
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,612


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>
Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#19 24.02.2015 23:13
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,612


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>
Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#20 24.02.2015 23:18
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,612


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>
Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

Stranice (4):1,2,3,4

Srodne teme

Ko je online?

Aktivni clanovi:
nema clanova


Kontakt
Sva vremena su GMT +02:00. Trenutno vrijeme: 7: 32 pm.