Tehnička škola Požega

  • Povećaj veličinu slova
  • Normalna veličina slova
  • Smanji veličinu slova
Početna WebGrupa CSS i liste

CSS i liste

Subota, 12 Veljača 2011 08:25

Zašto posebna priča o listama?

Znamo što su liste, one služe za neka nabrajanja i to može biti pobrojana lista ili lista sa grafičkim oznakama umjesto brojeva. Napisati listu u Dreamweaveru je vrlo jednostavno (poslužite se Properties panelom i naredbama Unordered List ili Ordered List).
Posebna priča o listama je zbog toga što se njima možemo poslužiti za izradu izbornika: horizonatalnih, vertikalnih, sa rollover efektima i pri tom liste često pružaju više mogućnosti i omogućavaju znatno manji, čišći i fleksibilniji kod nego da taj izbornik radimo s tablicama.
Samu listu je lako zadati, no da bismo je stilizirali u nekakav fancy izbornik, moramo malo više poraditi na CSSu i zato je ova priča u CSS, a ne u html poglavlju.

Zadavanje pobrojane liste

To je jednostavno. Kad ste u novom odlomku u traci Properties kliknite na ordered list Ordered list(Ordered List). Svaki enter će vas prebaciti u novu stavku liste, a kad vam je dosta, ponovo kliknite na Ordered List da biste izašli iz liste.

Za čas dobijete ovakvu listu:

  1. bla
  2. bla bla
  3. bla bla bla

Kod koji Dreamweaver pri tome napravi je:

<ol>
<li>bla</li>
<li>bla bla</li>
<li>bla bla bla</li>
</ol>

Zapamtimo dakle, da tagovi započinju i završavaju listu, a svaku stavku u listi određujemo tagovima Nećemo liste u praksi praviti pišući tagove, ali nam znanje tih tagova treba da bismo mogli napisati stilove za oblikovanje tih listi.

Zadavanje liste s grafičkim oznakama

Princip je isti kao i za pobrojanu listu, jedino sad koristite naredbu Unordered List(Unoredered List).

Primjer:

  • bla
  • bla bla
  • bla bla bla

Kod koji se dobije je slijedeći:

<ul>
<li>bla</li>
<li>bla bla</li>
<li>bla bla bla </li>
</ul>


Dakle, ovakvu vrstu liste određujemo tagovima <ul> i </ul>, a pojedine stavke u listi su (kao i prije) određene tagovima <li> i </li>.
Ovom vrstom listi ćemo se daleko više služiti u praksi.

Lista u listi

Često se kod složenih izbornika koriste dvije ili više razina, a da bismo to dobili pomoću lista moramo staviti jednu listu u drugu.
Tu su česte pogreške, pogotovo ako radite isključivo u Design pogledu Dreamweavera.
Ilustrirajmo takvu situaciju primjerom:

  • vanjska1
  • vanjska2
    • unutarnja1
    • unutarnja2
  • vanjska3
Možete to napraviti i u Design pogledu, ali prvo napravite cijelu vanjsku listu, zatim postavite pokazivač iza stavke vanjska2, stisnite Enter i nakon toga tipku Tab te dovršite unutarnju listu.

Kod gornje liste je:

<ul>
<li>vanjska1</li>
<li>vanjska2
<ul>
<li>unutarnja1</li>
<li>unutarnja2</li>
</ul>
</li>
<li>vanjska3</li>
</ul>


Obratite pozornost na to da iza teksta vanjska2 nije zatvoren tag <li>, on je zatvoren tek iza unutarnje liste!

Oblikovanje Listi

Krenut ćemo od jednostavnih stvari, odnosno od css svojstava koja se dodjeljuju samo listama. Ta svojstva je pri zadavanju CSS stila Dreamweaverom moguće naći na dijelu forme označenom sa lists. Dakle, ne morate vi ova svojstva učiti napamet, ali biste trebali nešto znati o njima da ih možete ispravno primijeniti kroz CSS dijalog u Dreamweaveru.

list-style-type

Ovo css svojstvo nam omogućuje da zadamo neku drugu od unaprijed definiranih oznaka koje označavaju svaku stavku u listi. Moguće vrijednosti za listu s grafičkim oznakama su:

  • none
  • disc
  • circle
  • square
