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

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): <HTML> <HEAD> <style> div { background-color: #C0C0C0; width: 450px ; padding: 15px; border: 15px solid #800080; margin: 25px; } </style> <TITLE>Title of your page</TITLE> </HEAD> <BODY> <div><b><h2>NAPOMENA:</h2></b> Nepoznavanje pravila, izbjegavanje 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. </div> </BODY> </HTML>
Prilozi: css1.gif (Velicina datoteke:4.13 KB)

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):

<HTML>
<HEAD>
<style>
div {
background-color: #C0C0C0;
width: 450px ;
padding: 15px;
border: 15px solid #800080;
margin: 25px;
}
</style>
<TITLE>Title of your page</TITLE>
</HEAD>
<BODY>
<div><b><h2>NAPOMENA:</h2></b>
Nepoznavanje pravila, izbjegavanje
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.
</div>
</BODY>
</HTML>

Prilozi:
css1.gif (Velicina datoteke:4.13 KB)

zxz	18.02.2015 11:15
Predmet:Border PreuzmiIzvorni kôd (HTML): <HTML> <HEAD> <style> p.prvi { border-style: solid; border-width: 6px; border-color: #FF0000; } p.drugi { border-style: solid; border-width: 1px; } </style> <TITLE>Border stil</TITLE> </HEAD> <BODY> <p class="prvi">Prvi border stil.</p> <p class="drugi">Drugi border stil.</p> <p>Bez stila.</p> <p><b>Napomena:</b><br> border-width nema ucinka ukoliko ne dodamo i border-style.</p>

zxz

18.02.2015 11:15

Predmet:Border

PreuzmiIzvorni kôd (HTML):

<HTML>
<HEAD>
<style>
p.prvi {
border-style: solid;
border-width: 6px;
border-color: #FF0000;
}
p.drugi {
border-style: solid;
border-width: 1px;
}
</style>
<TITLE>Border stil</TITLE>
</HEAD>
<BODY>
<p class="prvi">Prvi border stil.</p>
<p class="drugi">Drugi border stil.</p>
<p>Bez stila.</p>
<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): <HTML> <HEAD> <STYLE type="text/css"> p { border: 1px solid green; outline: red dotted thick; } </style> </head> <body> <p><b>Napomena:</b><br> IE8 podrzava samo ako je naveden tip dokumenta</p> </BODY> </HTML>

zxz

18.02.2015 11:47

Predmet:Outline-Stil

Primjer kada je sve u jednom redu boja stil i debljina.

PreuzmiIzvorni kôd (HTML):

<HTML>
<HEAD>
<STYLE type="text/css">
p {
border: 1px solid green;
outline: red dotted thick;
}
</style>
</head>
<body>
<p><b>Napomena:</b><br> IE8 podrzava samo ako je naveden tip dokumenta</p>
</BODY>
</HTML>

zxz	19.02.2015 10:35
Predmet:Margine Primjer za margine. PreuzmiIzvorni kôd (HTML): <HTML> <HEAD> <style> p { background-color: yellow; } p.marg { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 50px; background-color: red; } </style> <TITLE>Margine</TITLE> </HEAD> <BODY> <p>Ovo je bez margina tekst samo sa zutom pozadinom</> <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> <p> Tekst bez margina</p> </BODY> </HTML>

zxz

19.02.2015 10:35

Predmet:Margine

Primjer za margine.

PreuzmiIzvorni kôd (HTML):

<HTML>
<HEAD>
<style>
p {
background-color: yellow;
}
p.marg {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
background-color: red;
}
</style>
<TITLE>Margine</TITLE>
</HEAD>
<BODY>
<p>Ovo je bez margina tekst samo sa zutom pozadinom</>
<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>
<p> Tekst bez margina</p>
</BODY>
</HTML>

