Douglas Crockford articles – Javascript guru

JavaScript core skills — list of very good articles on Javascript by Opera developers

JavaScript Programming Patterns – an excellent articles about OO programming in Javascript

Professional Javascript Development — excellent Javascript book

Share/Bookmark

CSS LayoutsI am used to creating page layouts with HTML tables. It’s easy to do and you can get any layout you want. But doing it that way is no longer recommended, and it’s an ugly way of doing layouts. The “new” way of doing layouts is with pure CSS. It’s cleaner and more concise. However, it’s more complicated for a novice html guy like me. To really get this, you need to have some experience.

So how do you do it? Let’s look an an actual example first.

<div id="main_wrapper"><div id="header"><div id="header_inner">Header</div></div><div id="nav"><div id="nav_inner">Left nav</div></div><div id="content"><div id="content_inner">Main content...</div></div></div>

and here’s the style for it:

<style>#main_wrapper {width: 840px;}#header {

}#nav {width: 20%;float: left;}#content {width: 80%;float: left;}#footer {clear: both;}</style>

Nice and simple. With this technique you can put together any layout you want.

Why the inner divs? Because CSS is weird. Even though you have a div with a certain size, by adding padding, margins, and border, the width actually changes! So, sure,you can go with just a top-level div, but you have to keep in mind that the size will change when you add those settings. How do you get around that? By using an inner div. The outer div controls the sizing and floating. Inside the inner div, you can then add padding, margins and border and the size of the outer div will not change: this is really how it should work. By using an inner div, you actually simplify your life!

ReferenceStylin’ with CSS: A Designer’s Guide, Charles Wyke-Smith

Share/Bookmark

Share/Bookmark

Nice array of searchable templateshttp://tools.i-use.it/

Find more design stuff — ideas — at digg.com/design. (I’m really enjoying digg.com so far.)

Related500+ Colorshttp://cloford.com/resources/colours/500col.htm

Share/Bookmark