Za pobrojanu listu moguće vrijednosti su:
  1. decimal
  2. decimal-leading-zero
  3. lower-roman
  4. upper-roman
  5. lower-alpha
  6. upper-alpha
  7. lower-greek


Moguće su i još neke egzotične vrijednosti, ali nećemo sad o tome. Ukoliko to ne zadamo eksplicitno, za listu s grafičkim oznakama podrazumijeva se vrijednost disc, a za pobrojanu listu vrijednost decimal.

list-style-position

Svojstvo definira gdje se nalazi oznaka (sličica ili broj ili slovo). Moguće vrijednosti su:

  • inside
  • outside

Nominalna vrijednost je outside. Ako zadamo inside, to zapravo znači da se i oznaka nalazi u prostoru predviđenom za prikaz pojedine stavke koji je već malo uvučen.

list-style-image

Ovo nam svojstvo omogućava da zadamo proizvoljnu sličicu koja označava svaku stavku u listi. Primjer možete vidjeti ovdje (u lijevom izborniku).

Kako to zadati?

Stilove za liste moguće je zadati na različite načine, podsjetite se načina zadavanja stilova ako je to potrebno. Podsjećam još i na to da kad god je moguće za selektore stila ne koristite klase, već redefiniranje taga ili složene selektore.
Osim svojstava karakterističnih za liste koja smo ovdje nabrojali, možete koristiti i ostala svojstva, kao što ćemo vidjeti u primjerima koji slijede.

Primjeri

Ovo malo prethodne teorije treba znati da biste sad to mogli primijeniti. Pokazat ćemo nekoliko tipičnih primjera, a na preporučenim stranicama (lijevi stupac) možete ih naći još mnogo.

Lista s rolloverom

Da ne duljimo, evo prvog primjera.

Ovdje je html kod:

<div id="container">
<ul>
<li><a href="#">kruške</a></li>
<li><a href="#">jabuke</a></li>
<li><a href="#">lubenice</a></li>
<li><a href="#">šljive</a></li>
<li><a href="#">breskve</a></li>
</ul>
</div>

a ovdje je CSS kod:

#container { width: 9em; }
#container ul { margin: 0; padding: 0; list-style-type: none; }
#container li { margin-top: 0; margin-right: 0; margin-bottom: 1px; margin-left: 0; }
#container a {
display: block; color: #FFF;
background-color: #003366;
width: 7em;
text-decoration: none;
padding-top: 0.2em;
padding-right: 1em;
padding-bottom: 0.2em;
padding-left: 1em;
}
#container a:hover { background-color: #336699; color: #FFF; }

Pojašnjenja:

Kompletnu listu stavili smo unutar div taga s IDom container. To i nije bilo potrebno, ali bolje simulira stvarne situacije kad se izbornik nalazi u zasebnom div tagu.

Prvim stilom sa selektorom #container zadali smo širinu tog div taga.

Drugi stil #container ul definira marginu i padding za listu na vrijednost 0. Zašto to radimo?
Na žalost, različiti web preglednici različito konstruiraju liste. Neki uvlačenje liste interno tumače kao marginu, a drugi kao padding. Da bismo se osigurali, postavimo oboje na nulu.
Osim toga, ovdje smo definirali da lista nema nikakve oznake.

Treći stil #container li definira marginu od jednog piksela ispod svake stavke u listi. Ostale margine su nula.

Četvrti stil #container a definira izgled svih linkova (ako ovako napišemo onda i posjećenih i neposjećenih!) unutar div taga container.
Ključno je svojstvo display, ako ga definiramo kao block, link neće reagirati samo kad je pokazivač iznad određenog slova u tekstu, već na šire područje oko teksta. Osim toga zadajemo širinu tog područja, boju pozadine, da linkovi nisu potcrtani, boju teksta te odmak teksta od ruba područja linka (padding).
Prilikom zadavanja širine bitno je da imamo na umu da ukupnu širinu (9em) čini širina linka (7em) te padding (po 1em sa lijeve i desne strane).

Ostalo je samo još zadati rollover i to činimo zadnjim stilom #container a:hover. Promijenimo boju pozadine i to je to.

