Izrada horizontalnog menija pomocu liste-1.deo

Ići dole

Izrada horizontalnog menija pomocu liste-1.deo

Počalji od Loud taj Sub Feb 20, 2010 3:00 pm

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.... Smile

Korisit ćemo interni CSS dakle u jednom fajlu.

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

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

Kod:
display: inline;

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

Sa

Kod:
padding-right: 20px;

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

Sa

Kod:
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.

Kod:
<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 OVDE

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.

By tutorijali.net

_________________________________





avatar
Loud
Administrator
Administrator

Broj poruka : 1118
Datum upisa : 23.01.2010
Godina : 21

Pogledaj profil korisnika http://svettutorijala.forumotion.net

Nazad na vrh Ići dole

Nazad na vrh


 
Dozvole ovog foruma:
Ne možete odgovarati na teme u ovom forumu