Blog for September 2007

Where's the equilibrium in css height?

Recently, just as anyone who has experienced the ins and outs of css, I have been encountering my share of creative css problems. One thing I discovered while trying to solve my frustrations is that frameworks can be a cross compliant and a time saving solution. The downside is technique is that if the user has javascript disabled it won’t be effective. This technique is useful if you want to push the envelop of css design. View final solution.

src="/files/Image/nathan/colblog_figurea2.jpg"

The problem I encountered:

What I needed to do with this particular layout is to set an image bottom left/right right inside of any given column in the background just above the footer using for example: background: #ccc url(“image/directory.png”) bottom left no-repeat;

However, as seen in Figure A, the images simply don’t line up and aren’t just above the footer. The problem is that the second column has greater height than the rest.

Since the website I was working with is currently using a framework called mooTools figured I might as well explore it’s functions to see what I could come up with. What I discovered is that you can use it’s functions to change css properties dynamically on the fly and calculate the height of each column.

The common problem and solution:

The common problem is usual the same as mine except minus the images and add in a three column varying gradient background. One solution is to wrap all three columns in a wrapper and set the background to repeat-y.

Another solution would be to use the min-height property to equal all three columns. with a minimum height. This works on smaller static pages but when you need your content to be variable to a larger extent, such as on this blog page, a min-height becomes unrealistic. And when one column’s content goes over even one pixel over the min-height your layout breaks.

Multi-Column Layouts Climb Out of the Box - An Alist Apart article that discusses a purely css solution. There are many purely css solutions out there for the common problem.

The Framework Solution:

Using mooTools, for example, all I needed to do was to find a way to calculate the height of the tallest column. I did some investigating in the mooTools documentation and I found a property that would do the job called getSize. You guessed it. It calculates either the height or if need the width of the specified element. In my case I needed it to calculate height, so I used: var pos = $(’col2’).getSize();

