E1n1verse

Blogging My Life the CSS Way Away

As part of goal to improve my networking and reach out to the community, I had a task to start a research-oriented blog. I set up the software all the way back in September, before I suddenly had to return to Canada on a business trip, but since I haven't yet returned, I hadn't really invested much time in my Ph.D. in general or in that task. I remedied that somewhat today by spending the bulk of the day tweaking the look and feel of the two blogs I have and then adding some back-dated content to this one.

One of the things I wanted for the two blogs was a unique but similar look, so the two layouts are basically identally. Even though the layouts look very simple, it took me hours and hours back in September to research the CSS required to lay the pages out in three columns plus a spanning header/footer without using any tables. The tricky part wasn't so much the lack of tables but in getting CSS which would work consistently across the different "standards-compliant" browsers and did not employ absolute positioning in order to work. Judicious use of the float properties in CSS and div elements seem to have it under control, at least for browsers I use.

The floating three-column layout with spanning headers/footers:
#leftcol, #middle, #rightcol {
background-color: transparent;
float: left;
}

#leftcol {
width: 17%;
min-width: 8em;
padding-left: 5px;
padding-right: 5px;
}

#middle {
width: 58%;
padding-left: 5px;
padding-right: 5px;
border-left:1px dotted #999;
border-right:1px dotted #999;
background:#333;
}

#rightcol {
width: 17%;
min-width: 8em;
padding-left: 5px;
padding-right: 5px;
}

#header, #footer {
width: 100%;
padding: 0em;
background:#000;
color:#FFF;
}

#footer {
clear: both;
}

Once that was figured out, organizing the content into logical blocks was easy enough and away we went. The last major CSS tweaking I did back then was to add automatic tagging of internal versus external links. External links have solid underlines and, depending on your browser, an animated spinning globe to the left of them inline with the link. They also turn orange when you run your mouse over them (hover). Internal links don't have any inline graphics, turn green when you hover over them, and use a dashed underline. The CSS wizardry that does this is part of the CSS3 Selector Recommendation from the W3C. I followed Stuart Langridge's write-up at http://www.kryogenix.org/days/external.

Today's efforts were focused on colour schemes. Ein² has a very pleasing colour scheme of blues and greens, which I very much like. For the research blog here, I wanted something a little more serious. The original page started off mostly in greys with a little bit of light blue thrown in. It was very monochromatic and serious, but not very inspiring. Fellow Brainstormer Jim Lai dug out his colour theory books and we set to work with a will and ended up with an analogous colour scheme to Ein² but a little more formal in presentation. While I don't like it as much as the other, it will do for the moment.

I've also added some text about my recent talks and writings. I'm hoping to start using Tinderbox to manage production of information about papers or talks I've developed and papers/books I'm reading which can be automatically updated and then included in this blog. That's a task, however, that will have to wait for another day as will a description of Tinderbox and trying to validate included stylesheets in external stylesheets that use CSS3.