Naprednije korištenje HTML lista

Svima nam dobro znani tag <li> može poslužiti i za neke druge stvari, a ne samo kreiranje lista, odnosno buleta kako se nazivaju u većini aplikacija.

Osim u “prezentativne” svrhe kod pisanja nekog teksta može poslužiti i u strukturne/gradivne svrhe, kod kreiranja izbornika ili organiziranje strukture sadržaja na stranici. Ovaj tutorijal će vam zapravo otkriti prednosti korištenja <li> taga u kombinaciji sa CSS-om.

Za prvi dizajn neke Internet stranice ste vjerujem svi vi koristili tablični format s kojim je znalo biti problema iz razloga što se Microsoft nikada nije mogao dogovoriti kako čitati HTML tagove sa ostatkom Internet preglednika. Osim <div> tagova što ću vam pojasniti u nekom od kasnijih tutorijala možete koristiti i liste <li> tagove.

Korištenje <li> taga za horizontalnu navigaciju

Jednostavan primjer uz pomoć kojega možemo napraviti horizontalni izbornik.

CSS

ul {
margin: 0 auto;
}
ul.horizontalna_lista li {
list-style: none; /*obavezno inaće su vidljivi buleti-točkice*/
text-align: left;
float: left;
padding: 4px 10px 4px 10px;
margin: 5px;
border: 1px solid #ccc;
background-color:#efefef
}

HTML

	
Naslovna
	
O nama
	
Tutorijali
	
Forum

Liste u više stupaca i redaka

Ovo je zapravo onaj jednostavni primjer horizontalnog izbornika sa dodatnim <div> tagom i njegovim CSS-om. Te ograničenom širinom i visinom pojedinog <li> elementa.

CSS

ul {
margin: 0 auto;
}
/* što je širi #okvir_lista više stupaca će stati u njega */
#okvir_lista {
width: 300px
}
/* što je širi manje će stupaca stati u okvir */
ul.vise_stupaca li {
text-align: left;
float: left;
list-style: none;
padding: 4px 10px 4px 10px;
margin: 5px;
border: 1px solid #ccc;
background-color:#efefef;
height: 30px;
width: 50px;
}

HTML

	
Pon
	
Uto
	
Sri
	
Čet
	
Pet
	
Sub
	
Ned
	
Nešto
	
Nešto

Horizontalni izbornik sa sličicom kao pozadinom

CSS

ul {
margin: 0 auto;
}
ul.slicica li {
text-align: left;
float: left;
list-style: none;
padding: 4px 10px 4px 25px; /* ovih zadnjih 25px je razmak s lijeve strane gdje je sličica */
margin: 5px;
background: url(slicica.png) 5px 6px no-repeat;
}

HTML

	
Naslovna
	
O nama
	
Tutorijali
	
Forum