I’ve been working on implementing tabbed navigation. Using the sliding doors method gave really elegant results, but I had problems with the placement fo the tabs. First I put it underneath the header, but somehow their position ended up being absolute, and didn’t move when the window is resized. Placing it inside the header beneath the title description looked nice in firefox but I ran into problems with stupid IE. For a brief moment I thought about ignoring the IE anomaly but since I’ll have to look at the website at work, I know I’d be unhappy if I didn’t improve on the design.

The simplest solution, as of today, was: 1) not to use fancy rounded edge tabs and 2) place the tabs immediately above the content container rather than near the header. While I was at it, I put a light blue dotted border around the content container.

The html for the tabs is easy, all the items in an unordered list. I had to do a different list for each section, to distinguish between the current tab and the others.

<div id=”tabs”>
<ul>
<li><a href=”http://invisiblecompany.com/”><span>home</span></a></li>
<li><a href=”http://invisiblecompany.com/hidden%20doors”><span>words</span></a></li>
<li><a href=”http://invisiblecompany.com/gallery/simpleviewer”><span>pictures</span></a></li>
<li><a href=”http://invisiblecompany.com/gullsway”><span>places</span></a></li>
<li><a href=”http://invisiblecompany.com/taste”><span>taste</span></a></li>
<li id=”current”><a href=”http://invisiblecompany.com/shiny%20parts” id=”active”><span>technical</span></a></li>
<li><a href=”http://invisiblecompany.com/about.php”><span>about</span></a></li>
</ul>
</div>

The css turned out to be straight-forward too, though I spent a lot of time fiddling about and reading all sorts of different approaches. First, take out the list style and define the method of display as block. This puts the text in a nice block so I can add colours and borders.

#tabs {
float: left;
width: 100%;
margin-left: 5px;
}

#tabs ul {
margin: 0;
padding: 0;
list-style: none;
}

Then define the li elements — colours, text-decoration.

#tabs ul li {
display: block;
float: left;
padding: 0;
}

#tabs ul li a {
background: #85d6ff;
color: #fff;
text-decoration: none;
display: block;
margin-left: 1px;
margin-right: 1px;
padding: 0 20px 0px 20px;
}

Finally, define different behaviours for hover and for the current tab.

#tabs ul li a:hover {
color: #006699;
}

#tabs a:active {
background: #008fd6;
color: #fff;
}

#tabs li#current a {
background: #008fd6;
color: #fff;
}

The way the theme is working goes like this: there’s a base theme css that sits within each blog, it’s the absolute default theme and defines margins and sizes. No specific fonts, borders or colour. Within the mt-static>support>themes folder is a folder for the selected theme.

Both stylesheets are called by an index called Stylesheet - Main.

To add my own customisations I could have gone into the minimalist white css and made changes. I decided not to do that; instead I created a new css called base-custom, which I saved in the root directory. Appended the command in Stylesheet - Main:

