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 is a journey from six years of conventional web design practice to the way we'll build sites in the future. Only it's not set in the future. You're soaking in it.

From the beginning, we've done whatever we had to do to make our sites work in every browser. In the world of non-standard HTML Design, we bolt every word, every image into place by manipulating table cells.

And we solve problems by replacing them with new ones. Netscape 4 ignores the CSS {margin: 0;} declaration? Extend the BODY tag with the Four Horsemen of Non-Validation: LEFTMARGIN, TOPMARGIN, MARGINWIDTH, MARGINHEIGHT. IE4 doesn't fully support the CSS border property? Fake it by...

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 ...

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 ...

For more than a year, ominous rumors have been privately circulating among high-level corporate leaders that Mozilla had been at work on what was darkly hinted to be the Ultimate Weapon, a Doomsday device. Intelligence sources traced the site of the top secret Mozillan project to the perpetually smog-shrouded wasteland known as Mountain View, California. What they were building, or why it should be located in such a remote and desolate place, no one could say.

How General Ripper was Driven to the Edge of Madness

U.S. General Jack D. Ripper was busy coding the Burpleson Air Force base website when he began experiencing problems. His fonts were serif where they were supposed to be...

continue reading ...

Introduction

This article explains how you can customize the user interface of the Movable Type application. This is a powerful area of functionality that's easy to get started with and almost unlimited in its potential.

Some key points we'll cover: • How to create custom application templates for Movable Type's interface • The benefits of using application templates • Ideas for how to use application templates with your plugins or workflow • Links to some example application templates, to see what's possible and to inspire your own

Customizing the Movable Type user interface

To understand the potential of customizing your Movable Type interface, you'll need a little bit of background....

continue reading ...

It can be difficult to move from a static, pixel-based design approach to an elastic, relative method. Properly implemented, however, elastic design can be a viable option that enhances usability and accessibility without mandating design sacrifices.

A pixel is an unscalable dot on a computer screen, whereas an em is a square of its font size. Because font sizes vary, the em is a relative unit that responds to users' text-size preferences.

It is perhaps easier to adopt a print-like, static approach to design because there is less to think about when dimensions don't change. To employ an elastic approach, however, is to fully exploit the capabilities of computer...

continue reading ...

One of the nice things about old-school table layout methods is that they enable you to create liquid page designs very easily. If you want to center content vertically or stick a footer to the bottom of the browser window, all you have to do is include one main table with a height of 100% and position elements inside of it.

With web standards, you can't do this anymore. The table height property is deprecated in XHTML, and web standards recommend that you avoid using tables for page layout. To divide structural markup from presentation, CSS is the way to go - but if you want to use CSS for vertical positioning, you face a lack of support from some mainstream browsers....

continue reading ...

Apparently there remains some confusion after my Thursday-afternoon rumination on the potential use of tables, as opposed to pure CSS-based layouts. I'm going to share some of my experience to help clear this up.

Some of the comments on this site were discouraging, it sounds like the original piece was interpreted to advocate laziness. Some of the replies on other sites perpetuated this interpretation, so once more, tables should be considered only with the proper education to use them responsibly. This means attention to accessibility, as well as offloading all other presentational attributes to the CSS, leaving the simplest of layout-structural tables.

The point I was clear to make...

continue reading ...

The Web Standards Project's ( WaSP) Browser Upgrade Initiative ( BUI), has spurred many a designer to move towards more standards compliant web design, using CSS rather than tables for layout to save user bandwidth while enhancing underlying semantics, accessibility, and reach.

"Tables are dead..."

Several designers have taken Jeffrey Zeldman's lead in posting tutorials that have helped us get over the initial hump of table-less design. The first efforts have focused on creating two or more columns using CSS positioning instead of tables, thus allowing for a (complete) separation of structure from presentation. These broader techniques have been documented and...

continue reading ...

05.31.2005

Movable Type Cheat Sheet

One of the great things about Movable Type being localized into a number of languages and having such a broad international presence is that we get great contributions from our community around the world. The latest contribution is Jörg Petermann's Movable Type Cheat Sheet, which he's published in both German and English.

The Cheat Sheet, available in both PDF and PNG formats, covers all the standard Movable Type template tags, as well as common attributes for the tags and the date format used for output. Most of these tags also apply to TypePad's advanced templates as well, so it's worth keeping a copy of the Cheat Sheet...

continue reading ...

We've just posted the newest article to the Professional Network site: Customizing Movable Type's Interface with Application Templates. As we mentioned when Movable Type 3.16 was released, our support for custom application templates has been beefed up in current releases of Movable Type. This new article discusses how application templates work, why you'd want to make use of them, and some examples of how they've already been deployed.

From the article:

If you're looking for inspiration: Take a look at the work that's already been released in the community. Alex Sancho created a liquid template for displaying Movable Type's interface, letting the information in the application reflow...

continue reading ...

Whether it's a deceptively simple problem or a case of being too close to the code to see the easy answer, I've been struggling with this one problem on and off for months now:

Is it possible to use floats to position a fixed-width sidebar on the right of a page, with a liquid content area, if the content comes before the sidebar in the markup?

Floating, and not absolute positioning is necessary for the sake of a clearing footer. It's easier to see what I'm after by looking at the code: <div id="content"> ... </div> <div id="sidebar"> ... </div> <div id="footer"> ... </div>

Corresponding CSS: #content { float:...

continue reading ...