Latest forum activity...
Adidas Stan Smith Verkauf
Forum: Web stranice
(0 Replies) View latest post
Rowena47
prije 12h:19min
Adidas Pure Boost kaufen
Forum: WIP
(0 Replies) View latest post
Rowena47
prije 12h:20min
Adidas Superstar 80s Zwart Korting
Forum: Web stranice
(0 Replies) View latest post
Reubeng7
prije 14h:43min
Nike Roshe One Räumungsverkauf
Forum: Web stranice
(0 Replies) View latest post
Reubeng7
prije 14h:44min
Madden Mobile Tips And Tricks For Amatuers ...
Forum: Web stranice
(0 Replies) View latest post
amazingz
prije 2 dana, 20h
Need NBA Live Mobile Tips? Read This Info ...
Forum: Web stranice
(0 Replies) View latest post
amazingz
prije 2 dana, 20h
Nike Blazer Outlet Plaisir
Forum: Plagijati
(0 Replies) View latest post
gerzeeshernhwan
prije 3 dana, 11h
Las Mejores Nike Roshe
Forum: Plagijati
(0 Replies) View latest post
gerzeeshernhwan
prije 3 dana, 11h
 
 To the forum... 
Pošalji ovu stranicu prijatelju


Flash (2)
Freehand (4)
HTML (4)
Photoshop (7)
Programiranje - PHP (3)


 
» Username:
» Password:
Autologin?

 
» Registrirajte se!
» Zaboravili ste password?
244 korisnika su trenutno online
 
19 @ 0.070004
x



Ispisivanje shoutboxa s CSS-om
U proslom tutorialu koji se ticao shoutboxa, che.UP je pokazao kako možete 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.
HTML
17.12.2003 21:02 17.12.2003 21:02 5    


printer friendly version

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 :).

Autor: retro_one

« povratak

Komentari

re: Ispisivanje shoutboxa s CSS-om
dobar tut, bravo retro!
 Komentar: njava 18.12.2003 09:56
re: Ispisivanje shoutboxa s CSS-om
woohooo, superiska!
 Komentar: zytzagoo 18.12.2003 10:07
re: Ispisivanje shoutboxa s CSS-om
fala...fala :)
 Komentar: retro_one 18.12.2003 11:32
re: Ispisivanje shoutboxa s CSS-om
coool
 Komentar: Danny 07.12.2004 14:28
re: Ispisivanje shoutboxa s CSS-om
Bravo maheru! :)
 Komentar: goldFish 12.10.2005 09:59
** Trenutno niste ulogirani pa ne možete ni dodavati komentare **