Google Chrome funkcionalnosti u razvoju

Kako izmeriti realan bounce rate Web sajta?

Dial-up greška 691 Windows XP eng

Nema ADSL sinkronizacije USB

Izvor hdonweb

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.

html liste li 01 Naprednije korištenje HTML lista

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

<ul class="horizontalna_lista">
	<li>Naslovna</li>
	<li>O nama</li>
	<li>Tutorijali</li>
	<li>Forum</li>
</ul>

Liste u više stupaca i redaka

html liste li 02 Naprednije korištenje HTML lista

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

<div id="okvir_lista">
<ul class="vise_stupaca">
	<li>Pon</li>
	<li>Uto</li>
	<li>Sri</li>
	<li>Čet</li>
	<li>Pet</li>
	<li>Sub</li>
	<li>Ned</li>
	<li>Nešto</li>
	<li>Nešto</li>
</ul>
</div>

Horizontalni izbornik sa sličicom kao pozadinom

html liste li 03 Naprednije korištenje HTML lista

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

<ul class="slicica">
	<li>Naslovna</li>
	<li>O nama</li>
	<li>Tutorijali</li>
	<li>Forum</li>
</ul>
QR kod za Naprednije korištenje HTML lista
Povezani postovi

« 
 »

Komentirajte tutorijal

Stranice

Svakako posjetite

© 2009 HDonWEB | Sva prava pridržana | Web dizajn: Ivan Mišić

Preuzimanje sadržaja bez prethodne dozvole nije dopušteno!