Forum Moderators: not2easy
Seriously, I've been quietly reading this CSS forum. The recent CSS vs. Table layout thread really hit home and got me thinking. The beveled button discussion got me pumped to learn something new.
So I'm ready to take the plunge. Where's the blue pill? I don't want to go back.
I'm starting on a new site right now, so this is a great time. I'm still having a tough time imagining layout though without the rigid unmoving zones of a table, but I think I'm getting there.
I'm a little overwhelmed though, and still a bit scared ;). I've become good enough with tables that I rarely even bother to test on different browsers. I can sit down and crank out a layout in tables almost unconsiously (but can't maintain it later, of course).
So where to?
What tools/resources do you guys use?
A CSS editor?
What browsers (IE6, Netscape 7, Opera 7)? Older ones?
What's the authorative CSS reference? W3? Some other site?
Is there a book that is the CSS bible?
Thanks for your advice. I'll pitch camp here for a while.
CSS Library [webmasterworld.com]
I think you'll find almost everything you'll need in the library. If you have any questions concerning those library items, you can post them here in the CSS Forum.
Good luck and welcome to the edge of the fence.
Testing: IE6, NN7, Opera7. I also nip out to a library or cybercafe every now and then so I can fix the IE5 box model problems. But I'm in the fortunate position that I have convinced my current clients that its pointless to worry too much about stone age browsers.
Authorative reference: I keep downloaded versions of the complete CSS and HTML4.01 specs on my machine. To make them a bit more useful as a reference I add a quick reference frame (in the style of Eric Myers handy reference [meyerweb.com])
Having them offline means I can happily churn out code when I can't get online (like on trains and planes or when I'm lazing in the garden enjoying the sun).
I've been using stylesheets for years to format fonts, table cells, etc. but I never really understood what it was all about until now (though I thought I did.)
My homepage is converted. Several boxes with borders but not a single table in sight. And I have a new appreciation for lists.
I've also decided to design this site with em font sizes to let people control the font themselves. It's a whole new game.
thanks guys.
..CSS does not allow me to put a box below a box without contemplating pixels
If it were possible I would do it but it isn't.
Solution 1:
<div id="one"></div>
<div id="two"></div>
Solution 2:
Use absolute positioning with percentages instead of pixels. i.e.
<div style="position:absolute;top:20%;height:30%"></div>
<div style="position:absolute;top:50%"></div>
Describe the layout you require and I'll tell you roughly how I'd do it in CSS without tables.
The only layout style that has real problems is getting a footer that appears at the bottom of the window or the bottom of the page (if the page is bigger than the window). And this is due to poor support for useful CSS properties like min-height (otherwise it would be easy).