DevProTalk

Forumi IT profesionalaca
web development, web design, e-business, SEO


Idite nazad   DevProTalk > Web development i web aplikacije > (X)HTML, JavaScript, DHTML, XML, CSS
Želite da se reklamirate ekskluzivno na ovoj poziciji? Javite se

(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi

Odgovori
 
Alati teme Način prikaza
Staro 09. 02. 2007.   #1
Pedja
Predrag Supurović
Grand Master
 
Datum učlanjenja: 24.01.2006
Lokacija: Užice
Poruke: 791
Hvala: 3
200 "Hvala" u 12 poruka
Pedja is on a distinguished roadPedja is on a distinguished roadPedja is on a distinguished road
Default CSS - elastične kolone kao tabela

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.
Pedja je offline   Odgovorite uz citat
Staro 09. 02. 2007.   #2
chesare
Zoran Mihailović
Na probnom radu
 
Datum učlanjenja: 30.09.2006
Lokacija: Beograd
Poruke: 41
Hvala: 1
259 "Hvala" u 1 poruci
chesare is on a distinguished roadchesare is on a distinguished roadchesare is on a distinguished road
Default

Mozda nisam dobro skapirao problem, ali opet... mozda ti ovo pomogne bar malo:
http://www.positioniseverything.net/...le/equalheight
http://chrisjwilliams.co.uk/Towering...olumnFinal.htm
E sad, ja ovo nisam probao, ali mozda ti posluzi kao "inspiracija" at least.
chesare je offline   Odgovorite uz citat
Staro 09. 02. 2007.   #3
Pedja
Predrag Supurović
Grand Master
 
Datum učlanjenja: 24.01.2006
Lokacija: Užice
Poruke: 791
Hvala: 3
200 "Hvala" u 12 poruka
Pedja is on a distinguished roadPedja is on a distinguished roadPedja is on a distinguished road
Default

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.
Pedja je offline   Odgovorite uz citat
Staro 09. 02. 2007.   #4
Dragan Babić
Designer guy
Wrote a book
 
Avatar Dragan Babić
 
Datum učlanjenja: 06.06.2005
Lokacija: Novi Sad
Poruke: 1.373
Hvala: 55
42 "Hvala" u 22 poruka
Dragan Babić će postati "faca" uskoro
Pošaljite poruku preko Skype™ za Dragan Babić
Default

Probaj ovu moju tehniku u kombinaciji sa resolution dependant layoutom.
Dragan Babić je offline   Odgovorite uz citat
Staro 09. 02. 2007.   #5
bluesman
Goran Pilipović
Sir Write-a-Lot
 
Avatar bluesman
 
Datum učlanjenja: 18.05.2005
Lokacija: Beograd
Poruke: 5.450
Hvala: 288
1.247 "Hvala" u 446 poruka
bluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušati
Pošaljite ICQ poruku za bluesman
Default

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.
__________________
Goran Pilipović a.k.a. Ugly Fingers Bradley f.k.a. bluesman
I don't always know what I'm talking about but I know I'm right!
bluesman je offline   Odgovorite uz citat
Staro 09. 02. 2007.   #6
Dragan Babić
Designer guy
Wrote a book
 
Avatar Dragan Babić
 
Datum učlanjenja: 06.06.2005
Lokacija: Novi Sad
Poruke: 1.373
Hvala: 55
42 "Hvala" u 22 poruka
Dragan Babić će postati "faca" uskoro
Pošaljite poruku preko Skype™ za Dragan Babić
Default

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?

Kôd:
<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:
Kôd:
.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.
Dragan Babić je offline   Odgovorite uz citat
Staro 10. 02. 2007.   #7
chesare
Zoran Mihailović
Na probnom radu
 
Datum učlanjenja: 30.09.2006
Lokacija: Beograd
Poruke: 41
Hvala: 1
259 "Hvala" u 1 poruci
chesare is on a distinguished roadchesare is on a distinguished roadchesare is on a distinguished road
Default

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

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.
chesare je offline   Odgovorite uz citat
Staro 10. 02. 2007.   #8
Pedja
Predrag Supurović
Grand Master
 
Datum učlanjenja: 24.01.2006
Lokacija: Užice
Poruke: 791
Hvala: 3
200 "Hvala" u 12 poruka
Pedja is on a distinguished roadPedja is on a distinguished roadPedja is on a distinguished road
Default

Citat:
Originalno napisao chesare
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.

Pedja je offline   Odgovorite uz citat
Staro 10. 02. 2007.   #9
ivanhoe
Ivan Dilber
Sir Write-a-Lot
 
Avatar ivanhoe
 
Datum učlanjenja: 18.10.2005
Lokacija: Bgd
Poruke: 5.320
Hvala: 104
2.344 "Hvala" u 583 poruka
ivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svima
Pošaljite poruku preko Skype™ za ivanhoe
Default

resenje je da sav sadrzaj svedes na istu (maximalnu) duzinu, i dodas link Read more >>
ionako ovakav ogroman tekst samo smeta, smanjuje preglednost..
__________________
Leadership is the art of getting people to want to do what you know must be done.
ivanhoe je offline   Odgovorite uz citat
Staro 10. 02. 2007.   #10
degojs
I'm a PC too.
Wrote a book
 
Avatar degojs
 
Datum učlanjenja: 06.06.2005
Lokacija: Kanada
Poruke: 1.354
Hvala: 82
130 "Hvala" u 89 poruka
degojs će postati "faca" uskorodegojs će postati "faca" uskoro
Default

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š.
__________________
Commercial-Free !!!
degojs je offline   Odgovorite uz citat
Odgovori


Alati teme
Način prikaza

Pravila pisanja
Možete ne započinjati nove teme
Možete ne slati odgovore
Možete ne slati priloge
Možete ne izmeniti svoje poruke
vB kôd je Uključen
Smajliji su Uključen
[IMG] kod je Uključen
HTML kôd je Isključen
Pogledajte forum

Slične teme
Tema Početna poruka teme Forum Odgovori Poslednja poruka
Mapiranje vrednosti atributa na kolone ili redove? Petar Marić SQL baze podataka - Sponzor: Baze-Podataka.net 3 18. 10. 2008. 23:35
phpbb i sql tabela pitchweis Sva početnička pitanja 3 08. 02. 2008. 08:05
tabela-problem mirko Sva početnička pitanja 6 03. 12. 2007. 13:47
CSS LAYOUT: 4 fiksne kolone? maksim (X)HTML, JavaScript, DHTML, XML, CSS 4 21. 04. 2007. 20:31
tri kolone, dve kolone :) z.zoran (X)HTML, JavaScript, DHTML, XML, CSS 14 02. 03. 2007. 15:17


Vreme je GMT +2. Trenutno vreme je 09:59.


Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.