Loren Webster’s makeover
Loren Webster asked me to “actually explain how [I] managed to change [his] template so that the content could be moved to the right column.”
In other words, Loren had asked me to reverse Movable Type’s default layout and have a design just like the one he’d hand-coded in GoLive for In a Dark Time, with the links on the left and the entries on the right. As it happens, that’s also the layout I use for my own blog.
As I said to Loren, there’s an easy way and a better way. No prizes for guessing which one an obsessive, anal-retentive type like myself would choose, particularly since I’ve attended Mark Pilgrim’s Accessibility School.
There’s a good reason that the Movable Type people designed the default style sheets to position the weblog entries on the left and the links on the right: it’s the solution that uses the simplest CSS positioning. (I’m guessing that it was Mena Trott who made that choice.)
This layout, called Georgia Blue, uses three <div> tags to hold the banner, the blog entries, and the links. The design is easier to maintain, faster to download, and more accessible than the traditional method that uses nested tables to control the postioning of the various elements. The only table in the Movable Type layout is, legitimately, the calendar table.
Here is a simplified version of the code for the <body> section of the Main Index Template:
<body>
<div id="banner">
Blog Name
</div>
<div id="content">
Entries
</div>
<div id="links">
Calendar
Archive Listing
Recent Entries
Blogroll
</div>
</body>
There are three <div> tags, each with a unique id attribute: “banner,” “content,” and “links.” The size of these <div> tags and their relative positions are controlled by the default external stylesheet (called site-styles.css).
The #banner rule contains no positioning information at all. Since the banner <div> appears first in the HTML, it will occupy the full width of the browser window and as much height as is necessary to display the blog name and description text plus the top and bottom padding.
#banner {
font-family:verdana, arial, sans-serif;
color:#FFF;
font-size:20px;
font-weight:normal;
border-bottom:1px dotted #FFF;
border-top:3px solid #99CCFF;
background:#336699;
padding:15px;
text-transform:uppercase;
letter-spacing: .2em;
}
The #content rule positions the content <div> with a float:left and a width:65% declaration. Since the content <div> appears next in the HTML, it is positioned on the left edge of the browser window, occupying 65% of the width of the window.
#content {
float:left;
width:65%;
background:#fff;
border-right:1px dotted #999;
margin-right:15px;
padding-bottom:20px;
}
The #links rule has no positioning declarations so the links <div> occupies the remaining 35% to the right of the content <div>.
#links {
background:#fff;
padding-right:15px;
}
Each <div>—banner, content, or links—behaves like a box and the design is created by explicitly or implicitly defining the position and width of each box. Without the float:left declaration, the banner, content, and links <div> boxes would be stacked vertically in the order in which they appear in the HTML code. But the float:left and width:65% declarations for the content <div> allow the links box to slide up beside the content box.
The easy way to do Loren’s redesign would have been to reverse the order of the content and links <div> tags and to either float the content <div> to the right (and specify the width as a percentage) or to float the links <div> to the left (again specifying the width).
So, why didn’t I take the easy way out? Because I’d be in big trouble with Mark Pilgrim. With the <div> tags in the order banner, links, content, a screen reader (employed by blind Web users or those with impaired vision) would read all the links before getting to the actual weblog entries. We could include a link that allows those users to skip over the links but the design remains a nuisance for those who use non-graphical browsers such as Lynx.
(I’m still not in the clear with Mark because all the font declarations use absolute units, pixels, instead of relative units like percentages, ems, or keywords. That means it’s not possible to enlarge the text in IE, the most popular browser. But Ben and Mena have promised accessible templates with the next release of MT, 2.5, and I’ll updateLoren’s site when they’re released.)
The better way is to use absolute positioning and that’s how I did it for Loren (or, to be honest, that’s how Rob at BlueRobot did it, since I used his 2 columns - left menu layout, for my own site and for Loren’s).
The important thing to understand, at this point, is that I only had to modify the style sheet—the Main Index Template doesn’t change. So the order of the <div> tags remains as: banner, content, links. The new style definitions are listed below (to keep things simple, I’ve removed the declarations for Tantek Celik’s “ugly brilliant hack that protects IE5/Win from its own stupidity”).
Again, the #banner rule contains no positioning information.
#banner {
font-family:verdana, arial, sans-serif;
color:#000;
background-color:#fff;
font-size:20px;
font-weight:normal;
margin:0px 0px 30px 10px;
padding:30px 0px 0px 50px;
height:100px;
border-bottom:8px solid #999;
}
The #content rule sets a right margin of 0px and a left margin of 250px (the margin values are specified in the order top, right, bottom, left). This leaves a 250px “space” on the left that will be occupied by the links <div>.
#content {
background:#fff8dc;
margin:0px 0px 50px 250px;
padding:10px;
}
The #links rule specifies position:absolute, top:155px, left:20px, and width:200px. This is all the information required to position the links <div> accurately in the browser window. No height is specified so the links <div> grows dynamically depending on its content.
#links {
position:absolute;
top:155px;
left:20px;
width:200px;
padding:10px;
background:#fff;
line-height:17px;
width:200px;
}
In this layout, the links <div> and the contents <div> appear to the left and right respectively below the banner <div>. Although the apparent order is banner, links, and content, the actual order within the HTML is banner, content, links. By using absolute positioning for the links <div>, we can make the links information appear “before” the weblog entries, even though the links are last in the HTML, thus creating a more accessible layout.
In the process of writing this entry, I realize I’ve forgotten to credit BlueRobot in Loren’s templates, even though there’s a credit in each of my own templates. The message on the BlueRobot site says:
Please feel free to borrow, steal, abduct, and/or torture the documents contained in the Layout Reservoir. Though you need not give credit to BlueRobot.com, a comment in your source code would help other developers to find this resource. Enjoy.
I promise to add the credit when Loren and I update his templates to the new accessible versions.
Aside. I note with interest Dorothea Salo’s plan to redesign Tish’s layout using floats instead of absolute positioning. Since Tish currently has a links-left/entries-right layout, like Loren and myself, I’m not sure how that can be achieved with floats. If it can be done, it may well be a cleaner solution than absolute positioning, so I reserve to steal Dorothea’s implementation for the next iteration of Loren’s design.
"links-left/entries-right layout"
HTML:
[top]
[entries]
[links]
CSS:
content { float: right; ....}
What is the problem again?
Posted by: Kris on 2 October 2002 at 01:00 AM