Welcome to WebmasterWorld Guest from 54.205.115.177

Forum Moderators: not2easy

Message Too Old, No Replies

Smart square tiling with css float:left

   
6:10 pm on Oct 2, 2010 (gmt 0)

5+ Year Member



Hello, I want to make a photo gallery in which all photos are loaded in square div's with 3 different, randomly choosen sizes. This will give no trouble. My problem is that I want all the photos stacked on top of eachother in a playful way, without leaving too many gaps. Some gaps are ok, but preferably only rectangular ones.
To understand what my problem is and what my solution is right now, see the following url, after removing the word MOOSE: [mvaMOOSEnwouden.nl...] You can refresh a few times.
I wonder why sometimes the blocks are above eachother on one rule, and the other time they are not.
Does any of you have a suggestion for the right way to accomplish this?
6:29 pm on Oct 2, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



First fix your margins. margin-top and margin-left need units.

If you want them to be stacked you may need to put the absolute property to the inner div and then the margin offsets are subject to its parent div.

Randomize them based on the square area keeping track of the populated areas.
10:29 pm on Oct 2, 2010 (gmt 0)

5+ Year Member



Thanks for showing me that little mistake.
But that suggestion you make was my plan A, but I realized it would require a lot of mathematical stuff and even then probably not even work the way I want( reducing L- and other fancy shapes as much as possible).
So my plan B was using css float, don't you think there's a way to make this all more stuffed together using float? (and by that I mean additions, so not using float only)
11:37 pm on Oct 2, 2010 (gmt 0)



You might look into using a flash photo gallery or JQuery with the photo stacking options. Not sure, but JAlbum may have a skin for their free software that does that effect.

The other way is the hard fixed, way. Using the CSS position property along with the z-index set for each image. Then you can stack them as you wish.
10:46 am on Oct 3, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



From the page you posted I understand you want this to be setup on the server side. So you could generate few squares one smaller than the other and then superimpose them. You can give different rotation angles using to The different images, in this case in your final code each div will point to the rotation script.

And you don't need z-index because a sequence is defined so bigger squares are in the bottom of the stack ie are set first so the later ones are drawn at the top. If you want the generator to be fully dynamic then you will need some more complex code, but you can start with fixed coordinates and later start thinking about making them random.

The float property on its own will not do anything, you will need to setup the offsets for each square. Here is a sample runs on the server side with php.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test page</title>
<style type="text/css">
body {width: 700px; margin:0 auto; padding: 0}
div {position: relative; margin:0; padding: 0}
.ovr1 div {
position: absolute;
}
</style>
</head>
<body>
<div class="ovr1" style="width:660px;background-color:#DDD;height:600px;">

<?php
$bg_array = array();

for($i=0, $j=10; $i<$j; $i++) {
$bg_array[] = 'rgb(' . implode(',', array(rand(0,255),rand(0,255),rand(0,255))) . ')';
}

$dims = 200;
for($voff=$toff=$i=0, $j=8; $i<$j; $i++) {
$bg_index = rand(0, count($bg_array)-1);
echo '<div style="border: 1px solid #FFF;background:' . $bg_array[$bg_index] . '; width:' . $dims . 'px;height:' . $dims . 'px;margin:' . $voff . 'px 0px 0px ' . $hoff . 'px;"><b>' . $i . '</b></div>';
$voff += rand(0, 100);
$hoff = rand(0, 200);
$dims -= 20;
}
?>
</div>
</body>
</html>
1:44 pm on Oct 3, 2010 (gmt 0)



hi! well i've read that you can use the :nth child in css, maybe you can give it a try. works wondes! heres the link: [sohtanaka.com...]
5:24 pm on Oct 5, 2010 (gmt 0)

5+ Year Member



Thanks to the three of you, these are all very useful ideas and suggestions, especially thank you enigma1 for your lengthy reply! I'm not finished yet but this pushed me beyond not seeing any solution in the beginning