kostenloser Webspace werbefrei: lima-city

Div-Positionierung

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   simple-past

   simple-past hat kostenlosen Webspace.

   19:15, 27.7.2014

   Hey,
   
   Ich würde gerne folgende div:
   
   

   <div id="modul">
   <div id="div1">Test1</div>
   <div id="div2">Test2</div>
   <div id="div3">Test3</div>
   <div id="div4">Test4</div>
   .
   .
   .
   <div id="div[n]">Test[n]</div>
   </div>

   
   
   ausrichten. Dabei haben die div 1-n alle die gleiche Höhe + jeweils eine davor festgelegte Breite und einen gewünschten Innenabstand zum div #modul and der Linken Seite. (würde von einem php script kommen)
   Das Problem: Wenn über einem der div[n] frei ist (d.h. irgendwo in eine der Zeilen 1-[n-1]) soll es nach oben rutschen.
   
   Wäre das irgendwie so oder so ähnlich mit CSS realisierbar?
   Und wenn Nein: Würde irgendjemand spontan einfallen wie man es mit JS oder JQuery und 50<n<100 realisieren könnte? bzw. mir etwas anderes empfehlen könnte?
   
   Danke

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. matthias-detsch

   

   matthias-detsch hat kostenlosen Webspace.

   19:58, 27.7.2014

   Wenn du weißt, wieviele div's das sind, kannst du vlt (nicht getestet):
   

   for(var i = 1; i <= n; i++){
   //falls jquery
   var inhalt_divn = $('#div'+i).html();
       if(inhalt_divn == ''){ //wenn div leer ist, also ein leerer string zurück gegeben wird
          $( "#div"+i ).effect( "drop", "up", "easing" );  //der standart bei easing ist swing
       }
   //falls kein jquery
   var inhalt_divn = document.getElementById('#div'+i).HTML();
      if(inhalt_divn == ''){
           document.getElementById('#div'+i).style.display='none'; 
      }
   }

   
   Ich hoffe das ist was du möchtest.
   das script schaut, ob in einem div mit id div[n] kein inhalt ist, und blendet das aus, zumindest bei dem ohne jquery. bei dem mit jquery habe ich es nicht getestet, ob die anderen dann nach rutschen
   
   du kannst das div bei jquery natürlich noch vorher unsicht bar machen, indem du vor
   

   $( "#div"+i ).effect( "drop", "up", "easing" );

   
   noch folgendes einfügst:
   

   $('#div'+i).toggle( "fade" );

   
   
   Beitrag zuletzt geändert: 28.7.2014 7:29:13 von matthias-detsch
4. Autor dieses Themas

   simple-past

   simple-past hat kostenlosen Webspace.

   20:28, 27.7.2014

   Hey Matthias, erstmal Danke für deine Hilfe
   
   Ich hab mich leider nicht genau asgedrückt, mit dem Beispiel sollte es aber eindeutig sein:
   
   http://simple-past.lima-city.de/test2.html
   
   soll werden zu
   
   http://simple-past.lima-city.de/test.html
   
   wobei ich das hier einzelnd per Hand gelöst habe, es jedoch immer unterschiedliche divs sein werden.
   
   Edit: Ich könnte jedem Element in der jeweiligen Rheie die Klasse row[n] geben und dann mit jedem einzelnen Element anfangen eine Collisionsabrage für alle Klassen row[n-1] zu machen - im fall ich würde es verschieben - und ggf. das Element verschieben und die Klasse ändern - aber wären das nicht zu viele Abfragen? - Es wäre ca. 5000 bei 100 divs inc. Animation bei verschieben und dies jenachdem auch noch alle paar Sekunden...
   
   Beitrag zuletzt geändert: 27.7.2014 21:02:16 von simple-past

5. fuerderer

   fuerderer hat kostenlosen Webspace.

   22:06, 27.7.2014

   Hallo.
   
   Ich bezweifle, dass dies mit reinem CSS machbar ist. Du wirst wohl eine Skriptsprache brauchen.
   Ich würde alle Div's absolut positionieren und die Koordinaten berechnen. Du speicherst alle in einem Array und bei jedem gehst du rückwärts nochmal alle vorhergehenden Elemente durch. Dann nimmt du das unterste Element mit dem es kollidiert und setzt das neue da drunter. Mit dem untersten meine ich die bereits berechnete Y-Koordinate und nicht die Position im Array.
   
   Am besten machst du das ganze in PHP, aber auch JavaScript wäre möglich.

6. sebulon

   

   sebulon hat kostenlosen Webspace.

   17:12, 28.7.2014

   das was du da vorhast ist eine art-Tetris...
   
   http://masonry.desandro.com/
   
   wär eine jquery erweiterung, ansonsten such dir ein Tetris in JavaScript aus und schieb das da rein... PHP macht keinen sinn, da es sich hier rein um Design handelt... CSS kann keine Kollisionserkennung...
   
   ansonsten ginge das über die -flex-box in CSS, aber da nur mit einschränkungen, nciht so scheinbar willkürlich...

7. hechma

   

   hechma hat kostenlosen Webspace.

   20:30, 29.7.2014

   hallo simple-past,
   
   
   nun eine kollisionserkennung mit php kann man natürlich anhand der gegebenen dimensionen und abstände der div

   simple-past schrieb:
   ...Dabei haben die div 1-n alle die gleiche Höhe + jeweils eine davor festgelegte Breite und einen gewünschten Innenabstand zum div #modul and der Linken Seite...

   selber errechnen.
   
   
   wenn man das genze aber dynamisch veranschaulichen, also animieren möchte, kann man das auch gleich komplett mit jquery machen.
   natürlich gibt es schon einige scripts die einem zum beispiel die berechnung der kollisionen abnehmen (ich denke da an jquery-ui-collate oder jquery-overlap), aber was wären wir denn für programmierer wenn wir das nicht lieber selbst programmieren
   
   
   ich habe das ganze so wie ich es verstanden habe mal mit selbsterklärenden variablennamen und ein paar kommentaren ausführlich umgesetzt.
   Demo: http://hechma.lima-city.de/kaestchen-in-zeilen-zusammenfassen/
   Code: http://hechma.lima-city.de/kaestchen-in-zeilen-zusammenfassen/code.php
   
   
   der php-teil darin sorgt nur für zufällige anfangsbedingungen in den von dir beschriebenen grenzen.
   der chrome-browser meiner alten möhre schafft locker auch 1000+ div.
   viel spaß damit
   
   
   lg hechma

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?