Latest forum activity...
various Kannada baby names
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 50min:7sec
picking perfect name for your baby
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 54min:35sec
various Hindu baby names
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 59min:38sec
nike air max 2017 damen
Forum: 3d
(0 Replies) View latest post
berylgarcia
prije 9h:2min
adidas superstar 80s rose
Forum: DTP i print dizajn
(0 Replies) View latest post
berylgarcia
prije 9h:10min
adidas superstar junior
Forum: Plagijati
(0 Replies) View latest post
berylgarcia
prije 9h:17min
adidas zx 700 dames
Forum: Web stranice
(0 Replies) View latest post
berylgarcia
prije 9h:44min
preparation for neet exam
Forum: DTP i print dizajn
(1 Reply) View latest post
Arunakila
prije 7 dana, 1h
 
 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?
200 korisnika je trenutno online
 
19 @ 0.114702
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 **