Latest forum activity...
nakshatra baby name
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 1 dan, 11h
various Indian god goddess baby names
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 1 dan, 11h
suitable gemini rashi baby name
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 1 dan, 11h
Adidas Yeezy 350 Boost Noyau Noir Promo
Forum: Web stranice
(0 Replies) View latest post
aqqWalker1
prije 5 dana, 20h
Pandora Clip Charm with Sparkling CZs UK
Forum: Web stranice
(0 Replies) View latest post
aqqWalker1
prije 5 dana, 20h
Top maplestory 2 For Each Console
Forum: WIP
(0 Replies) View latest post
amazingz
prije 5 dana, 22h
Learn All About Neverwinter Right Here
Forum: WIP
(0 Replies) View latest post
amazingz
prije 5 dana, 22h
adidas pure boost damen
Forum: 3d
(0 Replies) View latest post
bakerathena
prije 7 dana, 22h
 
 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?
254 korisnika su trenutno online
 
19 @ 0.085868
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 **