| Posted by spikey83, 02-03-2010, 03:51 PM | | Hi All.
I've been developing websites now for a while and i have got stuck on something. I'll be very grateful if you can help.
I have a client that has a website that allows users to upload ads.. width/height (10px,20px to 100px). These dimensions are in a drop down.
Now comes the tricky part.. they want the ads displayed on the home page just like the million dollar home page site.
The only data i have to work with is the image and sizes, I can't change the way the site works as its already built and I'm only adding extras to the site.
Array
(
[0] => Array
(
[image] => image1.jpg
[width] => 30
[height] => 70
)
[1] => Array
(
[image] => image2.jpg
[width] => 70
[height] => 30
)
..............
)
So far i have got the images displayed on the grid by floating them, but floating them leaves spaces.
So i now have to work out how to fill in the spaces.
Thanks in advance.
|
| Posted by cygnusd, 02-03-2010, 04:11 PM | | This is more of a web design (HTML/CSS) issue, than a PHP one.
You mean you don't have access to the template/phpcode that gets generated?
It might help if you can post a demo URL of some kind to illustrate the float spacing problem with your HTML/CSS.
|
| Posted by DiegoRBaquero, 02-03-2010, 04:15 PM | | Probably, you would need to devide the image into sections, asign the image to a column and row, and then in main page, the PHP loads the images that fill the table...
|
| Posted by spikey83, 02-03-2010, 04:21 PM | | Thanks for the reply. I would post a link but the forum doesnt allow it unless i have 5 or more posts. as soon as i do, i will post a screen shot to the grid i have.
|
| Posted by spikey83, 02-03-2010, 04:26 PM | | I've been working on it today and no luck so far, Today i tried breaking it up into rows, then each row has a block of 10 100px divs, then using PHP to loop through the array to get an image or images to fill this block, etc.
|
| Posted by cygnusd, 02-03-2010, 04:29 PM | | You might also want to try absolute positioning (i.e. position: absolute), if the image place is fairly static in the page. Though editing the original template code to add additional markups would help.
|
| Posted by spikey83, 02-03-2010, 04:29 PM | | Here's a picture of the grid so far!
http://img63.imageshack.us/img63/3021/gridx.jpg
|
| Posted by spikey83, 02-03-2010, 04:32 PM | | I can do anything to the html on the home page, the only thing i can't do is change the data in the array i'm using as thats the only usable data i have.. except links to the ad site etc.
|
| Posted by cygnusd, 02-03-2010, 04:49 PM | | it seems you need to code a smart server-side algorithm that arranges each image, relative to their sizes and compresses them (i.e., makes them fit). The best analogy for this is an algorithm that does something like a "magnetized tetris without gaps". Looks like a good CS undergrad problem to solve. For me, it's hard to solve this on a markup/css level. Even milliondollarhomepage seems to use imagemaps for this.
|
| Posted by DiegoRBaquero, 02-03-2010, 05:42 PM | | Ok, I saw some website,you need CSS, it's easy.
Maybe hiring someone to do it?
|
|
 Add to Favourites
 Print this Article
|
