Here's the kindergarten version of a 3 Column CSS layout that you're going to get from most other websites:

Simple enough right? The alignment is done in your style sheet, where the left would float left, the center would also float left and the right would float right.

You could set all your styles based on these column ids. Whether it's background images or just background colors, the sky's the limit here. But here's the kicker: your column heights are all dependent on how much text you have in each div. Leaving you with a messy, uneven mess.

Wrap It Up Before Messing With CSS

There's the easy way and there's the hard way, which a lot of people mistake for the right way. If you're looking for the hard way, then you need to look somewhere else. Try Googling "3 column css hack ie ns, oh crap this doesn't look right, wtf". That should lead to to the pain that you searching for.

Share This

If you're new here, you may want to subscribe to my Full RSS feed. Thanks for visiting!

Now there's a lot of code involved and the menu created doesn't really fit normal usability standards, but the end result is cool.

Happy July 4th to all you guys.

Source: Accessible expanding and collapsing menu [456 Berea Street]

Popularity: 7%

Share This

Now I've never really been a Photoshop guy. I just don't have an eye for that stuff, even if it may be very basic. What's my solution? My Cool Button. This service allows you to created, not to bad if I do say so myself, Web 2.0 buttons on the fly.

A lil' PHP and GD2 sure does go a long way these days.

Popularity: 6%

Share This

Saw this and I was amazed:

All done with CSS And JavaScript. The implementation is also brilliantly simple. And it all fits in 1.5KB. What's to lose?

By the way, you can't tell by the image, but the image under that travel menu; it moves with the mouse hover. Check it out: Facny Menu.

Popularity: 4%

Share This

Introduction

Here we go again, the age old story. Do we use plain old HTML Tables or do we invest the time and energy into learning and using CSS properly? Duh, it's not even worth saying anymore. Tables suck, tables have always sucked. The only thing that keeps tables going for so long is their ease of design.

More Evidence

Tables Bad, CSS Good… tells us, again, why we should us CSS whenever possible:

• Search Engines: I have redesigned many websites eliminating tables and placing all links in unordered lists and have seen there search engine rankings improve drastically.
• Compatibility: Remember that in today’s day and age websites are being viewed on everything from 60 inch plasma TV’s to 3 inch cell phone screens. If you assign a table a width of 780 it becomes near impossible for visitor using a handheld device to view your website.
• Accessibility: People with disabilities have the right to enjoy the web! If your website uses tables a visitor using an audio browser is going to have trouble accessing your website. Go ahead and try to use your website with and audio browser…

Share This

Are you one of those guys who just loves the look of Rounded Corners, but doesn't like the footwork required? It's your lucky day, sort of.

Rounder corners are developed using, rounded corner images of course, CSS style to set those images as backgrounds, and the content of the box surrounded by a number of divs. You need one div for the content of the box. Then you need two divs above that, for the top corners and two below it, for the bottom corners. Should be simple enough right?

Well if it's not, here are a couple of Rounded Corner generators that you can use to slap together the code really fast. The even generate the images for you if you don't have your own.

• Corner Shop
• CSS Rounded Box Generator

[tags]css, rounded corners[/tags]

Popularity: 4%

Share This

Yes again, I'm late. I'm sorry folks, but here we go.

Once again we bring together JavaScript and CSS to produce amazing results. Notice the header at the top of this website (assuming that I haven't impulsively changed my theme again)? Nice basic reflection, right? It's commonly known as the Wet Floor effect. I can just hear the Photoshop folks now, "what's so impressive about that?". Well seeing that I lack a lot in the Photoshop field it took me about 30 minutes to get this to look even reasonably good. But I did not have to go through all that trouble.

Reflections.js provides a simple method for web developers to do this. I haven't had too much experience with this other than just basic demos but I am again amazed at the power of JavaScript and CSS. You include the JavaScript and for each image you want to add a reflection to you add:

. That's it. It almost seems too simple doesn't it?

Popularity: 9%

Share This

Yes, I know I'm a bit late with this, but I still had to give you the run down.
Originally created by Lokesh Dhakar

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

Have you ever gone to a website and seen this nice lil' thing they do when you click on a thumbnail and it pops up a larger image in the same browser window? That's LightBox. I've seen it before and I haven't given it a lot of thought. I just naturally assumed that it would take too much time to implement, so I left it alone. Oh was I wrong.

Popularity: 11%

Share This