There are three relative minor updates. I have fleshed out the text styling by adding list styles. I have adding extra white space between content and comments which causes the comments to move off my laptop screen. I added a comment form.

Now, there is one major update. Scroll all the way down to the bottom. I have started to work out the rethought and improved advanced browse/search (if you think of a better name tell me). The current design has a browse and search which you can toggle open. Shortly after creating it, I saw many issues with it—oh well. This is a second take on it. It is a mashup of a search and browse by category. The x-axis is for search relevancy and the y-axis is how many categories the result is in.

I am really happy for the CSS display inline-block. It does so many little things I need. For instant, I used it for the post links in the search/browse at the bottom of the page. I can have the links be compact so two can be on one line but it also prevents the links from creating a messing line wrapping which breaks the bubble feeling.

Since you are reading now, allow me to illustrate why you must play and not just read:

“How do I make my text red and uppercase with style sheets?”
“Simple, color: red and text-transform: uppercase.”
“Wow, that sure is simple to grasp,” said with a smile.
“Sure is simple to explain,” happily accented with a thumbs-up.

Ahh, such a dandy conversation. Which leads to a conversation about positioning, will this be as dandy as fruit pie?

“How do I position my content to be up 26 pixels underneath my navigation?”
“Try this: First, set your navigation to position: relative and z-index: 2. Next, set your content to position: relative and top: -26px”
“Umm, that is not quite what I want… …Ok now it does what I want, but why?… …My head hurts,” said after forking the last bite of fruit pie.
“Yeah. Understandably,” while looking regrettable at the now vanished fruit pie.

As illustrated (in an over simplified manner), I find myself unable to explain all the nuances of CSS positioning to friends. Understandable, it is hard to absorb float, clear, position ,margin, padding, top, bottom, right, left, z-index, height, width, etc. I happened through the years to teach myself CSS by doing and then (a) achieving the desire results, (b) failing absolutely and then searching for information, or (c) noticing a behavior unbeknown to me and then reading up on it.

To incubate something of a similar learning environment, I created Playfully Positioning. It is an individual-exploration of how six important CSS positioning rules behave and interact with each other: position, z-index, top, right, bottom, and left.

If you want a little guidance, below I give a brief run-down of the basics of the rules.

position: static

Most people do not use position: static explicitly because it is the default when no position rule is provided. The rules top, right, bottom, and left have no effect.

position: relative

If you want to adjust the position of a box based on its original position in the layout flow, position: relative is your piece of pie. The rules top, right, bottom, and left move the box from it’s original place in the layout flow and its original displacement in the flow still exist. For example, top: 40px will move the box 40 pixels down from its original place and overlap anything in the 40 pixels below the original position of the box and still leave a 40px gap above the box.

position: absolute

Want to disregard the layout flow, position: absolute could be your ticket. It will take the box out of the layout flow which means no big hole (displacement) in the flow. Watch out for the double personality of the rules top, right, bottom, and left. The rules say how far the edge (lets say top) of a box is from the same edge (again top edge) of the box’s containing box. Now this leads to the double personality. If the box has an ancestor (a box with which it is inside of) that is positioned relative, absolute, or fixed, the ancestor is the containing box. But if no ancestor is positioned relative, absolute, or fixed, then the containing box is the top-left corner of the page with the same dimensions of the view-port—not the page. Just try it out because it is much simpler than it sounds.

position: fixed

Ooo’s and awww’s come from position: fixed. It will take the box out of the layout flow (just like absolute) and then do a neat trick—not move when you scroll. As with the absolute, the rules top, right, bottom, and left are from the edge of the box to the edge of the box’s containing box. But, the difference is the containing box is the view-port. (I am not positive about containing box always being the view-port in regard to the specs, “[t]he box’s position is calculated according to the ‘absolute’ model[… ]”.) For example, top: 30px places the 30 pixels from the top of the view-port (the area of the page you can actually see in the window).

z-index

Yes, z-index gives you layers but not Photoshop layers. A layer belongs to a stacking-context. A layer is above other layers (in a stacking-context) if it has a higher z-index or the later one if the two have the same z-index. A stacking-context is either the body or any box that is positioned absolute, relative, or fixed. Which means, a layer in a stacking-context can be another stacking-context. To go along with it, seperate stacking-contexts cannot be in between each other’s layers. Huh? For example, lets say you have a stacking context X with layers A and B and you have a stacking context Y with layers M and N. Either all the layers in X have to be below the layers in Y or vice versa. Remember, X and Y are just layers inside another stacking-context. Lets give them all z-index value: (X, 5), (Y, 1), (A, 0), (B, 10), (M, 1), (N, 100). The result order of layers from bottom to top: M, N, A, B. I suggest you play around with this and read through the specs slowly.

Now if you haven’t played with Playfully Positioning, do so.

Additional Resources

• W3C: Visual formatting model
• Safari Bears: CSS Tutorial - Positioning
• MIS Web Design: CSS Positioning Properties
• Integrated Web Design: Position This! CSS Positioning Demystified

How to use:

1. Download JQuery
2. Download AddAClassNameAtRandomToAnElement.js
3. Include jquery.js and AddAClassNameAtRandomToAnElement.js in your html:
   <script src="jquery.js"></script>
<script src="AddAClassNameAtRandomToAnElement.js">
4. Create the set of classes to have randomly selected and the query of the element to add the class to:
   <script>
var setOfRandomClassNames = new Array("aa", "bb", "cc"); // three classes with the names: aa, bb, and cc
//var queryForElementsToAddRandomClassTo = "body"; // adds the class name to the body
var queryForElementsToAddRandomClassTo = "#cow"; // adds the class name to an element with the id of cow
…
5. Add the call to add the class:
   …
$(document).ready(function(){
   $(queryForElementsToAddRandomClassTo).addRandomClass(setOfRandomClassNames);}
});
…</script>

Update

I changed it from an independent function to a method (JQuery Plugin) of the $ as John Resig suggested. Keep up the good work on JQuery John!