Prva godina
puskice OET 1
puskice OET 2
puskice Osnovi elektronike
puskice Matematika 1
puskice Matematika 2
puskice Inženjerska matematika
puskice ORT 1
puskice ORT 2
puskice Programiranje 1
puskice Fizika
puskice Engleski 1
puskice Elektronika NRT i MET
puskice Internet servisi
puskice Osnovi menadžmenta
puskice Aplikativni softver
puskice Osnovi televizije
puskice Osnovi elektroenergetike
puskice Elektrotehnički materijali i komponente
puskice Marketing
puskice Sociologija
puskice Osnovi audiotehnike
puskice Arhitektura i orgranizacija računara 2
Druga godina
puskice Digitalna obrada signala
puskice Mikroračunari
puskice Upravljanje projektima
puskice Digitalne telekomunikacije
puskice Baze podataka
puskice Računarske mreže
puskice Digitalna Integrisana Elektronika
puskice Programiranje 2
puskice Objektno programiranje
puskice Elektronsko poslovanje 1
puskice Elektronsko poslovanje 2
puskice Trgovinsko pravo
puskice Montaža i servisiranje računara
puskice Internet tehnologije
puskice Kompjuterska animacija 1
puskice Digitalne multimedije 1
puskice Digitalne multimedije 2
puskice Analogna elektronika
puskice Telekomunikacije
puskice Elektromotorni pogoni
puskice Električne instalacije i osvetljenja
puskice Električne mašine 1
puskice Električne mašine 2
puskice Osnovi animacije
puskice Komunikologija
puskice Elementi elektroenergetskih sistema
puskice Upravljanje troškovima
puskice Elektrane i razvodna postrojenja
puskice Midi sistemi
puskice Mediji masovne komunikacje
puskice Web dizajn
puskice Studijska audiotehika
Treća godina
puskice Engleski 2
puskice Inteligentne računarske tehnologije
puskice Klijent server sistemi
puskice Operativni sistemi 1
puskice Operativni sistemi 2
puskice Internet programiranje 1
puskice Internet programiranje 2
puskice Protokoli u računarskim mrežama
puskice Sigurnost u računarskim mrežama
puskice Programabilna logička kola
puskice Tehnike vizuelnog programiranja
puskice Finansijski menadžment
puskice Održavanje elektroenergetskih uređaja
puskice Programiranje u jeziku JAVA
puskice Distribucija i prodaja električne energije
puskice Ozvučenje
puskice Poslovni software
puskice Računari i periferije
puskice Softversko inzenjerstvo
Ostalo
puskice Profesori
puskice Tutoriali
puskice Top 10
puskice Pravilnik
puskice Port skener
puskice Hash generator md5 sha1
puskice SEO Google rangiranje
puskice SEO Yahoo rangiranje
puskice SEO MSN rangiranje
puskice Web servis vremenska prognoza
puskice Web servis kursna lista
puskice Web servis kursna lista za sutra
puskice Linkovi

Tutorial CSS Class i ID

Tutorial CSS Navigacija

Tutorial CSS 2 Class i ID

Evo ukratko šta treba uraditi. Napraviti linkove koji će biti lepo formatirani i imati hover akciju. Otvorite novi notepad i krenite sa kucanjem ili kopiranjem :) Evo prvo da makenmo belu pozadinu….. evo recimo može ovaj kod

body {
background-color: #236371;
}

Potom da napravimo klasu za naslov stranice.... recimo klasu nazovemo naslov

.naslov {
text-align: center;
color: white;
font: bolder 20px 'Trebuchet MS', Arial, sans-serif;
text-decoration: underline;
}

Centrirali smo tekst, definisali belu boju i odradili brzo konfigurisanje fonta, podebljan veličine 20px i određene vrste fontova. Dodali smo posle i dekoraciju podvučenu liniju.
Sad za promenu nećemo praviti klasu vec id za navigaciju.

#navigacija {
background-color: #000000;
color: #FFFFFF;
width: 140px;
font: bolder 16px 'Trebuchet MS', Arial, sans-serif;
border: 2px solid #747474;
text-indent: 10px;
}

Dakle pozadina boja fonta širina, podebljan font 16px veličine i određeni font.
Na kraju smo rekli da ograniči sa svih strana (običan border menja border-top, border-bottom, border-left, border-right.... mogli smo i ovo da kucamo u 4 reda ali ovako je pravilnije ako želimo istu boju i veličinu u px) 2px veličine liniju određene boje.
Text-indent: 10px služi za pomeranje teksta u desno za 10px. Ovo je jako slično kao i padding-left ali sa paddingom možemo imati problema zbog nekompatibilnosti browsera.
Potom pravimo link

