I:M> a 3x3 cube with css

[gomesbascoy]

I'm trying to do that, like a 3x3 table (with specific width and
height) BUT whit divs and without absolute position....
this is my imposible mission xD

example:

[Red] [Green] [Blue]
[Green] [Blue] [Red]
[Blue] [Red] [Green]

(width: 64px; height: 64px)
all this inside another box and in the center of screen

¿is it posible?

thanks

[Steve Pugh]

go*********@gmail.com wrote:

I'm trying to do that, like a 3x3 table (with specific width and
height) BUT whit divs and without absolute position....
this is my imposible mission xD

example:

[Red] [Green] [Blue]
[Green] [Blue] [Red]
[Blue] [Red] [Green]

(width: 64px; height: 64px)
all this inside another box and in the center of screen

¿is it posible?

Does it need to work in IE?
If no, then it can be done quite easily.
If yes, then it can be done with some difficulty.

But are you sure that a table wouldn't be more appropriate? What
content is going to go inside these squares?

Steve

[Steve Pugh]

go*********@gmail.com wrote:

I'm trying to do that, like a 3x3 table (with specific width and
height) BUT whit divs and without absolute position....
this is my imposible mission xD

example:

[Red] [Green] [Blue]
[Green] [Blue] [Red]
[Blue] [Red] [Green]

(width: 64px; height: 64px)
all this inside another box and in the center of screen

¿is it posible?

Does it need to work in IE?
If no, then it can be done quite easily.
If yes, then it can be done with some difficulty.

But are you sure that a table wouldn't be more appropriate? What
content is going to go inside these squares?

Steve

[Veerle]

go*********@gmail.com schreef:

I'm trying to do that, like a 3x3 table (with specific width and
height) BUT whit divs and without absolute position....
this is my imposible mission xD

example:

[Red] [Green] [Blue]
[Green] [Blue] [Red]
[Blue] [Red] [Green]

(width: 64px; height: 64px)
all this inside another box and in the center of screen

¿is it posible?

thanks

Yes it is possible, but as Steve said, it's not straight-forward. Here
you go:

Centering the whole thing horizontally in your page can be easily done
by setting the left and right margin to auto.

Centering the whole thing vertically in your page is somewhat more
difficult, but can be done like explained here:
http://www.jakpsatweb.cz/css/css-ver...-solution.html

Make sure the inner div is 192 pixels wide and heigh. Put 9 div blocks
in it, all 64 pixels wide and heigh and set to float left. Because
there is no place in the inner div for the 4th block next to the 3rd
block, it will go automatically to the next row. The same for the 7th
block.

Result looks good in IE and Firefox:
http://www.myjavaserver.com/~veerle/test_cube.html

[gomesbascoy]

Sorry, i had lost this post :P
thank you for the help :-)
Steve: now I only want to work in my browser (firefox :D)
Veerle: thaaaaaaaaaaaaankkksss for the example :-)