Ispisivanje shoutboxa s CSS-om

Dakle u proslom tutorialu koji se ticao shoutboxa, che.UP je pokazao kako mozete kreirati svoji shoutbox. Danas ćete naučiti kako ispisivati shoutbox entrye. Ono što je novo je pristup ispisivanju shoutboxa. Nećemo koristiti tablice, nego će sve biti definirano CSS-om što nam omogućuje kako da imamo čišći i manji kod, tako i da izgled shoutboxa jednostavno mijenjamo.

Jedan od načina kako bi to mogli izvesti sa CSS-om je imati jedan div u kojem bi za svaki post bio još jedan div u kojem bi se nalazio tekst, ali to je praktički emuliranje tablice i takav pristup je kriv. Za ispis shoutboxa koristit ćemo tri taga koji se, barem koliko sam ja primjetio, relativno rijetko koriste. Ti tagovi su <dl>, <dt> i <dd>. To su tagovi koji se koriste za kreiranje "definition" lista s tim da je <dl> tag kojim definiramo "definition" listu, a <dt> i <dd> su elementi koji sadrze vrijednosti i nalaze se unutar <dl> taga. Kad izvučemo podatke iz baze imat ćemo nešto ovako:

<dl>
<dt>Ime usera, vrijeme i datum</dt>
<dd>Tekst koji je user postao</dd>
<dt>Ime usera, vrijeme i datum</dt>
<dd>Tekst koji je user postao</dd>
<dt>Ime usera, vrijeme i datum</dt>
<dd>Tekst koji je user postao</dd>
</dl> 

Znači sad imamo strukturirani ispis i možemo preći na formatiranje izgleda. Prvi problem s kojim sam se suočio je IE-ovo nepravilno prikazivanje paddinga. Po W3 specifikacijama vrijednost paddinga(npr. 5px) se dodaje na definiranu veličinu boxa. Znači ako je box 200px širok i na to dodamo s lijeve i desne strane 3px paddinga, njegova širina je 206px, ali IE to prikazuje kao box veličine 200px a elementi unutar boxa su 3px odmaknuti od lijevog i desnog ruba. Zbog toga border oko shoutboxa nećemo definirati na <dl> tagu nego na <dt> i <dd> tagovima. Style sheet bi trebao izgledati nekako ovako:

#shoutbox {
	margin: 0px;
	width: 200px;
	padding: 0px;

}
#shoutbox dt {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FF6600;
	background-color: #E5E5E5;
	height: 10px;
	width: 200px;
	margin: 0px;
	text-indent: 5px;
	padding: 3px 3px 3px 3px;
	border: 1px solid #666666;
	border-bottom: none;

}
#shoutbox dd {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
	background-color: #FFFFFF;
	width: 200px;
	text-indent: 5px;
	margin: 0px;
	padding: 3px 3px 3px 3px;
	border: 1px solid #666666;
	border-bottom: none;
}
#shoutbox dd.last {
	border-bottom: 1px solid #666666;
	}

#shoutbox klasa se primjenjuje na element čiji je id "shoutbox", a "#shoutbox dd" i "#shoutbox dt" se primjenjuju na </dt> i </dd> elemente koji se nalaze unutar elementa čiji je id "shoutbox". Još imamo i klasu "#shoutbox dd.last" koju ćemo primjeniti na shoutbox entry koji se zadnji ispisuje da bi dobili border na dnu shoutboxa(border u klasi "#shoutbox" nismo definirali zbog problema s paddingom). I to je manje više to. Finalni html kod izgleda ovako:

<dl id="shoutbox" >
<dt>Ime usera, vrijeme i datum</dt>
<dd>Tekst koji je user postao</dd>
<dt>Ime usera, vrijeme i datum</dt>
<dd>Tekst koji je user postao</dd>
<dt>Ime usera, vrijeme i datum</dt>
<dd class="last" >Tekst koji je user postao</dd>
</dl> 

A ispis u browseru izgleda ovako:

Ime usera, vrijeme i datum

Tekst koji je user postao

Ime usera, vrijeme i datum

Tekst koji je user postao

Ime usera, vrijeme i datum

Tekst koji je user postao

Kao i uvijek sva pitanja možete postavit na forumu, a ako me neko oće privatno kontaktirat nek pošalje private message :).