a {
display: block;
width: 140px;
text-indent: 25px;
background-color: #2175bc;
font: normal 12px Tahoma, serif;
color: white;
text-decoration: none;
border-top: 1px solid #FFFFFF;
}

display: block; nam služi da prikažemo blok i to širine 140px, pomeramo tekst za 25px u levo, određene boje pozadine, odredjenog fonta, stila i boje, bez dekoracije i stavljamo 1px liniju iznad zapisa bele boje.
Pravimo a:hover i menjamo samo boju pozadine.

a:hover {
background-color: #2586d7;
}

Ostalo ostaje isto jer je sve ostalo preuzeto od definicije a taga.
To bi bilo to sto se tiče pravljenja css-a. Sada se okrećemo body tagu i koristimo definisane stvari. Radićemo bez tabele, a klase i id ubacujemo u div tagove.

<div class="naslov">Pravljenje navigacije u css-u, ovo je kao neki naslov</div>
<div id="navigacija">Navigacija
<a href="http://www.google.com" target="_blank">Google</a>
<a href="http://www.yahoo.com" target="_blank">Yahoo</a>
<a href="http://www.msn.com" target="_blank">MSN</a>
<a href="http://www.alltheweb.com" target="_blank">All the web</a>
<a href="http://www.ask.com" target="_blank">Ask</a>
<a href="http://www.puskice.info" target"_blank">Puskice</a>
</div>

Sačuvajte stranu i pokrenite preko bilo kog browsera. Rezultat bi trebao da se vidi.
Ceo kod:

Kopiranje: kombinacija tastera CRTL+C

Savetujem Vam da ovaj kod probate tako što ćete obrisati CSS iz head taga i da vidite razliku.

Inače radili smo CSS u samom html kodu jer jednostavno imamo jedan jedini fajl. Ako bi smo hteli da koristimo ovaj CSS kod i za druge strane onda bi bilo mnogo lakše i praktičnije da napravimo eksterni css file i da ga samo linkujemo na svaku novu stranu, nego da kopiramo ceo CSS kod na svaku stranu.

Evo kako bi to trebalo uraditi. Otvorite notepad i kopirajte ceo css kod. Napomena, ovde ne treba stavljati tagove <style type…>

Kopiranje: kombinacija tastera CRTL+C

Ovaj kod sačuvajte kao glavni.css (pazite da notepad ne doda na kraju ekstenziju .txt) Otvorite notepad i sačuvajte sledeći html kod gde ćemo i ubaciti eksterni css file.

Kopiranje: kombinacija tastera CRTL+C

Sačuvajte ovu stranu kao html file i pokrenite.

Gotovu navigaciju možete preuzeti ovde

Vazno !

Ovim putem se izvinjavam za greške koje su možda slučajno promakle kao i za stopostotnu ispravnost teksta.
Pedja

Nazad na početak


VIŠER Vesti

[ 12.07.2013, 15.14 ] Odobrene teme diplomskih radova (NV:08.07.2013.) Link

[ 12.07.2013, 07.58 ] Stipendije i krediti za mesec jun Link

[ 11.07.2013, 11.42 ] Naknadna odbrana vežbi iz Baza podataka pred semptembarski ispitni rok Link

[ 05.07.2013, 12.56 ] Odobrene teme diplomskih radova (NV:03.07.2013.) Link

[ 04.07.2013, 20.12 ] SPECIJALNE ELEKTRIČNE INSTALACIJE-Rezultati drugog kolokvijuma Link

[ 04.07.2013, 16.23 ] SPECIJALNE ELEKTRIČNE INSTALACIJE_Rešenja zadataka_drugi kolokvijum Link

[ 03.07.2013, 11.51 ] Naknadna odbrana vežbi iz Mikroračunara - Septembar 2013 Link

[ 03.07.2013, 11.45 ] Stručna praksa (smer NRT) - Septembarski ispitni rok Link

[ 03.07.2013, 11.35 ] Stručna praksa - Smer NRT Link

[ 02.07.2013, 09.32 ] Memorijski sistemi - Rezultati predispitnih obaveza Link


Puskice i skripte VISER
SEO Optimizacija sajta | Menjačnica | Žute strane
Rolo vrata | Segmetna vrata | Garažna vrata | Aluminijumska stolarija | Alu stolarija