|
(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi |
|
Alati teme | Način prikaza |
|
28. 09. 2012. | #1 |
profesionalac
Qualified
Datum učlanjenja: 02.05.2009
Poruke: 193
Hvala: 27
8 "Hvala" u 6 poruka
|
Raspored div-ova, razliticith visina, jednog pored drugog
Divovi su razlicite visine, a iste sirine, slika u prilogu.
Glavni kont je 600px, a divovi po 200px sirine i rasporedjuju se preko float:left Po 3 treba da idu u red. Prvi problem je izmedju prvog i drugog reda, nakon zavrsetka prvog reda, novi red pocinje zutim divom, ali se taj div ne podize gore, ispod plavog u prvom redu, vec pravi prostor izmedju plavog i zutog. Ajd to sam nekako resio putem jquery da ih podize na gore kod ovakvog slucaja gde u prvom redu rastu divovi, al verujem da moze i bez toga, samo ja nemam ideju. Medjutim, javlja se drugi problem, izmedju drugog i treceg reda. Plavi div iz treceg reda bi trebao da ide tamo gde mu je mesto, u trecem redu, medjutim, on udara u drugi div drugog reda. Evo prostog html koda: HTML kôd:
<div style="width:600px;"> <div style='float:left;width:200px;height:60px;background:blue;'> </div> <div style='float:left;width:200px;height:70px;background:red;'> </div> <div style='float:left;width:200px;height:100px;background:green;'> </div> <div style='float:left;width:200px;height:100px;background:yellow;'> </div> <div style='float:left;width:200px;height:80px;background:silver;'> </div> <div style='float:left;width:200px;height:60px;background:black;'> </div> <div style='float:left;width:200px;height:60px;background:blue;'> </div> <div style='float:left;width:200px;height:70px;background:red;'> </div> <div style='float:left;width:200px;height:100px;background:green;'> </div> </div> |
28. 09. 2012. | #2 |
član
Certified
Datum učlanjenja: 10.06.2010
Lokacija: Beograd
Poruke: 81
Hvala: 40
16 "Hvala" u 13 poruka
|
Ako sam dobro razumeo, samo ubaci jedan clearfix izmedju drugog i treceg reda...
Dakle: HTML kôd:
<div style="width:600px;"> <div style='float:left;width:200px;height:60px;background:blue;'> </div> <div style='float:left;width:200px;height:70px;background:red;'> </div> <div style='float:left;width:200px;height:100px;background:green;'> </div> <div style='float:left;width:200px;height:100px;background:yellow;'> </div> <div style='float:left;width:200px;height:80px;background:silver;'> </div> <div style='float:left;width:200px;height:60px;background:black;'> </div> <div style="clear: both;"></div> <div style='float:left;width:200px;height:60px;background:blue;'> </div> <div style='float:left;width:200px;height:70px;background:red;'> </div> <div style='float:left;width:200px;height:100px;background:green;'> </div> </div> Poslednja izmena od Filip : 28. 09. 2012. u 16:14. |
28. 09. 2012. | #3 |
član
Certified
Datum učlanjenja: 17.10.2006
Poruke: 65
Hvala: 42
18 "Hvala" u 9 poruka
|
Ako sam dobro razumeo sta hocec, onda je bolje da unutrasnje divove apsolutno pozicioniras:
HTML kôd:
<div style="position: relative; width:600px; height: 220px;"> <div style='position: absolute; top: 0; left: 0;width:200px;height:60px;background:blue;'> </div> <div style='position: absolute; top: 0; left: 200px;width:200px;height:70px;background:red;'> </div> <div style='position: absolute; top: 0; left: 400px;width:200px;height:100px;background:green;'> </div> <div style='position: absolute; top: 60px; left: 0;width:200px;height:100px;background:yellow;'> </div> <div style='position: absolute; top: 70px; left: 200px;width:200px;height:80px;background:silver;'> </div> <div style='position: absolute; top: 100px; left: 400px;width:200px;height:60px;background:black;'> </div> <div style='position: absolute; top: 160px; left: 0;width:200px;height:60px;background:blue;'> </div> <div style='position: absolute; top: 150px; left: 200px;width:200px;height:70px;background:red;'> </div> <div style='position: absolute; top: 160px; left: 400px;width:200px;height:60px;background:green;'> </div> </div> |
28. 09. 2012. | #4 |
banned
Professional
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
|
https://github.com/GBKS/Wookmark-jQuery
https://github.com/yconst/Freetile https://github.com/desandro/masonry https://github.com/xlune/jQuery-vGrid-Plugin ...
__________________
Don't look at me; I'm lost too. “If you can't dazzle them with brilliance, baffle them with bul*s**t.” |
29. 09. 2012. | #5 |
profesionalac
Qualified
Datum učlanjenja: 02.05.2009
Poruke: 193
Hvala: 27
8 "Hvala" u 6 poruka
|
Ljudi hvala na odgovorima!
@akubra, malo je nezgodno to sa absolute pozicioniranjem, jer nikad ne znam koje je visine neki box i koliko ce ih biti, a kad je absolute, onda novi boxovi koji dolaze nece gurati stranicu na dole te ce boxovi novi ulaziti negde u kontajner i postajace nevidljivi, a samom kontejneru ne mogu da definisem neku visinu, jer ce biti promenljiva. Mozda postoji neko resenje i za to, nisam se susreo sa tim. @Filip, nesto slicno sam primenio "clear:left", al verujem da bi i ovo tvoje pomoglo, znaci to je bilo resenje. Br@nkoR, to su primeri koji su u stvari meni potrebni, dodatno otvaranje boxova nakon skrola stranice. Sa ovim "masonary" sam se vec susreo, trazeci resenje, ali se nesto nsiam snasao, a i ovo svoje sam zapoceo i malo fali da bude reseno. Tacnije radi u svim broserima, sem u crhome, gde delimicno radi. Drugi problem koji sam naveo u prvom postu je resen sa ovim clear:left medjutim, vracam se opet na prvi problem, a tice se chrome-a i odnosi se na povlacenje boxova putem jquery-ja, na gore, ukoliko postoji prazan prostor izmedju dva boksa (jedan ispod drugog). U samim boxovima postoji mala slicica (razlicite visine) i malo teksta. Kod ucitavanja novih boxova ili ovih pocetnih koji se odmah prikazuju pre skrola strane, u svim browserima, u toku ucitavanja boxova, odmah se pravi prostor za slikicu koja ce biti ucitana te odmah dobijam pravu visinu boxa koja mi je potrebna za proracun rastojanja izmedju gornjeg i donjeg dok u chrome se se ne pravi odmah prostor za slikicu, vec se prikaze kao linija, pa se onda ucita slika. U tom slucaju dobijam nerealnu visinu boxa zbog cega dodje do preklapanja nekih boxova. Hteo bih da pre proracuna razlike 2 boxa u visini i poziciji dozvolim tek kad se slika ucita, skroz otvori. Pokusavao sam nesto sa jquery al mi nije uspelo, te ako neko ima neko resenje, dobro bi doslo. Poslednja izmena od martinluter : 29. 09. 2012. u 10:37. |
29. 09. 2012. | #6 |
banned
Professional
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
|
Definiši dimenzije slike u HTML-u, npr:
HTML kôd:
<img src="image.png" width="200" height="150" alt="image" />
__________________
Don't look at me; I'm lost too. “If you can't dazzle them with brilliance, baffle them with bul*s**t.” |
"Hvala" Br@nkoR za poruku: |
29. 09. 2012. | #7 | |
profesionalac
Qualified
Datum učlanjenja: 02.05.2009
Poruke: 193
Hvala: 27
8 "Hvala" u 6 poruka
|
Citat:
Cudi me, to sam probao i ranije, nije htelo, sad hoce. Izgleda da je cekalo na tvoj odgovor, pa da proradi . ovo sam probao: HTML kôd:
$("img").one('load', function() { // do stuff }).each(function() { if(this.complete) $(this).load(); }); Ovde ima nekih primera: http://stackoverflow.com/questions/3...mage-is-cached |
|
29. 09. 2012. | #8 |
banned
Professional
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
|
Masonry koristi https://github.com/desandro/imagesloaded
one() metod ne radi na kasnije dodate elemente u stranicu, tebi je potrebno nešto kao live() metod ali i to ne radi sa load eventom, a takođe nije moguće ni sa event delegaion-om. Ono što mi pada na pamet je da na te novododate boxove tačnije slike direktno dodaš event handlere.
__________________
Don't look at me; I'm lost too. “If you can't dazzle them with brilliance, baffle them with bul*s**t.” Poslednja izmena od Br@nkoR : 29. 09. 2012. u 13:49. |
29. 09. 2012. | #9 | |
profesionalac
Qualified
Datum učlanjenja: 02.05.2009
Poruke: 193
Hvala: 27
8 "Hvala" u 6 poruka
|
Citat:
Gledam, cega sve ima i kod JS, php (oop), hmtl5, css3, razne biblioteke, cudesa i Bogova, prosto covek ne moze da prati sve. Ja mnogo kaskam, al' eto, ne odustajem, naucim ponesto kroz primere. Ponekad se pitam, sto se ja oko ovoga petljam uopste, kad nesto ne ide, ne moze da se resi, nije to za mene, ali opet me nesto tera, neki nemir u meni da ne odustanem. Dodjem ja uvek do resenja, samo sto se sve oduzi u neko besmisleno potroseno vreme |
|
|
|