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 28. 09. 2012.   #1
martinluter
profesionalac
Qualified
 
Datum učlanjenja: 02.05.2009
Poruke: 193
Hvala: 27
8 "Hvala" u 6 poruka
martinluter is on a distinguished road
Default 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>  
Ako neko ima ideju, dobro bi dosla, jer me ovo mori vec mesecima (nisam sve vreme radio na tome ).
Priloženi thumbnailovi
Kliknite na sliku za uvećanu verziju

Naziv:	divovi1.jpg
Pregleda:	1301
Veličina:	14,4 KB
ID:	898  
martinluter je offline   Odgovorite uz citat
Staro 28. 09. 2012.   #2
Filip
član
Certified
 
Avatar Filip
 
Datum učlanjenja: 10.06.2010
Lokacija: Beograd
Poruke: 81
Hvala: 40
16 "Hvala" u 13 poruka
Filip is on a distinguished road
Default

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.
Filip je offline   Odgovorite uz citat
Staro 28. 09. 2012.   #3
akubra
član
Certified
 
Avatar akubra
 
Datum učlanjenja: 17.10.2006
Poruke: 65
Hvala: 42
18 "Hvala" u 9 poruka
akubra is on a distinguished road
Default

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> 
akubra je offline   Odgovorite uz citat
Staro 28. 09. 2012.   #4
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

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.”
Br@nkoR je offline   Odgovorite uz citat
Staro 29. 09. 2012.   #5
martinluter
profesionalac
Qualified
 
Datum učlanjenja: 02.05.2009
Poruke: 193
Hvala: 27
8 "Hvala" u 6 poruka
martinluter is on a distinguished road
Default

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.
martinluter je offline   Odgovorite uz citat
Staro 29. 09. 2012.   #6
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

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
__________________
Don't look at me; I'm lost too.
“If you can't dazzle them with brilliance, baffle them with bul*s**t.”
Br@nkoR je offline   Odgovorite uz citat
"Hvala" Br@nkoR za poruku:
Staro 29. 09. 2012.   #7
martinluter
profesionalac
Qualified
 
Datum učlanjenja: 02.05.2009
Poruke: 193
Hvala: 27
8 "Hvala" u 6 poruka
martinluter is on a distinguished road
Default

Citat:
Originalno napisao Br@nkoR Pogledajte poruku
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
martinluter je offline   Odgovorite uz citat
Staro 29. 09. 2012.   #8
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

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.
Br@nkoR je offline   Odgovorite uz citat
Staro 29. 09. 2012.   #9
martinluter
profesionalac
Qualified
 
Datum učlanjenja: 02.05.2009
Poruke: 193
Hvala: 27
8 "Hvala" u 6 poruka
martinluter is on a distinguished road
Default

Citat:
Originalno napisao Br@nkoR Pogledajte poruku
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
martinluter je offline   Odgovorite uz citat
Odgovori



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


Vreme je GMT +2. Trenutno vreme je 01:34.


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.