Valters Celmiņš
© 2006 - 2011
Apmācība mājas lapu izveidē izmantojot xHTML 1.0 un CSS 2.1 valodas

Izvēlnes izveidošana

Līdz izvēlnei vēl pāris lietas jāapgūst!

Saraksts

Sāksim jau ar to, ka sapratīsim, kas īsti ir izvēlne. Pēc savas vienkāršākās būtības tas ir saraksts. Tas ir saraksts ar pieejemajām lapā attiecīgajā vietnē. Un ne tikai idejiski, bet arī tehniski tas tiek veidots kā saraksts. Atcerēsimies mūsu lapas sadaļas, kādas tās bija: "Galvenā lapa", "Fotogalerija", "Kontaktinformācija" un "Kaut kāda cita sadaļa", kas domāta šobrīd mums īsti nezināmam mērķim (ļaušu jums izdomāt, kam). Nu tad arī izveidosim šo sarakstu. veidojot izvēlni, strādāsim tam speciāli izveidotajā "divā":

HTML
...
			<div id="menu">
				<ul>
					<li>Galvenā lapa</li>
					<li>Fotogalerija</li>
					<li>Kontaktinformācija</li>
					<li>Kaut kāda cita sadaļa</li>
				</ul>
			</div>
...

Ar sarakstiem ir tā, ka ir divu veidu saraksti:

  • nesakārtots saraksts <ul> </ul> (tulk. uz angļu val. "unordered list") - parasti tiek apzīmēts ar kādu simbolu, bildīti vai kaut kādu citu ķeksīti, šādiem sarakstiem idejiski nav svarīga kārtība: pirmais elements var būt pēdējais, otrais var būt pirmais u.t.t. kā tik ienāk galvā,
  • sakārtots saraksts <ol> </ol> (tulk. uz angļu val. "ordered list") - parasti tiek apzīmēti ar romiešu vai arābu cipariem, vai arī latīņu alfabēta burtiem, idejiski ir svarīga secība.

Neatkarīgi no saraksta veida, katru atsevišķo saraksta elementu ierobežo tagi <li> </li> ("list item" tulk. no angļu val. "saraksta elements"). Saraksta iekšpusē (t.i. iekš <ul> </ul> vai <ol> </ol> tagiem) nekas nedrīkst atrasties ārpus <li> </li> tagiem! Pēc noklusējuma jeblurš saraksts tiks kārtots kā normāls, standarta teksta saraksts: katrs saraksta elements ar savu simbolu, nelielu atkāpi no malas, ar pārnesi jaunā rindiņā pēc kārtējā saraksta elementa u.t.t. Pēc tipa <ul> un <ol> elementi ir bloka elementi (loģiski), bet <li> elementiem ir savs īpašs tips - "list-item". Nekas šausmīgs. Vairāk vai mazāk šis tips pakļaujas tiem pašiem likumiem, kam inline elementi ar pāris papildus īpašībām (CSS valoda, atceramies!), kas ir loģiskas tikai sarakstiem:

CSS
ul, ol  /* sekojošās īpašības tiek piešķirtas gan ul, gan ol elementiem */
{
 list-style-type: circle;            /* saraksta elementu simbols / numerācijas veids */
 list-style-position: inside;        /* simbola atrašanās vieta; attiecas uz pozicionēšanu */
 list-style-image: url('list.jpg');  /* gadījumam, ja jums nepatīk piedāvātie simboli,
                                        varat ievietot savu bildīti simbola vietā */
}

Populārākie sarakstu elementu simboli:

Vērtība Apraksts
none Nav nekāda simbola.
Nesakārtots saraksts
disc Noklusētā īpašība, melns, pildīts aplītis.
square Pildīts rombiņš.
Sakārtots saraksts
decimal Decimālās skaitīšanas sistēmas numerācija, arābu skaitļi.
upper-roman Romiešu skaitļi, lielie "I", "V", "X" u.c. burti.
lower-latin Latīņu alfabeta "numerācija", mazie burti.

Simbola pozicionēšana. Melnais rāmītis reprezentē īpašību border:

list-style-position: inside;
list-style-position: outside;

Nu tad beidzot ir izstāstīts viss, kas būs vajadzīgs, veidojot izvēlni!