Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #25779
    HazMatt
    Member

    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

    #62354
    soap
    Participant

    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.

    #62439
    HazMatt
    Member

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

    #62444
    soap
    Participant

    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.

    #62478
    HazMatt
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.