When using CSS, the one thing that almost no thought is given to is how to format the file itself.

Most CSS examples use the verbose format, with each attribute on its own line. Like so: p { text-align: left; font: 12px/16px verdana, sans-serif; color: #333; }

This seems to have caught on as a standard method, and while it looks nice, it's horrendously unusable for larger style sheets. A couple of columns of text on each line fill up only the first portion of the editor and leave the rest of the window empty. Scrolling to find any given element takes far too long, and wastes too much time. There's a better way to use that space.

I've started using a...

continue reading ...

Tutorial cross posted on Learning Movable Type and Movalog.

With Movable Type 3.2, Six Apart launched a new markup and stylesheet structure that has also unified their three platforms. These new templates and stylesheets (from now on referred to as themes) have been called tag soup due to the sheer number of <div>s and indents.

What a mess - why did they do it?

The new themes can be quite intimidating the first time you come across them however Six Apart have created these new themes for several reasons: • First of all, Typepad, LiveJournal and Movable Type now share exactly the same markup. This means that a theme will work on any of these three platforms and designers can...

continue reading ...

The default Movable Type MT3.2 templates come with a sidebar on the right side of the Main Index page, but not on any of the individual entry, monthly, or category archive pages.

There are two basic ways to add a sidebar to archive pages. The easiest for beginners is just to copy and paste the existing sidebar code into the correct place in the archive templates. The slightly more involved, but much preferable method is to create a separate file with the sidebar code and use a PHP include or an MT include to include the file into the various templates. You can also very easily move a sidebar from the right to the left side of your weblog pages.

Where is the Sidebar Code?

The MT3.2 stylesheets and...

continue reading ...

I was recently confronted with the task of creating a two-column liquid layout with a header and footer in which the content needed to come before the sidebar in the source code. I took opportunity to demonstrate an under-used aspect of CSS: negative margins. Negative margins allow us to push the content area away from the sides of the browser, leaving room for the sidebar.

Starting out simple

To show how negative margins can be helpful in creating liquid layouts, let's start by creating a liquid two-column layout with a header and footer. The main content area will be on the left, with the sidebar on the right. This would normally be a very simple process, but we are...

continue reading ...

This tutorial is written by LMT author Arvind Satyanarayan of Movalog. Tutorial cross posted on Movalog and LMT.

With Movable Type 3.2, Six Apart launched a new markup and stylesheet structure that has also unified their three platforms. These new templates and stylesheets (from now on referred to as themes) have been called tag soup due to the sheer number of <div>s and indents.

What a mess - why did they do it?

The new themes can be quite intimidating the first time you come across them, however Six Apart created these new themes for several reasons: • First of all, Typepad, LiveJournal and Movable Type now share exactly the same markup. This means that a theme will work on...

continue reading ...

This article was prompted by the growing crop of CSS "tips and tricks" articles that have surfaced in the last two years. Typical of these are the three column design making use of left and right fixed columns hanging on their margins; and the use of @import, instead of JavaScript, to feed appropriate style sheets to differently enabled browsers.

These ideas are very cool and their authors should rightly be heaped with praise, but I can't help feeling we've been here before.

Remember when you figured out how to make a table of images display without the gap? Or how about when you worked out the browser's table rendering algorithm and started using...

continue reading ...

Tutorials in Alphabetical Order

"Email Me" Contact Forms A Safe Way to Upgrade to MT 3.2 Add Your Links Here Adding a Footer Adding a Sidebar - MT3.1 and Earlier Adding a Sidebar to the Default Archive Templates Alphabetize Your Entries Amazon Web Services An Overview of the MT Program File Directories Applying MT3 Style Templates to MT2.X Background Patterns Backing Up Your Blog Banner Images Blog Maintenance Blogger Audioblogging with Movable Type CGIWrap and suEXEC Category Archive Pages Category Customizations Closing Comments Colors - Background, Banner, Headline, and Font Colors - Experimenting With, Using MTSetVar and MTGetVar Combining Multiple Blogs Into One Concerning Spam Converting from Fixed to Fluid Style...

continue reading ...

Ever since CSS hit the big time, the table has become increasingly rare. Semantic markup and CSS have replaced tables as layout tools. Tables are now relegated to their original role: displaying data stored in records (rows) and fields (columns).

However, their new status doesn't mean that they still can't be the targets of a designer's styles and a developer's hacks. A table typically presents more information than the rest of the page in a much smaller area, and much effort has been spent in attempting to make tables and other data visualizations as easy to interpret as possible.

The web designer's and developer's toolbox of the DOM, CSS...

continue reading ...

{Part II of a two-part series.}

Part I showed how to apply customized borders and corners to liquid CSS layouts. The technique works well, as long as your design uses solid background colors. But what if you want to use patterned or gradient backgrounds? In Part II, we'll extend the technique so you can do just that.

A design problem

We've received another directive from our hypothetical graphic designer of Part I. Encouraged by the results of our previous collaboration, he has attached a new sketch he wants us to incorporate. (That's it on the left. Four rounded corners against a tall, gradient background.)

"It's easy to change,...

continue reading ...

Among the many websites that are out there, few are standards-compliant. Among those few, only a handful sport style sheets adjusted to the needs of handheld devices. Of those which do offer styling for handhelds, not all will fit the smallest, lowest-resolution screens without presenting the user with the ultimate handheld horror: namely, horizontal scrolling.

The Opera browser runs on handheld devices of all screen sizes and resolutions, some of them only 120 pixels wide. We work for the company that produces Opera, so we can offer a degree of insight into the functions of Opera for handhelds. In this article, we've prepared a set of general suggestions for creating a...

