Škola Web programiranja: CSS – 3.nastavak

image

Priča o CSS-u se nastavlja. Ovog puta bavićemo se naprednim osobinama. Cilj nam je da naučimo kako se prave meniji. Horizontalni i vertikalni meniji obavezni su dijelovi svakog sajta, pa ćemo zbog toga vidjeti kako da ih sa lakoćom kreiramo.

Kao i na početku svakog dijela do sad, prvo ćemo kreirati okvir HTML dokumenta sa kojim ćemo raditi. 

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" type="text/css" href="stil.css" />
   <title>Web programiranje</title>
 </head>
 <body>
 </body>
</html>
 

Snimite kod u notepad-u pod imenom probni.html i smjestite ga u folder Meni, koji ćete prethodno kreirati.

Prije samog kreiranja menija, proći ćemo neke napredne osobine CSS-a neophodne za to.

GRUPISANJE / UGNIJEŽDAVANJE

Grupisanje

Često se dešava da više elemenata imaju iste osobine. Da ne bismo za svaki element posebno pisali te osobine, možemo ih grupisati (tako što ćemo ih nabrojati i razdvojiti zarezima) i navesti njihove zajedničke osobine.

Npr.:

Umjesto

p {font-size:14px; color:#cccccc;}
h3 {font-size:14px; color:#cccccc;}
li {font-size:14px; color:#cccccc;}

pisaćemo

p,h3,li {font-size:14px; color:#cccccc;}

Ugniježdavanje

Moguće je nekom elementu pridružiti drugačije osobine ukoliko se nalazi unutar neke klase ili id-a. Recimo, paragraf može imati definisan jedan skup osobina na nivou HTML dokumenta, a unutar neke klase sasvim različite. Pogledajmo na sljedećem primjeru:

p{color:red;}
.desno{color:green;}
.desno p{color: blue;}

Dakle, paragrafi u HTML-u imaju crvenu boju slova, a unutar klase .desno plavu, iako su slova ostalih elemenata u klasi .desno zelena.

DISPLAY I VISIBILITY OSOBINE

Kada želimo sakriti neki element to možemo uraditi na dva načina zavisno od toga što nam zaista treba.

Ukoliko želimo sakriti sadržaj nekog elementa h1, a da mjesto koje bi taj elemenat zauzimao ostane i dalje na sajtu, samo prazno, koristili bi osobinu visibility:hidden.      h1 .sakriveno{visibility:hidden;}

Ako želimo da u potpunosti element nestane sa sajta, da njegovo mjesto zauzmu elementi koji se nalaze poslije njega, koristimo osobinu display:none.

h1 .sakriveno{display:none;}

VEOMA BITNA NAPOMENA: U ovom primjeru vidite da pri opisu elementa h1 pored njega pišemo ime klase. To znači da opisujemo element te klasa i u HTML kodu bi pozivali element sa <h1 class=”sakriveno”>. Kada ime klase piše prije elementa, kao u gornjem primjeru .desno p{color: blue}, to znači da je paragraf ugniježden unutar nekog elementa sa klasom .desno. Bila bi greška kad bismo pozivali paragraf na način <p class=”desno”>, već bi pravilno bilo recimo <div class=”desno”><p>tekst</p></div>.

Block (blok) i Inline (u liniji) elementi

Blok elementi su elementi koji imaju dopuštenu maksimalnu širinu, pojavljuju se u novom redu i sljedeći elementi nakon njih su takođe u novoj liniji. To su npr. <p>,<h1>, <li>, <div>.

Suprotno njima Inline elementi zauzimaju mjesta onoliko kolika je njihova širina, i nakon njih i prije njih nema prekida linije. Primjer toga su linkovi <a>.

Sa Display osobinom možemo elementima odrediti da li su blok ili u liniji. Primjer ovoga odradićemo kasnije u kreiranju horizontalnog  menija, gdje će <li> stavke liste biti postavljene u liniji (a inače su po default-u blok). 

To bi uradili pomoću atributa:  display:block; display:inline;

LINKOVI

Linkovi mogu biti opisani bilo kojom CSS osobinom, ali kod linkova postoje i neki specijalni prikazi. Naime, moguće je da postavite da svi linkovi izgledaju jednako, ali možete razlikovati izgled linkova koje ste već posjetili, koje niste, na koji ste upravo kliknuli i preko kojih prelazite mišem. To su sljedeća stanja:

  • a:link – link koji još niste posjetili
  • a:visited – posjećeni link
  • a:hover – link preko koga prelazite mišem
  • a:active – link koji upravo klikćete

Njima možete dodijeliti različite boje slova ili boje pozadina ili neke podvući (text-decoration:underline), a druge ne i slično… Stanje hover je veoma bitno, jer se njegovim dobrim stilizovanjem dobijaju dobri efekti kod naglašavanja linkova.

Primjer (kada su boje slova različite):

a:link {color:red;}
a:visited {color:yellow;}
a:hover {color:blue;}
a:active {color:green;}

 

Veoma bitno: opis stanja hover mora doći poslije stanja link i visited, a active mora doći nakon hover!!!

LISTE

Kao što smo ranije rekli, u lekcijama o HTML-u, postoje dvije vrste listi: uređene i neuređene.

Liste (i jedne i druge) možemo dodatno stilizovati uz pomoć CSS-a i to uz pomoć tri atributa:

  • list-style-type
  • list-style-position
  • list-style-image

Postoji i četvrti u kom se mogu odmah dati sve vrijednosti prethodna tri, a to je list-style.

List-style-type određuje tip markera ispred stavki nabrajanja.

Vrijednosti ovog atributa mogu biti najčešće:

  • none – kada ne želimo da se markeri prikazuju
  • inherit – kada osobinu nasljeđuje iz nadređenog elementa 
  • circle – marker u obliku kružnice
  • disc – marker u obliku kruga
  • square – marker u obliku kvadrata
  • decimal – decimalni redni brojevi
  • decimal-leading-zero – decimalni brojevi sa nulom ispred jednocifrenih
  • lower-alpha – mala slova
  • lower-greek – mala grčka slova
  • lower-roman – mali rimski brojevi
  • upper-alpha – velika slova
  • upper-greek – velika grčka slova
  • upper-roman – veliki rimski brojevi …

List-style-position može uzeti vrijednosti inherit, inside i outside. Ovaj atribut određuje da li će se na marker gledati kao na dio stavke listi ili na nešto što je izvan stavke.

List-style-image je slika koju možemo postaviti da zamjeni marker stavke. Primjer: ul{ list-style-image:url(‘marker.jpg’);}

Ukoliko želimo listu <ul> opisati sa samo jednim atributom to ćemo učiniti sa list-style i redom ispisanim tipom, pozicijom i slikom.

MENI HORIZONTALNI

Sada ćemo, koristeći sve već prethodno pominjano, napraviti tri horizontalna menija, a sa istim HTML kodom.

Prije svega u folder Meni snimite sljedeće sličice koje će biti pozivane u CSS-ovima primjera menija koje želim pokazati. Kliknite na sličice da vam se otvore originalne fotografije i download-ujte ih.

Zovu se redom  nav.png, active.png, hover.png. Slike obavezno moraju biti sa .png ekstenzijom da bi se sačuvala providnost dijelova slika.

art_navactivehover

 Unutar <body> dijela na početku kreiranog fajla probni.html upišite sljedeću listu koja će nam ustvari predstavljati meni.

  <ul>
    <li><a href="probni.html" class="trenutnastrana">Prvi</a></li>
    <li><a href="#">Drugi</a></li>
    <li><a href="#">Treci</a></li>
  </ul>

 

Vi ćete naravno kada budete pravili meni stvarnog sajta umjesto # staviti link neke stranice tog sajta.

Sad nastupa momenat kad ćemo napraviti prvi meni. Kreirajte CSS dokument stil.css sa sljedećim sadržajem i smjestite ga u folder Meni.

ul {padding: 3px 0 0 50px; background-color:#003366;height:38px;}
ul li {display: inline; font-size: 14px;}
ul a {color: #fff; float: left; padding: 8px 10px 10px 10px;text-decoration:none;}
ul a:hover,a.trenutnastrana {background-color: #3399ff; }

 

Startujmo sad fajl probni.html. Kreirali ste prvi meni. Pogledajte CSS, proučite ga, i primjetićete da smo kombinovali sve do sad naučeno.

meni 1

 

Otvorimo ponovo stil.css i umjesto prijašnjeg koda upišite sljedeći:

ul {background-color: #151515;height: 82px;font-size: 13px;line-height: 13px;font-family: 

Helvetica, Arial;text-transform: uppercase;text-align: center;}
ul li {display: inline;}
ul li a {color: #d9d9d9;float: left;padding: 21px 0 48px 0;width: 112px;text-decoration:none;}
ul li a:hover,a.trenutnastrana {color: #fff;background: url(nav.png) no-repeat 50% 100%;}

 

Pogledajmo sad probni.html.

meni2

Ponovo iz stil.css obrišite prethodno i upišite i sačuvajte:

ul    { background-color: #00697f;
        height: 75px;}
ul li {	list-style-type: none;
	margin-right: 5px;
        float: left;}
ul li a{display: block;
	width: 110px;
	height: 40px;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #FFF;
	text-decoration: none;
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 16px;
	text-shadow: 0px 2px 2px #000;
	overflow: hidden;}
ul li a:hover {
	color: #fff;
	background: url(hover.png) no-repeat center top;
	overflow: visible;}
ul li a.trenutnastrana {
        top: 2px;
        color: #FFF;
	background: url(active.png) no-repeat center top;}

Probni.html sad izgleda ovako:

 meni3

Sada imate dovoljno znanja da sami eksperimentišete sa kreiranjem menija, a kao i u svemu i tu vam internet može veoma mnogo pomoći. Na internetu možete naći jako mnogo dizajnerskih rješenja koja su besplatna i koje možete ugraditi u vaše sajtove, a mogu vam služiti i samo kao inspiracija.

MENI VERTIKALNI

Nekad ćete željeti da vaš sajt ima vertikalni meni.  Pogledajte par primjera kako to uraditi.

Prije svega snimite u folder Meni slike meni1.gif, meni2.gif i meni3.gif, na način kao što ste snimili slike za horizontalne menije.

meni1

meni2

meni3

Sada kreirajte skoro identičan fajl probnom fajlu i dajte mu ime vertikalni.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" type="text/css" href="vertikalni.css" />
   <title>Web programiranje</title>
 </head>
 <body>
  <ul>
    <li><a href="vertikalni.html" class="trenutnastrana">Prvi</a></li>
    <li><a href="#">Drugi</a></li>
    <li><a href="#">Treci</a></li>
    <li><a href="#">Cetvrti</a></li>
    <li><a href="#">Peti</a></li>
  </ul>
 </body>
</html>

 

Kreirajmo i fajl vertikalni.css. Naravno i ovaj i prethodni fajl smjestićemo u folder Meni.

ul {	width: 200px;
	margin: 10px;
        padding:0px;
	border-style: solid solid none solid;
	border-color: #D8D5D1;
	border-size: 1px;
	border-width: 1px;
        list-style-type:none;}
ul li a {
	height: 24px;
	text-decoration: none;}	
ul li a:link, ul li a:visited {
	color: #3688BA;
	display: block;
	background:  url(meni1.gif);
	padding: 8px 0 0 30px;}
ul li a:hover, ul li a.trenutnastrana {
	color: #3688BA;
	background:  url(meni1.gif) 0 -32px;
	padding: 8px 0 0 32px;}

 

Pogledajmo dokument vertikalni.html.

v1

Sadržaj fajla vertikalni.css zamjenimo sa sljedećim:

ul     {width: 200px;
	margin: 10px;
        list-style-type:none;
        padding:0px;}
ul li a {
	height: 24px;
	text-decoration: none;
	}	
ul li a:link, ul li a:visited {
	color: #FFF;
	display: block;
	background:  url(meni2.gif);
	padding: 8px 0 0 35px;
	}
ul li a:hover, ul li a.trenutnastrana {
	color: #FFF;
	background:  url(meni2.gif) 0 -32px;
	padding: 8px 0 0 35px;
	}

Ovaj meni izgleda ovako :

v2

I promjenimo još jednom css.

ul     {
	width: 200px;
	margin: 10px;
        list-style-type:none;
        padding:0px;
	}
ul li a {
	height: 24px;
	text-decoration: none;
	}	
ul li a:link, ul li a:visited {
	color: #333;
	display: block;
	background:  url(meni3.gif);
	padding: 8px 0 0 10px;
	}	
ul li a:hover, ul li a.trenutnastrana {
	color: #FFF;
	background:  url(meni3.gif) 0 -32px;
	padding: 8px 0 0 10px;
	}

Vrlo jednostavno dobili smo i treći vertikalni meni.

v3

Toliko u ovom broju.

Mnogo toga ste naučili do sad. Imate mnogo prostora za vježbanje i kreiranje nečeg sasvim novog. Uživajte u web programiranju do sljedećeg broja.

Ovaj unos je objavljen pod Deseti broj i označen sa , , . Zabeležite stalnu vezu.

Ostavite odgovor

Popunite detalje ispod ili pritisnite na ikonicu da biste se prijavili:

WordPress.com logo

Komentarišet koristeći svoj WordPress.com nalog. Odjavite se / Promeni )

Slika na Tviteru

Komentarišet koristeći svoj Twitter nalog. Odjavite se / Promeni )

Fejsbukova fotografija

Komentarišet koristeći svoj Facebook nalog. Odjavite se / Promeni )

Google+ photo

Komentarišet koristeći svoj Google+ nalog. Odjavite se / Promeni )

Povezivanje sa %s