Tutorijali.Net

Tutorijali

	Oglasi

Anketa

CSS TUTORIJALI

Izrada horizontalnog menija pomoću liste - 1.dio

Ovo dosad su bile neke osnove CSS-a, nema smisla sve to objašnjavati, jednostavno uzmete neki css editor i učite po primjerima. Mi ćemo se zadržati na nećem korisnom.

U HTML tutorijalima ste mogli pročitati kako napraviti jednostavnu listu. Netko bi pomislio da one nisu korisne za ništa osim nekakvog nabrajanja. Ali ne, mi ćemo ih iskoristiti za izradu menija pomoću CSS-a.

Ići ćemo korak po korak, tako da ćemo najprije napraviti običnu horizontalnu listu koja sama po sebi ružno izgleda, ali u kako ću pisati tutorijale jedan po jedan tako ćemo praviti menije pomoću CSS koji će izgledati vrlo lijepo.

Idemo sada napraviti jednostavni horizontalni menu sa vrlo malo CSS-a. Neće biti baš lijep, ali za početak.... :)

Korisit ćemo interni CSS dakle u jednom fajlu.

Ovo napišite izmešu <head> i </head>:

<style type="text/css">

#lista li

{

display: inline;

padding-right: 20px;

font-weight: bold;

}

#lista a:hover {

color: #FF9933;

}

</style>

Znači definirali smo CSS-om kako da se prikazuje lista pod ID-om "lista".

Sa

display: inline;  

smo naredili da se lista pod ID-om "lista" prikaže horizontalno.

Sa

padding-right: 20px;  

smo odmakuli desno svaki stavak u listi da nebi bili sljepljeni jedan na drugi.

Sa

font-weight: bold; 

smo naravno definirali da nam tekst bude Bold.

I na kraju smo samo još dodali #lista a:hover odnosno kako će se ponašati linkovi kada se pređe strelicom miša preko njih.

To je sve što se tiče CSS dijela. Sada još moramo napraviti listu. Napravimo onda najprije jedan <div> u kojem ćemo držati naš menu odnosno listu i zatim unutar tog div-a napravimo listu koja će nam služiti kao menu.

 <div>

<ul id="lista">

<li><a href="bla1.html">Link 1</a></li>

<li><a href="bla2.html">Link 2</a></li>

<li><a href="bla3.html">Link 3</a></li>

<li><a href="bla4.html">Link 4</a></li>

<li><a href="bla5.html">Link 5</a></li>

</ul>

</div>

Vidite da smo listi dali id "lista". Znači da će se ta lista prikazat onako kako smo odredili CSS-om.

Primjer kako to izgleda možete pogledati ovdje.

Kao što sam već napomenuo, ovo je samo obična lista, nije nikakav menu. To je samo osnova i temelj za ono što ćemo napraviti postepeno u idućim tutorijalima.

Sljedeći tutorijal: Izrada horizontalnog menija pomoću liste - 2.dio

_________________________

Autor ovog tutorijala: Gogy