42 hits123

1. Creating a 3-Column Layout in MT3.2

Learning Movable Type, Tutorials, 26 KB, 1249 words

The default Movable Type MT3.2 templates come with one sidebar on the right side of the Main Index page. With a little template manipulation you can have an additional sidebar on the left - a 3-column layout.

The MT3.2 stylesheets and templates are designed to have the columns laid out in order, starting with the column named "alpha". The columns, in order are alpha, beta, gamma (for a 3-column layout), and delta (a hypothetical fourth column that one could create). In the default MT3.2 Main Index template, the sidebar is on the right and is in a column named "beta.

To add a third column, you will make a copy of the default "beta" column code and put it before the "alpha"...

continue reading ...

2. Fluid Three Column

Movalog, Tutorials, 31 KB, 1150 words

Learning Movable Type has an article that guides you through the steps of creating a three blog layout. The only problem is that the #container width has ben set to 904 pixels. This means that on a 800x600 layout you're going to get the nasty horizontal scroll.

The best way around this is to create a fluid three column layout ( what are fluid/fixed layouts ?).

1.Change the width of #container to 90%

2.Delete #center and corresponding div tags in all your templates

3.Duplicate your sidebar, find the following/similar code in your stylesheet #right { float: left; width:200px; overflow: hidden; }

And replace it with the following: #right { float: right; width: 20%;...

continue reading ...

3. Dave Shea explores column layouts

Six Apart ProNet Weblog, News, 14 KB, 107 words

Though most of us have moved from table-based layouts to CSS for positioning, there's a good reason column-based layouts have been used in print publications for hundreds of years: They work. With that in mind, it's worth reviewing Dave Shea's look at Columns & Grids, an exhaustive study of the variations that designers are using to breathe new life into designs with one, two, three, or even eight columns providing the structure.


Previous Entry: Making Blogs Accessible to the Visually Impaired

Next Entry: TimesSelect as a blog business opportunity?

continue reading ...

4. Creating Liquid Layouts with Negative Margins

A List Apart, Tutorials, 17 KB, 1874 words

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

5. Flexible Layouts with CSS Positioning

A List Apart, Tutorials, 16 KB, 1826 words

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

6. Cross-Column Pull-Outs

A List Apart, Tutorials, 17 KB, 1795 words

Editor's Note: The following technique accomplishes its goals by using a few markup elements that lack innate semantic value. For some of you, that may place this means of achieving cross-column pull-outs beyond the pale. For the rest of you, bon appetit.

Print designers have long relied on the ability to wrap text around anything - most commonly around a picture centered between two columns. This design option has not been available for web designers ... until now.

Basic two-column layout

To use this technique, we must first set the stage.


<div id="overall"> <div class="col"> <p>…</p>...

continue reading ...

7. Cross-Column Pull-Out Part Two: Custom Silhouettes

A List Apart, Tutorials, 19 KB, 1744 words

The cross-column pull-out gave us a new technique for marking up a layout with a pull-out positioned between columns. Now we examine a variation of the technique for wrapping around the edges of a non-rectangular image positioned between columns. But first we need to update the original technique.

Upgrading the cross-column pull-out

After ALA published Cross-Column Pull-Out Part One, Daniel Sheppard shared a technique that lets us avoid character counting, the most cumbersome part of the original method. Let me briefly explain this new technique.


<div id="leftCol" class="col"> <div...

continue reading ...

8. Practical CSS Layout Tips, Tricks, & Techniques

A List Apart, Tutorials, 22 KB, 2108 words

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

9. The New Themes - Making Sense of it all

Movalog, Tutorials, 33 KB, 1540 words

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

10. CSS layout techniques

Glish, Tutorials, 40 KB, 4648 words

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

11. Converting from Fixed to Fluid Style

Learning Movable Type, Tutorials, 24 KB, 1055 words

This tutorial is written by LMT guest author Arvind Satyanarayan of Movalog.

Updated Nov 16

The default styles that come with MT are known as 'fixed' styles. This means that size and position of layout elements, such as columns, are fixed and are defined in pixels (px). This also means that no matter what a person's screen resolution, everything will be the same width and in approximately the same position. The alternative to a fixed design is a fluid design. A fluid design uses percentages when defining size and positions, so the sizes of elements on the page are relative to the user's screen resolution. A fluid design also removes the horizontal scroll bar. With a fluid...

continue reading ...

12. Tables? Oh, the horror!

MezzoBlue, Tutorials, 17 KB, 1614 words

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

13. The New Themes - Making Sense of It All

Learning Movable Type, Tutorials, 32 KB, 2214 words

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

14. From Table Hacks to CSS Layout: A Web Designer’s Journey

A List Apart, Tutorials, 32 KB, 4130 words

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

15. CSS Design: Creating Custom Corners & Borders Part II

A List Apart, Tutorials, 12 KB, 1012 words

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

16. Movable Type Style Generator

Movalog, News, 30 KB, 1197 words

As you probably already know, Movable Type 3.2 was released and boasts a stunning featureset. I personally have plenty of plugins, tools and other announcements to make which are all related to this release. The first of which you've probably guessed by the title. I present the Movable Type Style Generator. Quite simply, click on any element on the page and a box will appear allowing you to change any of the element's properties from background color to font faces and styles. After you're done, hit the Download button to get the stylesheet, 3.2 compatible! The beauty of this style generator is since it creates 3.2 compatible stylesheets, you can use them across any of Six Apart's...

continue reading ...

17. Simple Changes to the Default MT3 Styles

Learning Movable Type, Tutorials, 33 KB, 2880 words

Here are some simple changes that even a non-CSS expert like me can implement to make some fundamental changes to the default styles of MT3 weblogs.

1. Moving the sidebar from the right to the left side. The default MT3 Stylesheets have the sidebar on the right side of the page. To move the sidebar to the left hand side you don't actually have to change the stylesheet at all. The changes are made to the Main Index template and any other archive template that has a sidebar. In the Main Index template, find the sidebar code section:

<div id="right"> <div class="sidebar">

Your sidebar code

</div> </div>

If your sidebar is currently on...

continue reading ...

18. Basics / 2

Movable Type Weblog, Tutorials, 21 KB, 1063 words

I am going to describe the basics of Movable Type in a short introduction. You do not have to know anything about Movable Type for understanding it. However, when following this three-part introduction, you will learn to know the most important components and gain a good overview. • Movable Type Basics / 1Movable Type Basics / 2Movable Type Basics / 3


In the previous part we explained that entries are stored in a database. However, you will not find the website's HTML in the database. Instead, just the attributes of an entry are stored as columns in a database table. But how does Movable Type create HTML out of this?

In Movable Type there are a number of...

continue reading ...

19. CSS: Copyrightable?

MezzoBlue, Tutorials, 17 KB, 1411 words

Yesterday's post began with a soliloquy on the relative ease of theft that comes along with standards-based design. This is an issue I'm deeply concerned about, for obvious reasons. I've had to tackle some hard questions head on when it comes to CSS theft. I still don't have any answers, only opinions.

Some excellent discussion ensued on both topics yesterday, but there was some confusion between them. Let's free this topic from the specific case, and move along to the more general issue at hand.

CSS is a design language. It's the foundation of a site layout, just as much as PostScript is the foundation of a poster or brochure. Can the code...

continue reading ...

20. Bulleted Lists: Multi-Layered Fudge

A List Apart, Tutorials, 13 KB, 1254 words

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


You want to post some comment? Please use the announcement post on the Movable Type Weblog.

If you want to give some feedback concerning a specific query, please use the feedback button that is shown after a search has completed.

mgs | September 27th 2005