html layout question?
- Started
- Last post
- 8 Responses
- felizfeliz
How would I go about making in html the layout shown below.
The black squares follow a rule of being 40px right to their nearest neighbour and 20pix below their nearest neighbour.
The order of black squares should be independent to the layout. So it shouldn't matter if the top left square is big or small etc. I
I could code this in flash, each square would just look left and above and then position itself relatively. Is this achievable with Javascript/css??
If anyone has some advice/examples/tutorials I'd be very grateful.
Am I right in thinking I can just 'float' each square with css? I can't see how it'd work vertically then...
- Stugoo0
are the boxes going to change height/width?
if not i would probably use abs positioning for this...fook what a layout.
otherwise experimenting with the floats will be the best idea.
- felizfeliz0
Each box will be a fixed in size. If I use abs positioning, then when I update and add a new box in the top left it'll mess up. So it needs to be dynamic.
My current thinking is to make a small flash file that'll scan a folder of images(black squares) and then figure out the layout, generate an xml feed of co-ordinates and then the html page uses that to position the squares! (cos I don't know too much about html, css, javascript...).
but there must be a simpler way of doing it....
- felizfeliz0
^bump!
- OhYeah0
Have a look at http://www.sohtanaka.com/web-des… I am sure you could do this with jQuery, a bit like grid-a-licious.
Another way of doing it would be to create 3 content holders and then float them left and then add your boxes within each content holder. Just my 2 cens.
Good luck with it.
- felizfeliz0
ah yes - http://suprb.com/apps/gridalicio… works how I'm thinking, only i just need it to adapt when new items are added instead of on resize. Thanks for the help OhYeah.
- Stugoo0
so wait a minute the content will be constantly updating?
i dont see any particular flow of divs judging by your layout.. what happens to the 1st div when a new one is added?
- felizfeliz0
not constantly updating - just occasionally. the 1st div/black square becomes the second. it wouldn't need to animate...
ok, found this:
http://desandro.com/resources/jq…that's what i'm after.
- but.. I need it to work with varying widths... hmmm...felizfeliz
- This looks ace! I think this is the one you are a looking for.OhYeah
- Stugoo0
ah right. love to see the solution when you got it workin!
- yeah, me too. i think i might need to change a few things - perhaps use fixed widths....felizfeliz