A web programmer’s notebook.
The Clearbits icon set can be styled and colored using CSS. Very cool… and what looks like a very extensive range of icons. I only wish the rounded corners didn’t look so pixelated in Firefox on WinXP.
Here’s a really neat DHTML expand and collapse tree view for list items. Simply include a javascript and CSS file into your page, then apply the appropriate ID’s to your list. Check out my quick and dirty demo.
Thanks, Su!
I didn’t know about 4 of these. The vertical alignment with CSS and image replacement seem particularly useful.
Most web browsers add default padding and/or margins to certain HTML elements; for example, and unstyled <body> or <p> will have space around it, depending on the browser. To start with no padding or margins, begin your CSS stylesheet with the following:
* { margin:0; padding:0; }
From there explicitly add padding and margins to elements in your stylesheet by declaring CSS classes as usual. See an unstyled page with default padding. Compare it to a page with unpadded elements including the CSS bit above.
Update: Kevin Hale’s quick start CSS templates include the * element above with font-family and font-size, too.
Designer Kevin Hale publishes the set of templates he uses to start coding up XHTML and CSS documents. Being a non-WYSIWYG editor user myself (go plain text!) these will help. (Not to mention there are CSS properties listed there I don’t recognize, so using these will be a good learning experience, too.)
Tim Taylor’s drag and drop sortable lists with Javascript and CSS could be a useful dynamic control on a web page. I use it in the not-yet released Scribblish for authors to reorder custom fields on the article edit page. It would also work well to reorder photos in a gallery app. Here’s a few examples of the drag and drop lists in action.