 |
|
| martinluter |
28. 09. 2012. 14:37 |
Raspored div-ova, razliticith visina, jednog pored drugog
1 Prilog(a)
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>
Ako neko ima ideju, dobro bi dosla, jer me ovo mori vec mesecima (nisam sve vreme radio na tome :D). |
| Filip |
28. 09. 2012. 15:10 |
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>
|
| akubra |
28. 09. 2012. 15:18 |
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>
|
| Br@nkoR |
28. 09. 2012. 16:05 |
|
| martinluter |
29. 09. 2012. 09:16 |
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.
|
| Br@nkoR |
29. 09. 2012. 10:10 |
Definiši dimenzije slike u HTML-u, npr:
HTML kôd:
<img src="image.png" width="200" height="150" alt="image" />
Ili sačekaj da se slike učitaju (onload event), npr. pošto si pomenuo Masonry imaš: http://masonry.desandro.com/demos/images.html |
| martinluter |
29. 09. 2012. 10:59 |
Citat:
Originalno napisao Br@nkoR
(Napišite 108672)
Definiši dimenzije slike u HTML-u, npr:
HTML kôd:
<img src="image.png" width="200" height="150" alt="image" />
Ili sačekaj da se slike učitaju (onload event), npr. pošto si pomenuo Masonry imaš: http://masonry.desandro.com/demos/images.html
|
Da Br@nkoR, to je to, definisao sam visinu slika.
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();
});
sto bi trebalo da radi, i radi kod pocetnih boxova i slika, ali kod dodatnih, koje se ucitavaju skrolanjem strane, ne daje rezultat.
Ovde ima nekih primera:
http://stackoverflow.com/questions/3...mage-is-cached |
| Br@nkoR |
29. 09. 2012. 12:35 |
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. |
| martinluter |
29. 09. 2012. 13:29 |
Citat:
Originalno napisao Br@nkoR
(Napišite 108675)
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.
|
@Br@nkoR resismo ga preko definisanja visine u slikama, za sada ce ostati na ovome.
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 :D |
| Vreme je GMT +2. Trenutno vreme je 03:31. |
|
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.