continue reading ...

Designing our company's website in CSS was coming along nicely until I hit a roadblock. The challenge was to create two columns of bulleted lists in the flow of the text. The layout I had in mind was something like this:

Paragraph 1 Bulleted list | Bulleted list Paragraph 2 Bulleted list | Bulleted list Paragraph 3 Bulleted list | Bulleted list ...and so on

I tossed around some lists that worked fine in IE 6, but caused a headache in almost every other browser. Perhaps I could have smashed through the roadblock using horizontal lists. But I've always found it easier to float, so that's what I did.

Floating ULs

To solve the problem with floats,...

continue reading ...

If you are looking for help making the transition to CSS layout (that's Cascading Style Sheets), you've come to the right place. I am cataloging here as many useful cross-browser CSS layout techniques as I can find, and some that I made up when I was bored last Thursday. All the examples on this site have been reduced to only their essential code, and you will find the source displayed on each page to hopefully make it quick and easy to understand the inner workings of the CSS. Feel free to steal all the code you find on this site, and consider linking back here on your site or in your source comments.

You will also find below links to various online CSS resources and tutorials, appropriate for both the novice and the seasoned CSS veteran....

continue reading ...

Movable Type gives you an amazing amount of control over your content, but one of the things that it sorely lacks is the ability to make massive changes to all of your entries at once. Oh sure, you can edit the basics in power editing mode--categories, authors, dates and titles--but we want more. Being able to make massive changes to the extended, excerpt and keyword fields can become almost a necessity if, like me, you're using those fields for something other than their original purpose.

For instance--Customer A is using MT to store course listings. The extended entry field contains the dates offered, the excerpt field holds the price and the keywords...

continue reading ...

The default Movable Type MT3 templates come with a sidebar on the right side of the Main Index page, but not on any of the individual entry, monthly, or category archive pages.

There are two basic ways to add a sidebar to archive pages. The easiest for beginners is just to copy and paste the existing sidebar code into the correct place in the archive templates. The slightly more involved, but much preferable method is to create a separate file with the sidebar code and use a PHP include or an MT include to include the file into the various templates. You can also very easily move a sidebar from the right to the left side of your weblog pages.

Where is the Sidebar Code? MT3.1 and...

continue reading ...

XML (Extensible Markup Language) is the Eurodollar of web development. Both XML and the Euro bring order to chaos; both offer undeniable, wide–ranging benefits; both are poised, in 2002, to change the way we do things. Frankly, both scare the crap out of people.

For web developers, 2002 is a time to conquer fears and take their first hands–on approach to XML. It's time to examine XML and realize the practical benefits that it can provide to web projects today.

The bankers can fend for themselves.

XML, HTML & Databases

If you need a good analogy to describe XML to other people, don't mention HTML. Although XML looks a lot like HTML,...

continue reading ...

It's been a slow year. With the Internet economy taking a bit of a tumble (perhaps you've read about it), new clients just haven't been calling like they were. So what's a hapless web designer with a family and a modest mortgage to do? Use the downtime to re-tool, re-learn, and switch over to Standards Compliant Design of course (wild cheers, whistles, deafening applause).

Done! Ummm, just one small problem. How do I convince my clients to go along with it? They may not be tech savvy, but they are well-versed in the mantra of designing for the least common denominator. Full access for everybody is the battle cry of the small business, and what's worse,...

continue reading ...

I've assembled some templates to build a photo gallery with Movable Type. What makes mine different and special from all the others? Easy: it's compatible with MT version 3.2. That means it'll work with the StyleCatcher plugin and the Movable Type Style Generator!

The only special requirement to use these templates is PHP. PHP is used to calculate the image size. The plugin Better File Uploader - with its For Photo Gallery button - will make adding photos go much quicker.

I've created a small example gallery, if you're interested in seeing the result before trying it yourself.

Setup a New Weblog

First, you'll want to create a new...

continue reading ...

I've assembled some templates to build a photo gallery with Movable Type. What makes mine different and special from all the others? Easy: it's compatible with MT version 3.2. That means it'll work with the StyleCatcher plugin and the Movable Type Style Generator!

The only special requirement to use these templates is PHP. PHP is used to calculate the image size. The plugin Better File Uploader - with its For Photo Gallery button - will make adding photos go much quicker.

I've created a small example gallery, if you're interested in seeing the result before trying it yourself.

Setup a New Weblog

First, you'll want to create a new...

continue reading ...

A great way to easily customize the look of your Movable Type weblog is to replace the default title banner with a banner image. There are two basic methods for adding a banner image - adjusting the CSS or adjusting the index and archive templates.

Before making template adjustments, you first need to prepare your banner image. You might choose to use an image that will take up the entire banner space, or you might want more of a logo-like image that would only take up a part of the banner space, with a solid color making up the difference. Photographic images that extend to the edges of your weblog's container work best for banners in "fixed width" styles, such as in the default...

continue reading ...

In our struggle to reduce the number of steps site visitors must take to accomplish their goals, we face a number of challenges. One of them is to provide a good way for users to choose from a list of hierarchical elements. For example, a list that serves as a diner menu, offering a selection of drinks, main dishes, salads, and desserts.

Two techniques might be used to solve this kind of problem: • The straightforward, step-by-step approach with reloads in between each page. This is the safest and most commonly used approach; but it increases server traffic and requires patience on the user's part. • Dynamic select boxes.

The complex solution

Dynamic select boxes, in which choosing an item in the first box changes the content of the second box, saves the user a reload - if she has JavaScript at her disposal. If not, we need to reload the page and populate the second select box on the server. Both options have several problems though:...

continue reading ...