CSS - elastične kolone kao tabela

[Pedja]

Opet sam se zaglavio na jednom problemu.

http://www.predanje.com/

Na nslovnoj strani je pregled knjiga, slozen po kolonama. Broj kolona treba da se menja zavisno od toga koliko prostora ima (sirina kolone je nepromenljiva). Uspeo sam to da postignem ali tako sto sam svakom DIV-u u kome su podaci o jednoj knjizi zadao nepromenljivu i sirinu i visinu.

Pojavljuej se problem sto se po visini pojavljuje mnogo beline, jer neke knjige imaju krace, a neke duze opise.

Hteo bih da napravim da se visina div-a podesava tako da odgovara najvisem div-u u datom redu.

[chesare]

Mozda nisam dobro skapirao problem, ali opet... mozda ti ovo pomogne bar malo:
http://www.positioniseverything.net/articles/onetruelayout/example/equalheight
http://chrisjwilliams.co.uk/ToweringThrashBoxInferno/3ColumnFinal.htm
E sad, ja ovo nisam probao, ali mozda ti posluzi kao "inspiracija" at least.

[Pedja]

Razlika je sto je u primeru koji si dao unapred odredjen broj kolona, a ja zelim da se broj kolona menja zavisno koliko prostora ima. Probaj sajt koji sam da, kako menjas sirinu prozora citaca tako se menja broj kolona.

[Dragan Babić]

Probaj ovu moju tehniku (http://dnevnikeklektika.com/en/css-gallery-layout-en) u kombinaciji sa resolution dependant layoutom (http://www.themaninblue.com/experiment/ResolutionLayout/).

[bluesman]

Ništa od predloženog ne pomaže ovde, mene samo interesuje da li ti hoćeš da "pojedeš" beline unutar div-ova ili ono rastojanje od najnižeg do najvišeg? Nije ovo lako, i mislim da teško može bez javascripta.

[Dragan Babić]

OK, znači ti hoćeš da imaš razl. broj kolona u zavisnosti od širine browsera? Za to ti je koristan onaj resolution dependant layout.

Što se tiče visina: zašto si postavio fiksnu visinu?


<div class="omotac">

<div class="knjiga-spisak">
<a href="http://www.ims-books.com/doc/templates/../jeromonahserafimrouz.php"><img src="http://www.ims-books.com/doc/templates/img/ovojetvojdom.jpg" alt="Ово је мој дом - житије Серафима Роуза" width="200" height="303" hspace="5">
<h1>Ово је твој дом</h1>
<h2>Житије и изабрани текстови јеромонаха Серафима Роуза
- преподобног Серафима Платинског</h2></a>

<p class="isbn">ISBN 86-905075-0-7<br>
(21 cm, 160 стр, друго допуњено издање)</p>
<h3>Књига садржи животопис јеромонаха Серафима Роуза – преподобног Серафима Платинског, сећања савременика на њега, као и његова изабрана писма и текстове који до сада нису били објављени на српском језик</h3>
</div>
<div class="knjiga-spisak">
</div>
<div class="knjiga-spisak">
<p><em>С. Епифанович</em><br>

<strong> Преподобни Максим Исповедник и византијско богословље</strong><br>
(21 cm, 160 стр, у примпреми)</p>
<p> <em>Св. Марко Ефески</em><br>
<strong>Дела </strong><br>
(21 cm, 150 стр, у припреми)</p>

<p><em>Св. Димитрије Ростовски</em><br>
<strong> Летопис – Историја света
од Постања до Рођења Христовог</strong><br>
(21 cm, 450 стр, у припреми)</p>
</div>

</div>

A css:

.omotac{
width:100%;
overflow:hidden;
}
.knjiga-spisak{
float:left;
...
}


Ova dva pravila ti omogućavaju "čišćenje floatova" tako da će .omotac uvek biti onoliko visko koliko je visoka najvišlja kolona. Ono width:100%; je tu zbog internet explorera 6 da bi se trigerovao hasLayout, ako nisi u mogućnosti da koristiš width:100%; stavi sao zoom:1; i rešio si problem.

Nadam se da sam nabo šta ti je u stvari problem.

[chesare]

Da, a lepo pise da su kolone nepromenljive sirine. Da sam ranije procitao... :1027:

Mislim da je bluesman u pravu i da ovo elegantno moze samo sa javasriptom.
Jedino sto mi jos pada na pamet (a da ne koristis js) je da uradis ovo kako je Dragan napisao (svaka kolona ima klasu koja je float-uje levo, a sve koje pripadaju u odgovarajucu grupu su wrap-ovane klasom "omotac").

Ali tada postoji problem kada je neka od kolona visa (zbog sadrzaja) od onih koje se nalaze u istoj vrsti, a kojima prethodi. (primer, skroz na brzinu: www.perfectlounge.com/dpt/)

Skroz neelegantno, ali bi mozda "nekakvo" resenje bilo da na serveru imas neki word (bolje char-count) sadrzaja kolona, pa da tako probas da tako odredis pribliznu visinu kolona i da ih redjas od najmanje ka najvecoj. Ali mislim da je to jako nategnuto, a i pitanje je na sta bi to licilo.

Jedino ako Dragan ima jos nesto "u rukavu", ja nisam taj (css) kalibar.

[Pedja]

Ali tada postoji problem kada je neka od kolona visa (zbog sadrzaja) od onih koje se nalaze u istoj vrsti, a kojima prethodi.


Tu se krije odgovor zasto sam fiksirao visinu div-a sa sadrzajem, tako su svi iste visine pa se lepo sloze, ali zato svi moraju da imaju visinu koja odgovara onom sa najvise sadrzaja pa se javlja mnogo belina.

:(

[ivanhoe]

resenje je da sav sadrzaj svedes na istu (maximalnu) duzinu, i dodas link Read more >> :)
ionako ovakav ogroman tekst samo smeta, smanjuje preglednost..

[degojs]

Peđa, a jesi li razmišljao da koristiš baš tabelu? Ovo u biti jeste tabela, ja ne vidim da trebaš po svaku cenu da ih izbegavaš.

[LiquidBrain]

Ja iskreno mislim da tabele treba da sluze za tabelarni prikaz, nije mi jasno zashto mnogi ljudi to izbegavaju i koriste CSS.

[Pedja]

MA znate da ja nisam od onih koji izbegavaju tabele. Ovde mi tabela ne odgovara jer to fiksira broj kolona, a ja sam hteo da izvedem da se ovi opisiknjiga slazu koliko god mogu u sirinu.

Ne mogu da sstavim "read more" jer su ovo sto vidite upravo najkraci prikazi namenjeni za naslovnu stranu.

Ne znam, moza se ipak odlucim da fiksiram sirinu stane i odlucim sa da budu uvek tri kolone. Izgleda da mi nema druge. A bas bi bilo prakticno ovako kako sam krenuo da uradim.

[Dragan Babić]

http://www.thewatchmakerproject.com/journal/308/equal-height-boxes-with-javascript

[chesare]

voila