homepage Welcome to WebmasterWorld Guest from 50.16.112.199
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Smart square tiling with css float:left
merijnvw

5+ Year Member



 
Msg#: 4210510 posted 6:10 pm on Oct 2, 2010 (gmt 0)

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?

 

enigma1

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4210510 posted 6:29 pm on Oct 2, 2010 (gmt 0)

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.

merijnvw

5+ Year Member



 
Msg#: 4210510 posted 10:29 pm on Oct 2, 2010 (gmt 0)

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)

Major_Payne



 
Msg#: 4210510 posted 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.

enigma1

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4210510 posted 10:46 am on Oct 3, 2010 (gmt 0)

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>

sanji41



 
Msg#: 4210510 posted 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...]

merijnvw

5+ Year Member



 
Msg#: 4210510 posted 5:24 pm on Oct 5, 2010 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved