Grow your CSS skills. Land your dream job.

Tables… Hey—they just work! (but help me migrate to CSS)

  • # August 16, 2009 at 6:37 pm

    Hey folks, first post here.

    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

    Word on the street is that the cool kids go with CSS, so that’s what I’m trying to get into:
    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. :)

    edit 2: Updated example page URLs

    # August 18, 2009 at 1:23 am

    1. Don’t put everything in its own div. Use divs more as horizontal blocks.
    For instance: Take that first inch or so up top,float the images left.

    2. To avoid the images wrapping on browser resize, put everything inside a fixed width "wrapper" div.

    # August 19, 2009 at 10:17 pm

    Thanks for the tips, soap.

    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).

    # August 20, 2009 at 1:43 am

    You can put a min-width and max-width on elements. For instance, you can use percentages for divs inside the ‘wrapper’ div, and have max-width:800px; min-widht:600px;

    What you’re trying to do isn’t the simplest thing to wrap your head around if you’re new to CSS, but with trial and error, you’ll figure it out.

    # August 20, 2009 at 3:17 pm

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".