CSS

Content Types and CSS Resources

Heather Solomon — Wed, 12 Mar 2008 15:58:55 GMT

In my sessions last week I stressed the importance of learning about content types, and really stressed the importance of learning CSS. I have had several people ask me for some suggestions for resources for both of these topics. If you have a resource or a book you just love that I don't mention here, please post a comment about it for everyone's benefit. Thanks!!

Content Types

Introduction to Content Types on MSDN
Plan content types (Office SharePoint Server) on TechNet
What Are Content Types, Anyway? blog post by Andrew May
Content Type Technical Posters for Download by Andrew May
Creating and Using Content Types in Windows SharePoint Services 3.0 screencast on Channel 9 by Ted Pattison
What are Content Types? blog post by Martin Kearn

CSS

CSS: The Definitive Guide
CSS Mastery: Advanced Web Standards Solutions
Beginning CSS Web Development: From Novice to Professional
CSS: The Missing Manual
Transcending CSS: The Fine Art of Web Design

Recommendations from readers:
Pro CSS and HTML Design Patterns

CSS Galleries - cool site

Heather Solomon — Wed, 12 Jul 2006 12:03:00 GMT

We all like to ooohh and ahhhh over other sites (and then dissect code to steal stuff, oh you know you do it) so here is another bag of goodies, complete with an RSS feed.

CSS Galleries indexes the best design on the web, slaps on awards (silver and gold medals for how many categories they qualify for) and packages it up on a clean site where you can get a full, or restricted feed. Very nice.

http://css-galleries.com/

A Guide to CSS Support in Email

Heather Solomon — Fri, 31 Mar 2006 17:39:00 GMT

Nice CSS resource on what is an isn't supported CSS wise in popular email environments including GMail/Hotmail/YahooMail, Outlook, AOL, Notes and Eudora.

A Guide to CSS Support in Email

CSS Line-height property - no unit required

Heather Solomon — Mon, 27 Mar 2006 16:20:00 GMT

Ok I admit this was news to me. Blame the Visibone chart I clutch in my little fist when using this attribute every now and again. But the line-height property does not require and in most cases should not use a unit with the value.

Eric Meyer explains it in his post, Unitless Line-heights.

General gist, stop doing this: line-height: 1em or line-height: 20px and start doing line-height: 1.

Holy Grail of CSS 3-column layout

Heather Solomon — Wed, 08 Feb 2006 14:58:00 GMT

While researching ways to make HTML/CSS code ripe for SEO (search engine optimization, I just love this acronym), I came across a new article on A List Apart:

Three columns. One fixed-width sidebar for your navigation, another for, say, your Google Ads or your Flickr photos—and, as in a fancy truffle, a liquid center for the real substance. Its wide applicability in this golden age of blogging, along with its considerable difficulty, is what has earned the layout the title of Holy Grail.

Many articles have been written about the grail, and several good templates exist. However, all the existing solutions involve sacrifices: proper source order, full-width footers, and lean markup are often compromised in the pursuit of this elusive layout.

A recent project has brought my personal grail quest to an end. The technique I’ll describe will allow you to deploy the Holy Grail layout without compromising your code or your flexibility. It will:

have a fluid center with fixed width sidebars,
allow the center column to appear first in the source,
allow any column to be the tallest,
require only a single extra div of markup, and
require very simple CSS, with minimal ~~hacks~~ patches.

Keep Reading...

Go DIVless... a look at an alternative to DIV tags

Heather Solomon — Tue, 07 Feb 2006 13:16:00 GMT

Just read a very interesting article on an alternative to the DIV tag for laying out and structuring your content on a web page. The idea is to ditch DIVs for unordered and definition lists.

After my initial knee jerk reaction (the word list conjures nightmares, thanks SharePoint) and my skepticism subsided (ah geez, is this the brink of another fad like tableless design?) it is actually a very good alternative to setting up the content in your pages. And options are always good.

Go DIVless (via Darren Chan at thecssweblog)

24 ways, only 4 articles left to post

Heather Solomon — Tue, 20 Dec 2005 14:19:00 GMT

Some recent articles on 24 ways....

Naughty or Nice? CSS Background Images

Unobtrusive Degradable Ajax Style Sheet Switcher

Splintered Striper (programmatically adds two alternating CSS background colours to table rows)

Broader Border Corners

Auto-Selecting Navigation (My fav!) Use CSS to auto select the current nav.

CSS Tabbed Navigation

Heather Solomon — Mon, 19 Dec 2005 13:29:00 GMT

Shane came across these (nice find):

I just noticed this while browsing around and figured I'd pass it on. There have been several posts on (CSS) tabbed navigation menus using the "Sliding Doors" technique originally showcased on Zeldman.com.

Here are 11 free ones you can use - just pop them into a content editor web part and you are all set.

View examples of the CSS menus

Download the Free CSS menus

I have one on my site that my buddy did.

My only two cents to anyone who wants to do this, be sure your images are teeny tiny in size, or you will end up with a flicker every time the user mouses over the tab as the site loads the hover image. CSS only tab navigation is another way to go and omit the images entirely.

CSS Layout Starting Points

Heather Solomon — Wed, 07 Dec 2005 13:48:00 GMT

24 Ways Day 4 features CSS Layout Starting Points by Rachel Andrew which basically talks about creating a bunch of layout starting points and keeping them handy instead of starting off with a blank CSS canvas for every project.

I know I rely heavily on previously written style sheets for new projects, creating your own stock of CSS styles is a good idea...

CSS Layout Starting Points

Countdown to Xmas Webbie Style - 24 tips

Heather Solomon — Fri, 02 Dec 2005 17:36:00 GMT

Interesting site... a new tip will be posted each day this month. The first was easy Ajax and the second an insight on the em unit of measure.

24 Ways to impress your friends