scriptygoddess

30 Mar, 2004

The end of the world is nigh! CSS is here!

Posted by: Jennifer In: Bookmarks

I'm just kidding. Well… not really ;O)

I'm not a CSS pro – I'd like to be one. I've been trying to follow the CSS-progression from the sidelines, sometimes getting my hands a little dirty, but unfortunately, it's not enough. Up until very recently, the company I worked for was required to support Netscape 4.x. Now that that support has been dropped, CSS based layouts are just around the corner. In fact one major department is already heading in that direction. (Do you hear that noise? That's me shaking in my boots!!!)

I'm doing "The Right Thing"™ and recommending the same move – but the fact of the matter is that I'm not up to the task. I have a LONG ways to go before I can do such an undertaking.

Probably one of my biggest problems to overcome is "Where do I begin?!" – I understand HOW to do a lot of CSS stuff (font styling, positioning – although I'm a little lost on the relative, absolute, and static differences) – but if I'm starting out with a design in photoshop – What is my next step? How do I break it down into CSS code? What's the best/right way to group and nest layers?

In a Table-Design world – this used to start with me printing out my design and drawing a grid right on top of the printout. Grouping off certain areas for one table – or another. In the beginning – it took me several printouts to get the right grid. Now? I can see a layout and do the grids in my head.

I am SO FAR from doing that with CSS it's scary. Really it is. This is my job. I'm supposed to know this stuff. So in an effort to save my job learn more about CSS – I'll be posting links that either have some interesting CSS discussion (like why this is important) and explain some more advanced layout techniques, and hacks. (disclaimer: I may add to this post over the next couple of days – but feel free to post some links, words of advice… encouragement 😉 in the comments)

The Price of CSS
Web ReDesign (perhaps something I should get?)
Tables vs. CSS
Quirksmode CSS Hacks
Centricle – will the browser display the rule?
Stopdesign – a design process revealed
*This article looked at first like it would be perfect – but jumped from photoshop/illustrator comp directly to CSS – and it's the step in between that I'm having the most trouble with.

22 Responses to "The end of the world is nigh! CSS is here!"

1 | Andrew Dupont

March 30th, 2004 at 1:45 pm

Avatar

How can you best pick up CSS? It really depends on how you learn. Like you, I knew a bit about font-styling and other basic things using CSS previously, but it was over the winter break that I first tried MovableType and got my first real glimpse under the hood of a standards-compliant, XHTML/CSS web site.

The way I learned CSS was simply to play around with my blog template. Once MT showed me there was a way to get rid of tables altogether, I was hooked.

I've never been big on computer books, but the experience made me buy Eric Meyer's "Cascading Style Sheets: The Definitive Guide." If you do well with computer books, that'd be the one to get, in my opinion.

But if you learn like I do, then find a CSS reference and play around with a standards-compliant page. Like your own, for example.

2 | Jennifer

March 30th, 2004 at 2:05 pm

Avatar

I have that book, and a few others like it. My problem isn't where do I begin LEARNING CSS (I do understand the basics)… it's where (and how) do I begin to APPLY it. If I have a *complicated* layout (ie. one that isn't clearly – header – column 1,2,3 – footer as all the "tutorials" seem to focus on) How do I approach a design from the top down? What should get nested? What shouldn't? and why? Does my printout with the grid drawn on it technique still apply? (only this time, I'm making layer-groupings – instead of table-groupings?)

I'm thinking in my spare time (ha ha), I'll be attempting a CSS Zen garden layout for practice.

3 | Andrew Dupont

March 30th, 2004 at 3:08 pm

Avatar

The PNH toolbar helps me out a lot as well — you should install it, assuming you use Mozilla/FireFox/Netscape. It's got a bunch of cool stuff that designers can use. My favorite is "outline block elements," which'll draw a thin border around every DIV, P, UL, H(1-6), etc. It's a great way to see how table-less designs are structured.

There's another FireFox extension I use (which I can't link to directly, it seems, because something's wrong with mozdev.org) which displays all the CSS for a document in a sidebar and lets you edit it, with changes occurring in real time. It's great for playing around with your favorite sites.

The Zen Garden will also most definitely help.

4 | Z*lda

March 30th, 2004 at 3:15 pm

Avatar

Defintely do read Eric Meyer's fabulous books on CSS (I believe he's readying a 2nd edition of one of them). Quite helpful.

5 | patricia

March 30th, 2004 at 4:11 pm

Avatar

position is everything doesn't cover the exactly what you want but it's a good place to hit overall. explains some of the most frustrating IE bugs that I've encountered.

here's a hodgepodge of CSS tutorials

6 | Ed

March 30th, 2004 at 4:48 pm

Avatar

Umm, the section of this article (Retooling Slashdot with Web Standards called "The Semantic Conversion" seems to handle the grouping/nesting issues fairly well (if I understand your question) correctly.

Ed

7 | Jon

March 30th, 2004 at 5:24 pm

Avatar

I have a couple of suggestions that might be helpful:

Good CSS Book – http://www.sitepoint.com/books/css1/
No affiliation, etc.

Good article I came across – http://www.macromedia.com/devnet/mx/dreamweaver/articles/css_gradually.html

8 | sopheava

March 30th, 2004 at 7:11 pm

Avatar

http://www.csszengarden.com is my absolute favorite resource!

The whole point of the website is to look at everyone's code. There's also tons and tons of resource links.

Have fun!

9 | Mike

March 30th, 2004 at 11:36 pm

Avatar

Moving from having to support Netscape 4.x to newer browsers that support CSS2 can be tricky.

If you are having trouble, do what most of us do: look at someone else's HTML code and CSS code, compare the two, and see why it does what it does.

Books help with the code, but looking at someone else's that does what you want to do is the best way to learn it.

10 | Jon

March 31st, 2004 at 3:08 am

Avatar

I literally just taught myself the basics of XHTML and CSS over the weekend and re-did my site in XTHML 1.0 Strict on Monday. Obviously I'm not an expert and there are probably much better resources out there, but I found this website extremely help for bringing me up to speed: http://www.htmldog.com/

I do have a few suggestions that might help: Make a container that everything goes into. Figure out what basic layout blocks you need and make a for each of those. (My site is the standard Header, Navigation, Content, Footer.)

Don't worry about fonts or padding or anything too complex with your basic blocks. These are just to set up the areas that everything else will be put in. Put a 1 pixel border around each of these blocks. Using different colors will help distinguish the different blocks while you play with the overall layout.

Inside of these blocks add various sections for whatever you feel you might need to have control over. This is where you should worry about margins, padding, fonts, line heights, etc. Again, using 1 pixel borders around things can really help when designing.

Watch out for the IE6 bugs. I spent SO much time working on my site and I thought it was pretty damn good looking for a 3-day project. I looked at it in all my Mac browsers. All cool. Just as an after thought I would check it in IE6 for Windows and it was screwed up. It turns out that I couldn't have my floating navigation touching my content . Once I separated them by 8 pixels, it started working properly.

I hope you find something here at least a little useful. Good luck.

11 | Andy Mac

March 31st, 2004 at 3:23 am

Avatar

Another couple of bookmarks for you collection. The "CSS Discuss" wiki page ( http://css-discuss.incutio.com/ )
has a lot of useful information and links to various tricks and articles and Russ Weakley's Max Design ( http://www.maxdesign.com.au/presentation/index.cfm )
have some of the best articles I've read on the subject of design and layout.

12 | Jennifer

March 31st, 2004 at 7:51 am

Avatar

These are great tips/links etc. Thank you!! 😀

13 | loyd

March 31st, 2004 at 9:15 am

Avatar

CSS Zengarden is a great place to start, but I'm guessing from your comments you've done a lot of design with the PS/Imageready "export" command and exported to tables then went back and coded all text to HTML.

PS 7+/Imageready offers the same export functionality but you can select the "export to css" (or some such). You can still slice like you did before then export to css. I would suggest doing a screenshot of your slices so you can see which css field will correspond.

Something you might want to take note of, Photoshop exports CSS layers with "absolute" positioning. If you want something that'll grow you'll need to do longer slices and change the size values to 100% or whatnot. If you have text over a graphic you can remove the text in the Photoshop layout and export the graphic as normal then set it as a background graphic.

If you can get your company to kick down for it, Dreamweaver 2004 offers a lot better control of CSS than previous versions. Topstyle from Bradsoft.com still rocks too though. Good luck.

14 | LaVonne

March 31st, 2004 at 10:37 am

Avatar

There's an article at A List Apart that might just have your answer:

http://www.alistapart.com/articles/flexiblelayouts/

15 | thompson marzagao

March 31st, 2004 at 10:39 am

Avatar

Hi Jennifer,

This article by Russ Weakley of MaxDesign in Australia might be what you are looking for:

Colored boxes – one method of building full CSS layouts

16 | Rev. Bob

March 31st, 2004 at 10:56 am

Avatar

There's two steps to the process (imho): understanding XHTML and CSS, and then getting around to actually doing it.

For the former, I have a huge set of links stored in various places. Here's a few places:

That will give you a huge pile of interesting articles and gadgets. If you're anything like me, you'll still be completely at a loss about how to get started. That's where the next part comes in.

Russ Weakley's "Colored Boxes": <http://www.maxdesign.com.au/presentation/process/> reveals a wonderful XHTML/CSS development process that you can actually use.

I say a few words about it in my blog: <http://blog.crispen.org/archives/000288.html>

17 | Gina

March 31st, 2004 at 12:52 pm

Avatar

These are great resources and tips, thank a bunch! I too am trying to break the HTML table addiction. I've been a web designer for years and I knew all the table tricks. Now I want to know CSS that well. I'm subscribing to this thread. Thanks again!

18 | lucidwolf

March 31st, 2004 at 9:11 pm

Avatar

I feel like I just got comfortable with tables and now there are these div things I gotta learn too. Rounded corners with tables I can do, CSS rounded corners seems like a migraine in waiting. Well ok it's not that bad; it is exciting learning all the cool sounding things like DHTML and XHTML. It is nice being able to makeup your own tags.
Any way this is a really cool site I recently found dedicated to CSS design. http://www.alistapart.com
Enjoy!

19 | Ginny

April 7th, 2004 at 2:49 pm

Avatar

Howdy! I feel the same way about migrating to CSS and I've found Jeffrey Zeldman's book Designing With Web Standards to be right on. He's the founding member or one of them for A List Apart. Good luck!

20 | Gary

April 11th, 2004 at 9:39 am

Avatar

"it's where (and how) do I begin to APPLY it"

Jennifer, I don't know how you learn (generally speaking) but I can share what's been working for me as I wade into CSS. Considering that your description of your frustration seems very similar to mine, it may help. It may not.

I'd suggest starting in the same place you used to — print out the design. My initial frustrations all came from not getting my head around containers and inheritance and how they work(ed) together.

Now, I consider what holds the entire page together. Then I look at specific areas on the page and see them in terms similar to the old tables. Just as a table cell used to be contained in a table itself, so now does a particular div or span find itself within a superior div or its equivalent.

Draw your gridlines and sketch in the separations and then find the uppermost defining detail or range of space. Then sort out what goes inside that and work your way down to the smallest details. Before you know it, you'll be seeing divs for sidebars and footers and menus and images and swaps … and well, it'll begin to make more sense.

It's helping me. Slowly, but it's helping.

21 | Faraway, So Close

March 30th, 2004 at 2:10 pm

Avatar

Designing With Standards
Mezzoblue's CSS Crib Sheet offers a bunch of quick tips to follow when designing using CSS (Cascading Style Sheets). Don't know what CSS is? This will get you started. It's a great way to design a site so that you…

22 | meghan's dolphin

March 30th, 2004 at 4:56 pm

Avatar

CSS Reference
New Perspectives on Creating Web Pages with HTML and DHTML, 2nd Edition by Patrick Carey, Mary Kemper I use this as the text for a DHTML class I teach. Chapter 7 (as well as the rest of the book) is…

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements