Source Code

√vnav«labs«CSS«code

If you started the CSS Labs with layout, then you're probably already familiar with my code-box class. Let's have another look and explain it a bit more.

Hey, why not include the source code to the stylesheet so we can all see what's going on here? After all, a little recursion never hurt anyone. Okay, maybe a few stack overflows...

/* css/code.css */ #content pre, #content div.code-box-n, #content div.code-box { font-family: 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Monaco, Courier, monospace; white-space: pre; width: 39.5em; line-height: 1.4em; margin: 1em 0; border: 1px dashed #aaa8a8; padding: 0.5em 0 0.3em 0.5em; font-size: 110%; color: #000; overflow: auto; } #content div.code-box { background: #fff url(/img/cut.gif) no-repeat top right; } #content div.code-box-n { width: 33em; padding-left: 0.3em; border: 1px solid; border-color: #666 #999; background-color: #fff; } #content div.code-box-n:hover { border-color: #c30; } #content div.code-box-n a { font-weight: normal; } #content div.code-box-n a:focus, #content div.code-box-n a:hover { border-bottom: 1px solid #c00; } /* home page -- server uptime */ #content div.uptime { white-space: pre; width: 36em; line-height: 1em; margin: 1em 0; border: 1px dotted #aaa8a8; padding: 4px 0 4px 7px; background-color: #fff; overflow: auto; } #content div.uptime code { font-size: 100%; color: #000; } /* css/code.css */

The box above is nothing more than a <div> with size and border rules. Okay, and a pure white background to offset it from the rest of the content around it. The white-space rule keeps things nice and neat as you should expect from source code ala a text editor. As you can see, I continue to declare CSS distances in terms of ems so all my pages will remain elastic.

The little scissors icon in the top-right corner is just eye candy, and a visual reminder that you are free to cut and paste the source code on this site for your own use.