I am putting together a "Starcraft Shrine" of sorts (which will include unit animations and sounds from the game) and have come up with a cool-looking design using a 4 row x 12 column TABLE: http://www.hazmatt.net/gaming/starcraft … _based.php
As you can see from the examples, the table attempt is exactly what I want. It works great in Safari 4.0.3 (Mac), Firefox 3.5.2 (Mac) and Firefox 3.0.10 (Win). A glitch (now fixed) shows up in the stupid browser known as Internet Explorer 8 where the first row doesn’t stay shrunk around the images, so there are ugly gaps if the content pushes down (which it likely will).
So, I’ve decided to see if CSS can solve this and I’m kind of coming to the conclusion that it can’t. The first problem I really am coming up against is that due to my usage of float: left on all of the image elements, I have no way to prevent the wrapping of those elements if the page narrows. Also, I’ve played around with absolute / relative positioning but I just don’t know if my design is possible in CSS. I can probably do without the stretchy shock-absorbers, but I think that it’s just too cool to not use if I can help it.
So… can I do this all in CSS?
edit: I hope it’s obvious I left the frame border / CSS borders intact to help in seeing the layout. :)
I re-organized the div tags based on your first suggestion and I believe I am grasping the whole CSS layout thing a little more and getting closer to my goal.
But as for your suggestion for putting everything inside a fixed wrapper, that will make my percentage based stretch images (like the shock absorbers and the thin red top and bottom borders) just not stretch anymore (since the parent element now has a fixed width).
I think the current design is getting closer but at this point I’m thinking tables is the only way to guarantee the exact look I’m going for (which can be seen here… I did manage to use some CSS design to fix up the IE problem).
OK, cool… I’m making progress and with your encouragements I’ll eventually get this (I hope).
It seems to me that CSS has a flood of options and possible solutions and it just takes (as you said) lots of trial and error or know-how to make it work. The frustrating thing for me right now is that designing with tables just works. CSS is requiring *gasp* new learning, and it is definitely tough going.