CSS teasing

Recently I realized that I need to jump back on web development wagon. I played bit with JBoss Seam and it seems like it is great Java framework to do things. However the learning curve is too high for me (it builds on JSF when it comes to html pages). Then I found Django, django is really one of the most exciting frameworks for building webapps I've met so far. Built on top of Python, great support and rapid development cycle suits me a lot. Check Django philosophy for more.

So I have written two simple apps for testing:

• a syslogviewer used in our company
• web presentation for one of our customers

Both works quite well and I did most of the work in a reasonable time. What is taking now most of the time is the desing of the pages them selfs (and make them look same in Safari, Firefox and damn you Internet Explorer with your weird understanding of CSS box model!!!). I've never pretended to be a great artist (or medium, or ..), although if the time spent on tweaking my desktop theme would count than I would be a star for sure. Anyway, these days CSS is what drives the look of the websites. In short: in HTML one describes the content and associated CSS describes the way the contents looks.

When dealing with CSS I ran into following issues:

• box model a.k.a. the basics
  
• floating of boxes a.k.a. how to position the boxes
  
• selectors a.k.a. how to apply styling to correct elements
  

There are many tutorials on the net for CSS, this one I found particularly interesting :

• http://css.maxdesign.com.au/
  

I've also learned some tricks:

1. To make submit buttons a bit nicer, give it a class and style the class:
   submit-button{
   border:1px solid #CECECE;
   }
   
   
2. To avoid positioning problems put any dimensions in outter element. For example to center one element inside another:
   #outter{ width: 80px; height: 50px; }
   #inner { margin-left: auto; margin-right: auto; padding-bottom: 20px;}
   
   
3. When two columns with different height need to look the same size, use the container with background set to image with "1px height repeat-y" atribute. With this technique one can create table looking layout. Nicely described at http://www.alistapart.com/articles/fauxcolumns/
   
   #container {
   background:transparent url('/images/background.gif') repeat-y;
   }

Although learning CSS right takes a long time (and even more to practice) it pays off. Result is highly skin able pages with one place to modify the look and reduced amount of data required to load each page. It also separates the code from presentation which both developer and page designer will appreciate.