How can i possible adminster this?

[billy_111]

Hi,

I was wondering if you guys could offer some kind advice… I need to build the following page:

http://www.freemanholland.com/cow/homepage.jpg

If you look at the big panel, it displays multiple boxes each containing images/boxes with different shapes and sizes. Now designing this won’t be an issue in terms of CSS, but trying to administer this in the back-end to update them if necessary seems to look quite a challenge…

Can anyone advise as to how i should go about doing this? The images needs to spread across the whole page like this:

http://www.freemanholland.com/cow/public_html/

But you see here the boxes are all the same height but different widths, it now needs to change to match the image i have shown above…

Is this something that could be done? If so, i would really appreciate any advice possible…

Thanks again

[Cups]

Yes, they were, they are all composed of ~100px square boxes.

Some consisting of;

1x1
1x2 (long)
2x1 (wide)
2x2

Now you’ve got some which are ~230px wide, shattering my assumption that everything was made up of square boxes.

You’ve introduced rectangles which are not made of 100x100 boxes which makes the challenge to accomplish this well-nigh impossible (for me).

For that reason, I’m out.

[Cups]

Hope I’m not dragging you in the wrong direction but have you seen jQuery Mason?

[billy_111]

Ok,

I’m having a go and i have so far got this:

http://www.freemanholland.com/cow/public_html/index/test

Now i have numbered the boxes to show how they should be in order, but they are sort of mixed up and there are white spaces…

Can you help…

Thanks

[billy_111]

Well basically there are 4 different types of boxes. Each have different shapes and sizes…

I was thinking of having a table with the following fields:

ID, image, description, link, type

So depending on which “type” the box is, the rows will contain information like so:

1, image1.jpg, NULL, abc.php, 1
1, image2.jpg, NULL, abc.php, 1
1, image3.jpg, NULL, abc.php, 2
1, image4.jpg, This is the description, NULL, 3

So you see in the image the first 3 boxes are just images, but the fourth box contains information (i.e. the big yellow one), which i would need to administer as i don’t want all images as it won’t be good for SEO.

Would this method work?

[Cups]

You seem to have changed your mind about the size of the boxes - 3, 10, 13 are not the equivalent of 2 small ones any longer (FF3, win32)

[billy_111]

Well if you look at the jpg image i have shown in my very first post, you can see that the third image along the top is longer in length…

The order of the images are the same as shown in the jpg…

Can you help me understand why i have the white spaces? And why the boxes don’t fit in place…

Thanks

[billy_111]

Erm i must say i’m confused.

If you look at the third image along the top OR the first image along the second row you can see it’s a rectangle approximately…

See this image:

http://www.freemanholland.com/cow/public_html/homepage/landscape.jpg

This i what i showed in the initial jpg in my first post??

[Cups]

If your groups of 4 small images or 2 small one wide/long were each to be solidified as a a single image, lets say 200px square, then this would be a whole lot easier.

But you are still going to be reliant upon letting HTML do its own thing, in reordering the boxes as the browser window changes depending on the user.

Given that the client is governing this, I can’t see a reason not to use Mason.

It might be worth testing Mason and seeing how it does not do what you want.

[billy_111]

I’ve even set the width and heights to squares to be exact but it still does not appear anything like jQuery Mason…

Take a look:

http://www.freemanholland.com/cow/public_html/index/test

[billy_111]

No i haven’t seen that Cups thanks.

From looking at the examples i can’t see one as close to what i am trying to achieve…

By using jQuery Mason would i be able to present something like this:

http://www.freemanholland.com/cow/homepage.jpg

And have the ability to administer the boxes in the back-end…?

Thanks

[billy_111]

Ok let me explain further

If you see that image i have provided…

The BEST thing would be to have it randomized using RAND() i assume? making sure there are no white spaces in between so having all the images stuck to one another.

IF thats not really possible, we can forget about the random thing and just always have the same layout, and always have the boxes in the same place.

The layout will be elastic, as my client is using a 17inch screen whilst i have a 15, so i will need to have the ability to administer ALL of the images, text etc and just have them adding on at the end of fit in place somehow… On my screen it should sort of look like this:

http://www.freemanholland.com/cow/15inch.jpg

So i would need it to spread across the whole page and fill the screen…

What would you recommend?

Thanks for taking the time to help

[Cups]

Everything seems to be either 1 square (small image) 2 squares ( long and wide images) or 4 squares ( blocks).

I imagine that the juxtaposition of each box to its neighbour is deliberate, or it is supposed to be random?

If its random, then it might be possible to work out an algorithm, but I rather fear that the ( (blocks) of 4 square text are a) not images and b) not to be randomly placed.

Plus, is the page fixed width or is it supposed to be elastic?

You’d better define the spec a bit more.

[TriLLi]

Hi,

float: left will resolve your issue, for example

<div id="container" style="width: 100px;">
  <div style="float:left;"><img src=".../"/></div>
  <div style="float:left;"><img src=".../"/></div>
  <div style="float:left;"><img src=".../"/></div>
  <div style="float:left;"><img src=".../"/></div>
  <div style="float:left;"><img src=".../"/></div>
  <div style="float:left;"><img src=".../"/></div>
  <div style="float:left;"><img src=".../"/></div>

</div>

if image can’t fit in current row of images it will be added to next row.

But u need to create administration part where you will administer order of items and calculate theirs width for example container width 1000px

1. div - width 100
2. div - width 200
3. div - width 300
4. div - width 50
5. div - width 100
6. div - width 250

after item number 7 new row will appear for any next item