Horizontalna 3D lista

Rezultat pogledajte (i skinite pa analizirajte) ovdje.

HTML kod je u potpunosti isti kao i u prethodnom primjeru (!) i zato ga nećemo ponovo prikazivati. CSS kod slijedi:

#container ul{
padding: 0;
margin: 0;
background-color: #006699;
color: #FFFFFF;
float: left;
width: 100%;
}
#container ul li { display: inline; }
#container ul li a{
background-color: #006699;
color: #FFFFFF;
text-decoration: none;
float: left;
border: 1px solid;
border-top-color: #00CCFF;
border-right-color: #000033;
border-bottom-color: #000033;
border-left-color: #00CCFF;
padding-top: 3px;
padding-right: 8px;
padding-bottom: 3px;
padding-left: 8px;
}
#container ul li a:hover{
color: #FFFFFF;
border: 1px solid #006699;
padding-top: 4px;
padding-bottom: 2px;
}

Objašnjenja:

Za #container ul smo ovaj put postavili širinu 100% i obojali pozadinu da bismo imali traku preko cijele stranice. Za ostalo vrijede objašnjenja iz prvog primjera.

Ukoliko želimo horizontalnu listu moramo za #container ul li zadati svojstvo display: inline .

Za #container ul li a zadamo float: left kako bi se dimenzije liste poklopile sa dimenzijama pojedinih stavki. Boje i padding birajte po želji.

U stilu #container ul li a:hover zadajemo rollover. Trik 3D efekta je u tome da izmijenimo boje obruba (ista kao i pozadine) te povećamo padding s gornje i smanjimo s donje strane kako bismo dobili privid pomaka teksta za jedan piksel.

Složena lista s vlastitim grafičkim oznakama

Prvo da vidimo što je to, primjer je ovdje.

Primjer je jednostavan. HTML kod je slijedeći:

<ul>
<li>voće
<ul>
<li>kruške</li>
<li>jabuke</li>
</ul>
</li>
<li>povrće
<ul>
<li>poriluk</li>
<li>špinat</li>
</ul>
</li>
<li>žitarice</li>
<li>mlijeko</li>
</ul>

CSS je još jednostavniji:

li {
list-style-image: url(pfolder.jpg);
}
li ul li {
list-style-image: url(pfile.jpg);
}

Objašnjenje:

Stilom li redefiniramo kako izgledaju stavke svih lista u dokumentu. Primjetite da dok ne zadamo drugi stil, sve stavke u listi imaju simbol mape. Drugi stil li ul li to ispravlja jer definira izgled stavki u unutarnjim listama i daje im ikonu datoteke.

Napomena: ovo je odavno podržano CSS svojstvo, no u njegovoj primjeni ima određenih problema - slike nisu vertikalno poravnate s tekstom i nema dodatnog CSS svojstva kojim bismo to mogli popraviti.
Zbog toga se mnogi autori odlučuju na drugačiji pristup za isti efekt: slika se ne zadaje svojstvom list-style-image već se ostavi malo više paddinga s lijeve strane i ubaci slika u pozadinu na tu lijevu stranu i to tako da se ne ponavlja i to najčešće daje puno bolje rezultate.

i na kraju...

Na kraju da ponovimo uz par savjeta i preporuka:

  • kad god je riječ o nabrajanju pokušajte koristiti liste. Kako izbornici nisu ništa drugo do liste linkova, najlogičnije je da i za njih koristimo HTML liste,
  • neki preglednici uvlake listi tumače kao margine, a drugi kao padding i to može rezultirati različitim izgledom u različitim preglednicima,
  • da biste dobili stavke listi poput dugmića koristite svojstvo display: block i primjenite ga na link u listi
  • Želite li napraviti horizontalnu listu za selektor ul li trebate definirati svojstvo display: inline; a za optimalne rezultate treba zadati i float u stilu ul li a
  • želite li napraviti listu s vlastitim grafičkim oznakama, koristite svojstvo list-style-image. Ukoliko je važna preciznost, isto možete napraviti dodajući sliku u pozadinu svakog linka.
  • Izbjegavajte CSS klase i stilove zadajte preko složenih selektora, ako je to moguće.