@import url(http://www.invisiblecompany.com/base-custom.css);

This custom css contains all the personalised elements like float, box100, blockindent, copyright, disclaimer etc. It also holds any over-ride I want to implement.

For instance, the link behaviour goes through 3 iterations. First the default base theme tells it to underline links:

a {
text-decoration: underline;
outline: none;
}

then the imported theme tells it what colour, and adds hover:

a {
color: #000;
}

a:hover {
text-decoration: none;
}

I hate all of this, so in my custom css I tell it to do something else:

a, a:active, a:visited {
color: #008fd6;
text-decoration: none;
}

a:hover {
color: #006699;
text-decoration: underline
}

It’s kinda clunky to have one element go through 3 different behaviours, but it seems to work. Plus I’m not disturbing the default themes, meaning when (and I sincerely hope it happens) more themes become available I can switch easily. All I will need to change is the custom css.

Styles

Let’s face it, movabletype themes suck. And I’m coming from the point of view of a loyal user. If I ever switch to Wordpress, it will be because of the themes, plugins and MT’s technical demands.

To illustrate my point, compare the MT style archive against Wordpress themes. What’s worse, MT4 comes with 3 … yes THREE excrutiatingly boring default themes — a Cityscape collection of illustrated skylines of a handful of cities; a basic Minimalist theme which is a rehash of the Vox theme; and something called Unity which basically puts some colour to the sidebar.

Something I don’t understand is there are Default Styles and then there’s the MT4 Style Library. I was excited when I clicked on MT4 Style Library but that excitement only lasted for 1 millisecond until it loaded. The so-called extended library is nothing more than versions of the THREE default styles — instead of Minimalist Red or Green we have Blue, Brown, Grey, Purple, Light Blue (*gasp*), Light Green, Pink and White. I don’t know whether to or at the dismal choices.

None of the themes in the StyleArchive are MT4 compatible yet.

The least evil of the three evils is Minimalist. And the least evil of that lot is White. MT3 introduced Stylecatcher, which allows easy capturing and implementation of styles. I guess the saving grace was how easy it was to apply the style.

The problem with it being so easy is that I seem to need to apply it to each blog, I can’t do a system-wide implementation. This also means the css files are under the sub-folders and I have no idea how to pull one out to the root, apply to the entire site and make changes.

So here’s how things stand. Using the 80-20 rule, 80% is done, there’s just the remaining fiddly 20% to finish. Here’s how the website look today.

Known issues in terms of styles:

1. custom styles like float and box elements are not implemented
2. need to add horizontal tabbed navigation — the links are there but because I haven’t added the stylesheet elements it’s just a standard ul at the top left
3. entry container is too close to the sidebar
4. narrower container, something that looks like Kubrick
5. calendar is too cluttered
6. difference in list behaviour in sidebar — look at the admin section and the recent posts section; the line heights are inconsistent
7. fonts — cripes I really don’t like trebuchet, I prefer verdana; then again it’s miles preferable to a serif font
8. font colur = #666, not #333
9. link behaviour — normal a, a:visited and a: active need to be not underlined and in a different colour; a:hover should be in a darker colour and underlined
10. sidebar links to behave differently to main links — not blue, probably the same colour as normal text
11. borders on images and linked images to be dictated by the html not the stylesheet
12. comment form too prominent
13. add an “all tags” link — okay this isn’t stylesheet but I need to do it too

I have new members, was playing around with css. I know on the main site I have to do a major redesign, get rid of redundant css styles, tighten up the templates.

What’s great about designing a brand new site is, I can play around and experiment. Switchers can be javascript or php. No brainer, really, to go for the php version.

MT based switchers have to thank a list apart (who else?). There’s even a more in depth tutorial by Rob Ballou. Of course, in MT3 and WP, there are already plug-ins, sigh, one of these days.

How I did it.

Step 1
Build the css, which I won’t cover here. I use the basic “invisiblecompany blue” and added another one called “rust”. Both I placed in the root directory, with filenames styles-invisibleblue.css / styles-rust.css.

Step 2
I created a new file in the root directory called “switcher.php”, copied the code. Note that under the array, I put the 2 different options, using the file names but not including the .css extension.

Step 3
Within the header of each index tempate page (main index, archive index, category index, individual archives) I called the switcher:

The default is set at invisibleblue, linking the alternate stylesheets enable Firefox users to pick different styles from their menus.

Step 4
Blah IE. To enable non-Firefox users, or anyone who wants to pick using a drop down menu, I made a drop down menu:

I could just paste this in the template where I want the form to sit, instead I made a simple php include so I can call it from any number of pages.

For the example, go to Cam’s page.

In the process I also learnt how to customise forms, and a little php too. Nice.

Useful resources for a fledgling web designer learning css.

w3c - lays down the law

w3c validator - and checks you've done it right

reference sheet - easy one page guide

panic guide - additional resources

glish - examples of tableless page layouts

bluerobot - more layouts

a list apart - regularly published articles on web design

css zen garden - fixed html, variable css, watch the masters at work

If there are standards it's worth following them. Consistency and compatibility are the buzzwords here.

I deleted the stylesheets for the individual sections, created during the Create New Weblog process. All pages link to the site stylesheet now.

Which has been validated. I got a big grin on my face when the validator came back with "Congratulations! This document validates as CSS!"

There's even an icon to go with it, it's like receiving a certificate after going through an obstacle course.

From everything I read about web design, tables as layout has become a dirty word. It was the thing to do a few years ago, to use tables for formatting because, yes, they gave some degree of control. And it's easy to visualize on the page.

I knew enough to put formatting in css, like font properties, color, background. But I didn't know how to use css to define positioning. Until now.

And hence begin the conversion exercise.

A simple display page

My gallery pictures used to sit in a grid with 3 columns and 3 rows, with all the tr and td tags well defined by width and height attributes. The top row contained the title of the page, the middle row with picture itself plus the description, and the bottom row for navigation. Logical when I first did it.

Step 1: I removed the table elements completely. The main content area is defined by #content and .body tags in css that specify the container's position on the page. The left margin of the image container is set so it sits near the middle of the browser window.

Step 2: I added a .floatcenter property in css and applied it to the image.

Step 3: The text also gets floated.

A 5x5 grid

So now I've discovered how useful the float tag is, I'm can tackle the 5x5 grid on the personal page. Originally it was a nested table, 5 rows by 5 columns, with dimension for each cell at 100px. It was done using loads (and I mean loads) of tr and td tags, each fixed by width, height, alignment and class definitions. A nightamare to maintain and as I found out, not as fixed as I thought.

I debated keeping it as a table but I want to see if I can use css. And I can!

Step 1: I set a new class that defines a box 100x100 with 2-color borders which floats to the left.

.box100 { float:left; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #999999; margin:1px; padding: 4px; width:100px; height:100px; border-width: thin; border-style: solid; border-color: #CCCCCC #999999 #999999 #CCCCCC; }

I know according to strict css rules I shouldn't be using height but for because it works I'll leave it for the time being.

Step 2: I like to have the title in bold, but on the same line as the text. So I used the smalltitle class.

.smalltitle { font-family:verdana, arial, geneva, helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #666666; }

Step 3: In the html each cell is defined by a <div> class:

<div class="box100"> <span class="smalltitle">to do list</span> pay bills, put pictures up on walls, plants </div>

Step 4: Finally to separate the rows I used a <br clear="all" /> tag.

Probably not the most elegant, and I dread any proper web designer reading through this. But it seems to work. So I'm kinda happy.

I've been reading obsessively on web design and realized one thing: the site has been designed wrong. Not all wrong, but a lot of wrongs. Things I seemed to have done right, mostly by accident:

• used css, albeit on a limited basis
• planned the site structure before starting
• only one frame in over 140+ pages and that's because it's necessary
• white background, simple color scheme
• emphasis on content, even if it means a page full of words

Things I haven't done right:

• there are tables everywhere
• css not extensive enough, and why have 3 different stylesheets?
• too many design elements still in the html
• fixed widths, heights, font sizes
• not tested enough on all platform and browsers
• tables.tables.tables

The message I've been getting is, get rid of the tables and separate design from presentation. Which boils down to go learn css and do it NOW. I spent the past 2 months cleaning up the code and fixing the tables, and now I've got to start all over again.

I knew enough to use css for formatting, like defining different types of text attributes (font, size, color, bold/italic etc), background and even a little table layout. Well, it's not that I knew, these were the default css styles that came with Dreamweaver. By looking through other people's codes (my how useful that View Page Source command is) I figured out how to format links. But that's about it. So how?

Luckily, I had help. The MT application came with its css, and although it wasn't what I wanted, it gave me a good place to start from, I mean it's way easier to change what other people had done rather than start from scratch. I ended up adapting Elise's stylesheet at Learning Movable Type.

I also borrowed Eric Meyer's book from the library and surfed around for resources. I'll list out the resources at a later post.

I took the stylesheet I came up with for quiet thoughts and used it on the homepage. Et voila! Instantly better looking. No longer looking like something hacked together by typing monkeys. Everything in their place. I know exactly where the content area is, where the sidebar goes, how far away from the top margin the banner is. Such control.

Instead of using tables for layout, I use <div> and <span> tags. Every time there is a change in element, put in a new <div> class.

So now the html can concentrate on page structure. The html looks prettier too, I'm listing out block element by block element, remembring that container comes before sidebar in the markup, but that's the only thing.

So much so that I tend to use the code view more now, leaving design view for checking how the page looks.

Like that new McDonald's ad says, I'm lovin' it.