Many times you want to have a menu with A elements as the links instead of e.g. LI elements. Here is an example with large buttons. See example here.

This CSS script give you absolute pixel-exact control of where to place text in a left and right area of a wide div, e.g. a header or footer. I was not able to get it to align automatically, e.g. left/center/right, so you have to know your font size and your text and position things exactly, but at least you have control, checked in Firefox and Explorer.

Here is a layout for a non-flashy interface for e.g. a website tool. Solves the issue of floating divs with a clear:all div, here's an example.

This CSS example shows a simple UL/LI menu absolutely positioned top/left and a line-height of 1em and the body pushes the container div down 1em so that you can expand the font (ctrl-+) and the menu stays relatively sized to the content of the site. Ok, I'm starting to see how if you set even the amount of space between screen objects to the same unit (em) as the font then you have a flexible layout that someone with poor eyesite can just zoom in (I wonder if you could have your graphics expand as well). This is also cool because in the body tag you have font-size: 94% and if you change this then everything stays in proportion as well. Here is a live example.

The color picker in the free TopStyle Lite gives you six harmonious and complementary colors for each color you pick, nice.

TopStyle Lite is a free CSS editor which has not only code complete but also on the right side a style inspector which shows you the wide arrange of options you have. Many times I just try some out that I see and happen upon serendipitous discoveries of what CSS can do, for instance in this screenshot these roman numerals and graphic dots work in both IE7 and firefox.

I have always wondered why background images never worked when specified in the CSS file but DID work when specified inline in the HTML tag. The reason is that you have to define the path of the image relative to the position of the CSS file to the image, and inline definitions use the path relative to the position of the HTML file to the image. Nice to know.

So finally a form without HTML tables, finally got all the floats: left, right, clear both etc. correct. I have this pretty fixed to a certain size just because I don't like my forms being stretched across the page as the browser area grows (would be ok if the font sizes also grew but they don't so it's just a design integrity issue), if you want this ability (better for expanding the size of the font) just change most of the px values (especially for width and margin) to percent values and your form will stretch as needed. VIEW EXAMPLE HERE.

Here is a HTML/CSS site layout with no tables, tested in IE7/Firefox, hover menu without graphics and a modular design so you can add components in the two columns as you wish. VIEW EXAMPLE HERE.

This layout has two columns with a dividing line in the middle (bug: which only goes down to the bottom if MORE content is on the left side than on the right side) and it is filled with rounded boxes with various colored headers, all done without graphics, which is very nice. This would be good code to get into presentation objects so these things are very easy to make and drag- and droppable.

This site can teach you many impressive and useful CSS skills, e.g. various kinds of corners (not just rounded), flash-like graphics with pop-up information, lots of layouts, opacity, dropdown menus, photo slideshow, all very professional looking. Nice also is that he puts his CSS in a style tag so if you are looking at something that you like, just do a CTRL-U to see the source and check it out, or copy it and experiment, etc.

Allows you to look at your source HTML in structured, colored boxes, nice.

You can install these in firefox or explorer in seconds, choose any one and they are all in a window to your left in your browser (HTML/CSS/Javascript/XSLT/Perl). The great thing about these is that each command has an example to the right, very nice. They are only in German, but I think if you don't read German as long as you just wanted the examples, this would still be pretty useful, quicker than googling for examples for, say, the empty-cells or in JavaScript getElementsByName. Very nice resource here. This doesn't seem to work well in Internet Explorer 7 since it is not a side bar per se but like a bookmark, use this in Firefox.

This was my first fully non-table column-layout in CSS that I am satisfied with, note that if you put the width of the body_wrapper to 100% it will also work but a user can scrunch the whole site back to the left, which isn't really desirable, and min_width can't really be relied upon from my experience but that my be a solution, a solid px width works well though, with this layout you just have to be sure that your graphics are less wide than your column widths or they will hang over into the next column, unlike the nice feature of tables where the column expands to the width of the widest graphic. See the example here.

Instead of picking through html tags on long lines in source view, use this plugin to see how sites are structured at a glance.

If you need to avoid HTML tables but need to order information in rows and columsn, etc. start with this code.

This is an exhaustive table showing you which code hacks will tell certain browswers to apply a CSS rules while hiding this rule from others. Perfect if you need to get Opera to do something but want to hide it from Explorer and Firefox.

Change the z-index on these two elements and see how they can overlap each other.

Tested this in Firefox, IE6 and IE7, simple and useful. view the example.

This is the code I use if I need to write a text online, etc. It has all the correct XHTML, CSS and Javascript settings which serve as a basis to build on. Note that I use UTF-8 and if you have UTF-8 characters (e.g. Russian) then you need to SAVE your file in UTF-8 format in your editor as well.

If you don't specify anything then Explorer will not honor newlines in the text within a text area tag (e.g. if you are displaying code in a scrollbox). You have to add white-space: pre; to the textarea style and that fixes it.

This shows you how to use CSS to list out e.g. book reviews with a book next to the paragraphs.

A simple but professional looking menu, no submenus or anything like that.

This is an example of a CSS/graphic implementation of a mouseover tabbed menu which will increase in size when you increase the size of the browser text. It uses small gif graphics to render the rounded corners.

This example shows how you can make nice-looking (formatted divs) in a mouseover popup with NO javascript (only CSS). The best thing would be to wrap this in a class so it is easy to implement since the HTML gets a little messy. Note with this solution that it doesn't matter how far down you have scrolled on the page, it still works (unlike any javascript solutions which get confused with mouse position once the page has scrolled past the original top-left position). There is only one problem with this script: in Exlorer the pop-up tooltip shows UNDER any other tooltips, will have to fix that.

This css code will allow you to easily define tags which make the cursor turn into a question mark and then a text blend in, words in Firefox and Explorer.

If you want to make your background image stationary in HTML, then you add "bgproperties=fixed" to the BODY tag. But if you want to do it in CSS, this is the code.

This is a work file that I used while reviewing some advanced CSS commands. The borders and the absolute positioning are interesting.