Izrada horizontalnog menija pomocu liste-2.deo

Ići dole

Izrada horizontalnog menija pomocu liste-2.deo

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

U prošlom tutorijalu smo naučili kao napraviti jednostavnu horizontalnu listu gdje linkovi mijenjaju boju kada se dođe mišem na njih.

Sada ćemo to zanje malo unaprijediti da poboljšamo izgled naše horizontalne liste i napravimo jedan lijepi horizontalni menu.

Dakle ovo postavite između <style type="text/css"> i </style> pa ćemo redom objašnjavati.

Kod:
#lista
{
margin-left: 0;
padding-left: 0;
}


#lista li
{
display: inline;
list-style-type: none;
}


#lista a
{
color: #FFFFFF;
background-color: #003366;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
padding: 3px 10px;
}


#lista a:hover
{
color: #FFFFFF;
background-color: #6699CC;
text-decoration: none;
}

Sa

Kod:
#lista
{
margin-left: 0;
padding-left: 0;
}

smo napisali tako da našu listu možemo pomaknuti u lijevu stranu koliko ide da nema razmaka.

Sa
Kod:

#lista li
{
display: inline;
list-style-type: none;
}

smo definirali da se lista (li) u stilu "lista" prikazuje u liniji (display: inline), da nema nikakvih točkica, brojeva ni ničega ispred sebe (list-style-type: none)

Sa

Kod:
#lista a
{
color: #FFFFFF;
background-color: #003366;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
padding: 3px 10px;
}


smo definirali da svi linkovi u stilu lista budu bijele boje, definirali smo pozadinu, da ne bude podvučen link (text-decoration: none), definirali font te stavili da ima 3px razmaka gore i dolje, te 10px razmaka lijevo i desno (padding: 3px 10px)

Sa
Kod:

#lista a:hover
{
color: #FFFFFF;
background-color: #6699CC;
text-decoration: none;
}


smo odredili kako će se lista ponašati kada se pređe mišem preko linkova. Promijena bojea i da ne bude pocrtano.

I to je to što se tiče novog stila.

Sada možete prekopirati html kod od naše stare liste:
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.hrml">Link 5</a></li>
</ul>
</div>

i pogledati KAKO IZGLEDA OVDE

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