Izrada izbornika - CSS

U prošlom odlomku smo strukturno opisali naš primjer izbornika. Kad se takav izbornik prikaže u browseru on nije posebno atraktivan te bi ga bilo dobro i nekako "uljepšati". Za to koristimo CSS (Cascadin Style Sheets). Pomoću CSS-a, znači dajemo browseru informaciju kako neki XHTML kod treba izgledati. Još jedna prednost CSS-a (osim tog odvajanja prezentacije od sadržaja) je to što se jedna CSS datoteka sa svim potrebnim definicijama izgleda dokumenta može u zaglavlju XHTML datoteke uključivati tako da za sve stranice izgled možemo mijenjati s jednog mjesta. Za potrebe izrade ovog izbornika mi ćemo CSS kod uključivati u stranicu zbog lakšeg prikazivanja...

 

Kako bismo si olakšali daljni rad, odmah na početku ćemo svim tagovima ('*') maknuti margine i odmake. Mičemo oznake neuređenih lista. U slučaju da na stranici na više mjesta koristmo <UL> tag dobar način dodjeljivanja CSS-ova pojedinim tagovima je preko jedinstvenog ID-a. Tagu <UL> dodamo atribut 'id' tako da ga možemo jedinstveno identificirati pa dobijemo <UL id="izbornik">. Za početak definiramo širinu izbornika, veličinu, tip i oblik fonta koji ćemo koristiti u izboeniku. Kod koji uključujemo u zaglavlje stranice:

  

<!--
* { 
	margin:0;
	padding:0;
}

li { list-style-type: none; }

#izbornik {
	width: 250px;
	font-size: 1.0em;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	background-color: #CCC;
}
-->
</style>

 

Zatim se bavimo prvim i drugim podizbornikom:

#izbornik ul {
	margin: 0px;
	margin-left: 15px;
	font-size: 0.9em;
	font-weight: normal;
	background-color: #BBB;
}
#izbornik ul ul {
	margin: 0px;
	margin-left: 10px;
	font-size: 0.9em;
	font-weight: normal;
	background-color: #AAA;
}

 

Nakon toga dodajemo još neke CSS atribute koji mijenjaju malo boje linkova te mijenjaju boju fonta i pozadinu kad se pokazivač miša nađe iznad pojedine stavke. Cijeli CSS kod sada izgleda:

  

<style type="text/css">
<!--
* { 
	margin:0;
	padding:0;
}

li { list-style-type: none; }

#izbornik {
	width: 250px;
	font-size: 1.0em;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	background-color: #AAA;
}
#izbornik ul {
	margin: 0px;
	margin-left: 15px;
	font-size: 0.9em;
	font-weight: normal;
	background-color: #BBB;
}
#izbornik ul ul {
	margin: 0px;
	margin-left: 10px;
	font-size: 0.9em;
	font-weight: normal;
	background-color: #CCC;
}

#izbornik a {
	width:100%;
	text-decoration: none;
	color: #A00;
}

#izbornik li a {
	display:block;
}

#izbornik li a:hover {
	color: #333;
	background-color: #DDD;
}

.izbornik-aktivni {
	background-color: #FFFFFF;
	color: #DADADA;
}
-->
</style>

 

Dok browser XHTML i CSS kod prikazuje na sljedeći način: