Search for the Holy Grail of CSS

May 30, 2008 @ 4:54 pm · Filed under Technology

This week, CSS layouts kept me awake into the wee hours almost every single day. I think a bit of background is in order before I go any further here.

My company is busy developing the next generation shopping cart application. We are looking to break our usual mould and use some new technologies - well, some are old and established and some are new - such as CSS (so that we can optimise the shopping card for Search Engines), XHTML, Java EE, JBoss Seam, JSF, EJB3 and JPA.

In the past, I have used frames and tables to a very large extent for layouts. However, this has quite a few problems:

  • Search Engines cannot work with Frames particularly well
  • Screen readers cannot read Frames and Tables based websites properly
  • Coding Login and Logout using Frames requires JavaScript hacks
  • and many more…

So I decided to look for a way to use CSS for layouts. Initially I managed to get hold of a layout that got us off the ground. However, we quickly realised that if we were serious about our product, we needed a better layout…something that made better utilisation of the Screen real estate.

Most CSS layouts out there are lame, to say the least. They simply use a width of 800 pixels. Come on designers, most people have a monitor with 1024 pixels width these days…and even more so on wide screen laptops such as mine. So why waste this space?

So I set out to search for a layout that had a header, a top menu, 2 to 3 columns with one column having fluid width and a footer that stuck to the bottom of the screen/content. Easier said than done. It so happens that what I was looking for was the “Holy Grail of CSS”. And the search proved to be just as difficult and frustrating as the search for the real “Holy Grail”.

I searched on Google. I asked the question on LinkedIn Answers. And I tried many a times in vain to create a layout of my own.

Well, I must say, I had quite a few sleepless nights…and a lot of frustration. However, I kept at it. And finally, I have managed to come up with a set of my own layouts.

I have uploaded all my layouts in a single zip file here.

These layouts are as follow:

Quite a few of them…I didn’t realise until I actually started to write about them.

The following resources were useful in creating the above layouts:

These layouts are free to use. And if they help you sleep any better, feel free to link back to me or drop me an email :-).

For those of you looking to get any modifications done, I am happy to do so at a reasonable charge. Feel free to contact me.

I hope you have found the true Holy Grail of CSS here.

[Bloglines] [del.icio.us] [Digg] [Facebook] [Google] [MySpace] [Reddit] [Slashdot] [StumbleUpon] [Technorati] [Email] More »

Comments

RichFaces 3.2.1 GA released

May 9, 2008 @ 2:16 pm · Filed under Technology

RichFaces 3.2.1 GA has been released. Following is a small list of new features and bug-fixes:

New Features Introduced
 

  • Plug’n'Skin feature introduced
  • Demo laguna skin created using plug’n’skin
  • Suggestion Box improved (JS API for calling suggestion and accessing selected Objects added)
  • Sorting futher improvements (Sorting objects not strings)
  • Filtering further improvements (default input corrected and styled)
  • DataScroller? improved (multiple instances behaviour and page binding corrected)
  • componentControl and contextMenu attachement improved

 
Bug Fixes
 

  • dataTable and sorting, filtering features (corrections on decode)
  • scrollableDataTable fixes (Scrolling and loading data problems, cross-browser support fixes)
  • ComboBox? fixes (according to customers feedback)
  • File Upload improvements and fixes (according to community feedback and internal tests)
  • Character encoding problems(according to customers feedback)
  • Memory leaks and perfomance fixes (according to customers feedback)
  • MyFaces specific fixes
  • Opera browser support fixes
[Bloglines] [del.icio.us] [Digg] [Facebook] [Google] [MySpace] [Reddit] [Slashdot] [StumbleUpon] [Technorati] [Email] More »

Comments (1)