If you would like to add more functions to your Google Toolbar, check out this nifty feature: custom buttons. You can create a custom button, sort of like a shortcut button, for any web page that has a search field. Watch how…

As I’ve told you in an earlier post, my website development tool of choice is Drupal. It’s so easy for web designers like myself to set up, but the real advantage is that it is easy to pass off to the client so that they can manage the content themselves.

I started with a single template that I have edited and adapted for four different sites. Alas, it has a flaw — it depends on tables for the main content of the page. That is less than ideal for SEO (search engine optimization) and consistency in how it looks on different browsers and computers. So I became determined to convert the template for the EZ Fun Guide to Walt Disney World web site to a tableless layout. This is the behind-the-scenes story!

First, some research. I checked my favorite CSS reference: W3Schools CSS Reference. I started with the sections on Float and Positioning. If you’ve done web layout using tables, you know that you have to imagine how the cells of the tables will align with each other and be displayed on the page. With CSS, you can use Float and Position to specify where elements will appear. Rather than relying on the cell width and height (which is not stable), CSS allows you to specify the width and height of the web page element. Other resources that were helpful:

• Ripping Out Tables
• Layout Techniques: 3 columns, the holy grail
• CSS Layout Creator
  

I started by using “float: left;” to set the location of the left sidebar and “float:right;” to set the location of the right sidebar. Then I used “position: absolute; top: ###; left: ###;” (with the actual numbers) to position the main content. Unfortunately, that doesn’t produce the desired results because the center content area is fixed, while everything else adjusts when the browser size is changed. So I tried “position: relative” for the main content, but no matter what I tried the sidebars were bumped below the main content. Most references that I found required multiple wrappers that I am either too lazy or too slow to figure out how to use. Besides, I try to create the most streamlined code possible, and those were definitely not simple.

The solution came from the CSS Generator. I put the basic specs that I needed and generated a sample page. Looking at the CSS and HTML, this was clearly the best answer! The key is the use of what the original coder calls “float containers fix.” You can read more about contained floats on this CSS Creater web page.

My solution:

• In the CSS file,
• add a class element named “content-align” with the “float containers fix”
• Add an ID element called “holder-one” to hold the main content and the right sidebar, and set it to “float-right.”
• Set the main content to “float-left” and the right sidebar to “float:right,” which will be applied within the “holder-one” element.
• Set the left sidebar to “float-left.”
• In the PHP page template,
• Add the “holder-one” element as a DIV to hold the main content and the right sidebar, and apply the “content-align” class.
• Call the left sidebar after the “holder-one” element.

I tweaked the padding and margins (especially of elements that had been in borderless tables). Now, I have a much leaner CSS file and PHP template, and the page renders consistently. As a bonus, I can use the “holder-one” element for a custom front page - which, incidentally, was what started this entire adventure.

I am so excited to announce the launch of a new marketing tool that is just perfect for all of us! Mouseopolis is a new Squidoo community for Disney World fans. I can hear you all asking — Mouseopolis? Squidoo?

If you haven’t already heard, Squidoo is where web-page building meets social networking meets Web 2.0. The Chief Squids describe it this way: “Squidoo makes it really really (really!) easy to share your favorite stuff online, discover great recommendations, earn a little dough and even give to charity. All for free.”

So far, quite a few Disney World fans have found Squidoo and created some amazing (and a few not so amazing) web pages about Disney World. I host a Squidoo group for a few of them. But, this was kind of haphazard and still didn’t help those unknowing masses out there looking for *helpful, organized* information.

Read more…

If you haven’t already figured out that I totally love Squidoo, keep reading! Over the past couple of days, I’ve added two new lenses:

Help Desk Humor

“Life as a Help Desk Tech is bizarre, to say the least. Why would anyone purposefully set off on a career where you spend your days solving problems that most likely should never occur? Oh, well, here you are in your little cubicles, trying to save the world.

“This lens is a tribute to all the computer support techs! Check out the first help desk call - the introduction of the BOOK! - and other great videos of help desk humor. Look at some cool stuff for geeks. Vote for your favorite book for users, and share your best tech-call story!”

Check out the funniest video I’ve ever seen about the perils of new technology on Help Desk Humor!

Coleman Camping Gear and Equipment

Looking for the best camping equipment without having to visit dozens of speciality stores? Coleman wins, hands down! Since our early days of tent-camping, we have loved Coleman products.

Whether you’re planning your first camping adventure or looking to add to your supply of camping equipment, this is the place! Cookware, coolers, tents, furniture, stoves, lanterns - you name it, it’s here!

Check out Coleman Camping Gear and Equipment for the whole story.

Today was payday at Squidoo! My end-of-March payment finally went over $20.