Latest forum activity...
adidas nmd runner femme
Forum: Video
(0 Replies) View latest post
martinglady
prije 5h:46min
adidas neo herren
Forum: Flash
(0 Replies) View latest post
martinglady
prije 6h:7min
adidas neo womens
Forum: Vektor
(0 Replies) View latest post
martinglady
prije 6h:39min
Nike Roshe One Anthracite pas cher
Forum: Vektor
(0 Replies) View latest post
dxxWilliam3
prije 3 dana, 6h
Nike Air Max 2017 Menta En Soldes
Forum: Vektor
(0 Replies) View latest post
dxxWilliam3
prije 3 dana, 6h
Adidas ZX 700 bestellen
Forum: Web stranice
(0 Replies) View latest post
Demetrius1
prije 7 dana, 2h
Nike Air Max 1 Offerte Online
Forum: WIP
(0 Replies) View latest post
Demetrius1
prije 7 dana, 2h
adidas gazelle homme
Forum: Misc
(0 Replies) View latest post
johnsobarbara
prije 7 dana, 4h
 
 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?
211 korisnika je trenutno online
 
19 @ 0.082378
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 **