zxz	20.02.2015 09:40
Predmet:Padding PreuzmiIzvorni kôd (HTML): <HTML> <HEAD> <style> p { background-color: #D8E4F8; } p.pd { padding-top: 85px; padding-right: 20px; padding-bottom: 15px; padding-left: 150px; } </style> <TITLE>Pading</TITLE> </HEAD> <BODY> <p>Ovo je klasican tekst sa bojom pozadine</p> <p class="pd">Ovo je sa padding i sa bojom pozadine da bi se moglo bolje uociti</p> </BODY> </HTML>

zxz

20.02.2015 09:40

Predmet:Padding

PreuzmiIzvorni kôd (HTML):

<HTML>
<HEAD>
<style>
p {
background-color: #D8E4F8;
}
p.pd {
padding-top: 85px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 150px;
}
</style>
<TITLE>Pading</TITLE>
</HEAD>
<BODY>
<p>Ovo je klasican tekst sa bojom pozadine</p>
<p class="pd">Ovo je sa padding i sa bojom pozadine da bi se moglo bolje uociti</p>
</BODY>
</HTML>

zxz	20.02.2015 10:43
Predmet:Skriveno-visibility PreuzmiIzvorni kôd (HTML): <HTML> <HEAD> <style> p.skriveno { visibility: hidden; } </style> </head> <body> <TITLE>Pading</TITLE> </HEAD> <BODY> <p class="skriveno">Ovo je tekst koji se ne vidi</p> <p>Ovo je tekst koji se vidi</p> </BODY> </HTML>

zxz

20.02.2015 10:43

Predmet:Skriveno-visibility

PreuzmiIzvorni kôd (HTML):

<HTML>
<HEAD>
<style>
p.skriveno {
visibility: hidden;
}
</style>
</head>
<body>
<TITLE>Pading</TITLE>
</HEAD>
<BODY>
<p class="skriveno">Ovo je tekst koji se ne vidi</p>
<p>Ovo je tekst koji se vidi</p>
</BODY>
</HTML>

zxz	21.02.2015 12:41
Predmet:Pozicija objekta PreuzmiIzvorni kôd (HTML): <HTML> <HEAD> <style> p.poz_a { position: absolute; left: 120px; top:500px; color: green; } p.poz_r { position: relative; left: 15px; top: 25px; } p.poz_f { position: fixed; top: 5px; right: 5px; color: red; } </style> <TITLE>Pozicija objekata</TITLE> </HEAD> <BODY> <p class="poz_a">Ovaj tekst ima apsolutnu poziciju</p> <p>Ovo je klasican tekst. Znaci tekst koji nema odredeni stil</p> <p>Ni ovaj tekst nema odredjeni stil</p> <p class="poz_f">Ovo je fiksna pozicija. Znaci bilo sta da radite tekst ostaje na istom mjestu.</p> <p class="poz_r">Ovo je tekst sa relaticnom pozicijom. Znaci pozicija u odnosu na predhodni objekat"</p> </BODY> </HTML>

zxz

21.02.2015 12:41

Predmet:Pozicija objekta

PreuzmiIzvorni kôd (HTML):

<HTML>
<HEAD>
<style>
p.poz_a {
position: absolute;
left: 120px;
top:500px;
color: green;
}
p.poz_r {
position: relative;
left: 15px;
top: 25px;
}
p.poz_f {
position: fixed;
top: 5px;
right: 5px;
color: red;
}
</style>
<TITLE>Pozicija objekata</TITLE>
</HEAD>
<BODY>
<p class="poz_a">Ovaj tekst ima apsolutnu poziciju</p>
<p>Ovo je klasican tekst. Znaci tekst koji nema odredeni stil</p>
<p>Ni ovaj tekst nema odredjeni stil</p>
<p class="poz_f">Ovo je fiksna pozicija. Znaci bilo sta da radite tekst ostaje na istom mjestu.</p>
<p class="poz_r">Ovo je tekst sa relaticnom pozicijom. Znaci pozicija u odnosu na predhodni objekat"</p>
</BODY>
</HTML>

zxz	22.02.2015 13:28
Predmet:Floating-poravnanje PreuzmiIzvorni kôd (HTML): <HTML> <HEAD> <html> <head> <style> img { float: right; } </style> <TITLE>Poravnanje elementa</TITLE> </HEAD> <BODY> <p>Ovo je tekst koji je van poravnanja i on ce ici preko cijele stranice, zavsno samo od duzine teksta. Ako vam je monitor veliki morat cete se nakucati teksta da vidite ucinak ili pak smanjite prozor Borowsera</p> <p><img src="nekaslika.gif" width="300"> Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani. Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani. Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani. Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani. Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani. Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani. Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike. Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani. </p> </BODY> </HTML>

zxz

22.02.2015 13:28

Predmet:Floating-poravnanje

PreuzmiIzvorni kôd (HTML):

<HTML>
<HEAD>
<html>
<head>
<style>
img {
float: right;
}
</style>
<TITLE>Poravnanje elementa</TITLE>
</HEAD>
<BODY>
<p>Ovo je tekst koji je van poravnanja i on ce ici preko cijele stranice, zavsno samo od duzine teksta.
Ako vam je monitor veliki morat cete se nakucati teksta da vidite ucinak ili pak smanjite prozor Borowsera</p>
<p><img src="nekaslika.gif" width="300">
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
</p>
</BODY>
</HTML>

zxz	24.02.2015 23:13
Predmet:Poravnanje PreuzmiIzvorni kôd (HTML): <HTML> <HEAD> <style> .centar { margin-left: auto; margin-right: auto; width: 50%; background-color: #D4D0C8; } </style> <TITLE>Poravnanje u centar</TITLE> </HEAD> <BODY> <div class="centar"> <p>Ovo je div sa klasom Centar. Znaci tekst ce se pokazivati negdje u serdini stranice</p> <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> </div> <p><b>Napomena: </b>Ovo nece raditi na IR8</p> </BODY> </HTML>

zxz

24.02.2015 23:13

Predmet:Poravnanje

PreuzmiIzvorni kôd (HTML):

<HTML>
<HEAD>
<style>
.centar {
margin-left: auto;
margin-right: auto;
width: 50%;
background-color: #D4D0C8;
}
</style>
<TITLE>Poravnanje u centar</TITLE>
</HEAD>
<BODY>
<div class="centar">
<p>Ovo je div sa klasom Centar. Znaci tekst ce se pokazivati negdje u serdini stranice</p>
<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>
</div>
<p><b>Napomena: </b>Ovo nece raditi na IR8</p>
</BODY>
</HTML>

zxz	24.02.2015 23:18
Predmet:Poravnanje-Desno PreuzmiIzvorni kôd (Visual Basic): <HTML> <HEAD> <style> .desno { position: absolute; right: 5px; width: 300px; background-color: #ECE9D8; } </style> <TITLE>Poravnanje u centar</TITLE> </HEAD> <BODY> <div class="desno"> <p>Ovo je div sa klasom desno. Znaci tekst ce se pokazivati na desnoj strani i duzini od 300px</p> <p>Desna margina je samo 5px. Vije mozete staviti na nulu ili pak povecati</p> </div> </BODY> </HTML>

zxz

24.02.2015 23:18

Predmet:Poravnanje-Desno

PreuzmiIzvorni kôd (Visual Basic):

<HTML>
<HEAD>
<style>
.desno {
position: absolute;
right: 5px;
width: 300px;
background-color: #ECE9D8;
}
</style>
<TITLE>Poravnanje u centar</TITLE>
</HEAD>
<BODY>
<div class="desno">
<p>Ovo je div sa klasom desno. Znaci tekst ce se pokazivati na desnoj strani i duzini od 300px</p>
<p>Desna margina je samo 5px. Vije mozete staviti na nulu ili pak povecati</p>
</div>
</BODY>
</HTML>