[ Miroslav Ćurčić @ 19.08.2008. 16:25 ] @
Pokušavam još jednom da pređem sa tabela na DIVove ali ne ide,
pomozite mi da rešim ovo:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Untitled Document</title></head>
<body>

  <div style="width:300px;height:120px; border: green 1px solid; 
    text-align: center; display:table-cell; vertical-align:middle;">

   <div style="width:20px;height:20px;border: red 1px solid; margin: auto auto;">
   </div>

  </div>

</body>
</html>


Nekako sam uspeo da centriram DIV po visini ali samo za FF, ne radi za IE6 jer ne poznaje display:table-cell.
Kako to uraditi za IE?

Kod tabela je to jednostavno: <td valign="middle">
[ Aleksandar Ružičić @ 19.08.2008. 16:55 ] @
vertikalno centriranje moze da se postigne i pomocu divova ali posto neki browseri imaju ocajnu podrsku za css standarde (da, mislim na ie6 i delimicno na ie7) onda treba par hackova, evo imas ovde objasnjenu jednu tehniku (koju ja koristim kada mi to zatreba): http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Citat:
mVeliki:Kod tabela je to jednostavno: <td valign="middle">

da ali tabele nisu namenjene za definisanje layouta vec za prikaz tabelarnih podataka :)
[ Predrag Supurovic @ 19.08.2008. 18:53 ] @
Tabele seu sasvim prirodan nacin za ramesanja sadrzaja u dokumentu a to se visi dvaki put kada treba napraviti nekirazmstaj koji nije trivijalan - po pravilu je to lakse napraviti tabelom nego se masirati i nadmudrivati sa CSS-om.
[ Aleksandar Ružičić @ 19.08.2008. 23:44 ] @
lakse - da
bolje - ne

a i tabele su sve samo nisu "prirodan nacin za razmestanje sadrzaja u dokumentu". pogledaj malo w3c.org i html/xhtml specifikacije pa ces videti...
[ Prokleta_Nedelja @ 20.08.2008. 07:02 ] @
Vertikalno centriranje sam rjesavao padding-top-om

Code:
<div style="width:300px;height:160px; border: green 1px solid; 
    text-align: center; padding-top:140px;">


visina okvirnog kvadrata je 300px. Padding-top je 140 (polovina od 300 - polovina sirine malog kvadrata (10px)), tako da sam stavio da je visina okvirnog kvadrata 160px (160 + 140)

Eto... ako ima bolje rjesenje, volio bih da znam :D
[ Aleksandar Ružičić @ 20.08.2008. 09:10 ] @
ima bolje resenje, naveo sam ga u svojoj prvoj poruci u ovoj temi. a to sto ti predlazes je ok ako znas visinu sadrzaja i visinu kontejner elementa, sto je vrlo redak slucaj :) (al opet pading nije za tu svrhu...)

elem, ukoliko znate da ce element da sadrzi samo jednu liniju teksta vertikalno centriranje mozete da postignete pomocu line-height:
Code:

selector
{
    height: 18px;
    line-height: 18px;   // isto kao i height elementa
}
[ Miroslav Ćurčić @ 21.08.2008. 11:22 ] @
Uh, znao sam da mora neki hack.

Nije da bežim od hackova ali sam u situaciji gde pokušavam da se priklonim novim standardima (tableless).
Upotreba hackova će me još više udaljiti od standarda i svrhe svega ovoga.

Koristiću tabele tamo gde mi treba vertikalno centriranje, barem su cross-browser compatibile.
[ Nemke_BG @ 21.08.2008. 15:28 ] @
Uh za ovo sam se i ja mucio dok nisam slucajno naisao na resenje trazeci preko googla...:D

@mVeliki Ovo nije hack...:D
[ Miroslav Ćurčić @ 21.08.2008. 20:38 ] @
Kako nije hack,
korišćenje tarabe kao prvog slova CSS identifikatora proizvodi nevalidan CSS kod,
u FireFox-ovoj konzoli dobijem gomilu warninga.
[ Aleksandar Ružičić @ 21.08.2008. 22:34 ] @
zbog tih stvari (normalnih browsera i validatora) postoji nesto sto se zove kondicionalni komentari (koje samo ie razume a i samo za njega je to i potrebno)
[ Nemke_BG @ 23.08.2008. 01:45 ] @
Izvini malo sam se pogubio ali nisam primetio da se negde pominje taraba kao prvo slovo CSS indetifikatora (ili je mnogo kasno i ja sam jos popio koje pivce, ipak je beer fest )....ovo resenje koje ti je Aleksandar ponudio radi savrseno u browserima tj. ovo sa line-height umesto height-a i na njega sam mislio kad sam rekao da nije hack(prolazi validaciju CSS-a)......Ali ako neces ovo da koristis onda opet poslusaj Aleksandra i uvedi kondicione komentare......