Then what I need to do is to set the variable pos as the height of col2 (column two). The second thing I needed to do was to change the style property of column one and three. What I used was the setStyle property. You guessed this one as well. It simply changes the specified property to what you set it to. Therefore, I used $$(’div#col1’).setStyle(’height’, hsize+’px’); to set col1 to the height of the second column and $$(’div#col3’).setStyle(’height’, hsize+’px’); for the third column. When using mooTools you need to account for padding by using the following:  var hsize = hsize-20; So if have 10px padding on top and 10px padding on the bottom, it adds to 20. If your columns have varying padding then you would have to customize it for each div.

Thats all there is too it. Surprising simple and it works throughout the website without “a flicker” or performance hikes that I’m aware of. The Javascript Code is as follow accompanied with the framework .js files:

window.addEvent(’domready’, function(){

    var pos = $(’col2’).getSize();
    var hsize = pos.size[’y’];
    var hsize = hsize-20;

    $$(’div#col1’).setStyle(’height’, hsize+’px’);
    $$(’div#col3’).setStyle(’height’, hsize+’px’); 

});

/

View the final solution in action.

The conclusion I reached:

It doesn’t make a whole lot of sense using Javascript framework in many situations if a css alternative can do the same job in less time. However, when you find yourself dealing with advanced css layouts using a compliant framework can save you time, frustration and can be what you are looking for.  I recommend when using this technique that you assign a min-height  for col1 and col3 to act as a safeguard and to keep a somewhat stream line look.

You can also take this technique to the next level by using a series of if statements and finding ways to utilize the functions available to manipulate your css output. For example, you can use if statements to calculate which column is the highest and set it to that value to all columns. You can also use a function such as getSize to manipulate the width of a column.

One downside of this technique is that if you don’t know a Javascript framework, it’s time to learn one. If you have a background in programming (especially Javascript) you’ll find that frameworks are fairly easy to pick up and can save you time down the road.

Only bug I’ve found so far using this technique is that if in firefox you increase the browsers font size the layout will break by a couple pixels. But that really isn’t an issue because most users don’t go around adjusting the font every time the encounter a new page. I tried doing the same with regular Javascript but the biggest problem I came across is that you have to find ways for your Javascript to be cross compliant which is time consuming. I recommend using a compliant frameworks such as mooTools.

You are not just limited to mooTools, there are other frameworks (such as Scriptaculous) which do just the same with similar functions. Like I said before, the only problem with this technique is if the user has Javascript disabled then this won’t work for you. I feel that it’s your call on this one. I usually avoid using such techniques where possible but in my case, when I was using a framework anyway, it didn’t make any difference.

Next time you find yourself thinking css layout is impossible to do, think of ways that a framework could help make it possible.

Other frameworks:

Photoshop Tennis is Back

Coudal and Adobe have resurrected the much missed Photoshop Tennis as Layer Tennis! Set up as structured ".matches"., each event consists of two participants having about 15 minutes to make adjustments and embellishments to a file. The file is passed back and forth between the participants, with the results being posted in between. A third individual provides running commentary on each posting.

The first three scheduled matches are...

For RSS feeds and more information, visit the Layer Tennis page at Coudal.

Advertising At Work

For all of our friends in the marketing, advertising and design game, you should enjoy this.

Daily Links

Daily Links

Apple Launches iPod Touch

src="/files/Image/wil/sanfran-sep2007/apple-ipod-event-3.jpg"

Wednesday morning, Apple CEO Steve Jobs took the stage at the Moscone Center in San Francisco in a highly-anticipated keynote address. For the last two weeks, leaks of a "fatty" iPod hinted at a long expected updated or refresh of the iPod line.

First up was the new ability to select any iTunes Store-bought songs to use as ringtones. With an upcoming iTunes update, users will be able to choose any 30 second portion of select songs and use them as a ringtone. The downside? You have to purchase that 30 second ringtone...

src="/files/Image/wil/sanfran-sep2007/dsc_7594.jpg"

That’s right, you have to pay another dollar for a song you already have to have the privilege of using it as a ringtone. That sucks.

But when the keynote moved on, people got excited. "Now, let’s talk about the iPod," Jobs said.

src="/files/Image/wil/sanfran-sep2007/dsc_7605.jpg"

The iPod Shuffle gets a "refresh", with a couple new colors. Included is a Product Red Shuffle, as part of the project that donates money to charities in Africa. They’re shipping today, at the same price as before.

Next came the new iPod Nano, and yes, it was the leaked "fatty" :)

src="/files/Image/wil/sanfran-sep2007/dsc_7621.jpg"

It’s a tiny, square device that has a gorgeous 320x240 resolution, 2-inch screen, and has all the functionality it’s bigger brothers, the full sized iPod sported: photos, video, games. As an extra bonus, it sports some small interface tweaks, has Cover Flow, and has a price of US$149 for the 8GB model (down from US$199).

src="/files/Image/wil/sanfran-sep2007/dsc_7628.jpg"

The original iPod has been rebranded as the iPod Classic. It inherits the new metal finish the iPod Nanos already enjoy, and jump up in size to 80GB and 160GB.

Both the new iPod Nano and the iPod Classic also had their battery life touted, with the Nano getting an estimated 4 hours of audio playback and 5 hours of video playback, and the Classic getting 30 hours audio and 5 hours of video playback. Perfect for those long plane trips where you’re not interested in suffering through some cut-up in-flight version of Father Of The Bride 2 or some nonsense.

The last product was the one we were all waiting for... the new touchscreen iPod, formally called the iPod Touch.

src="/files/Image/wil/sanfran-sep2007/dsc_7637.jpg"

src="/files/Image/wil/sanfran-sep2007/dsc_7640.jpg"

If you know what the iPhone looks like and what the iPhone can do, then you already know what the iPod Touch is. Just remove the cellular phone elements. It has the same multi-touch screen interface and the same sort of home screen. The video functionality, music features, and media playback work exactly the same way, including turning it on it’s side to activate "landscape mode" and Cover Flow.

It’s new feature, however, is WiFi. That’s right, the new iPod Touch can get on the internet like it’s big brother.

src="/files/Image/wil/sanfran-sep2007/dsc_7647.jpg"

The Touch even comes with the Safari web browser and the Youtube application. Find a WiFi hotspot, and you’re in business. Taking advantage of this capablilty, the Touch now has WiFi enabled iTunes. Using WiFi and the Touch, you can access iTunes, preview songs, purchase songs, and download them. Fantastic!

src="/files/Image/wil/sanfran-sep2007/dsc_7660.jpg"

You lucky Americans who already have the iPhone, do not panic. With an upcoming patch, the iPhone will be getting the new iTunes Music Store application as well.

The WiFi feature is also being leveraged in a deal with Starbucks. It’s actually very underwhelming and forgettable: if you’re in a Starbucks that has WiFi, and you like the music they are playing, you can access a specific application to purchase that song. Whoopie. At least the WiFi will be free at the coffee shops for iPod Touch and iPhone users.

src="/files/Image/wil/sanfran-sep2007/dsc_7656.jpg"

The new iPod Touch comes in an unfortunately small set of sizes; 8GB at US$299 and 16GB at US$399. Both models will be available in a couple weeks, so Jobs says.

All in all, an exciting keynote, finally bringing out some new toys people have been holding off buying iPods for. We still don’t have the Beatles available on the iTunes Store, but there are always more keynotes.

By the way... anyone want to buy a used 30GB 5th generation iPod? :)