Creating an HTML signature file for just about anything
So I’ve recently had the opportunity to create a plethora of (pinatas?) e-mail siggy files 
And not just a nice little siggy file to place with your Outlook or Mac Mail program, but in ALL KINDS of things. Even for Gmail.
I had to piece together the “how-to”s from a bunch of different sources throughout the web, but I’m here to share how I did it, and how I managed to make it work for all kinds of different mail-reading-and-sending programs.
read more »
Dynamic Stylesheet
This has been something that has plagued me for a while now: dynamic stylesheets. What is the purpose? Well. sometimes it would just be nice if you could create IDs and classes on the fly, and not have to update the stylesheet every single time you do something.
As an example, say you want all the Pages on your blog to look different, so you have the body tag dynamically generate an ID for every page, using the pagename. But the stylesheet – well… every time you want some kind of different layout, you have to manually edit the stylesheet. Wouldn’t it be nice if you could just have it happen when you created the Page?
read more »
Equal sidebars, longer content
Have I ever mentioned how much I love a challenge? I love to play with CSS.
Anyway, there was a question on one of my email lists the other day, and I was sure I could accomplish it. Basically, someone wanted a site layout where it was your basic 3-column thing. Content in the center and two sidebars flanking it. Simple enough. But the trick was – they wanted the two sidebars to always have the same length as each other – no matter which one was the longest. The center content section would have nothing whatsoever to do with the length of the two sidebars. Oh, and no “faux columns” tricks, or javascript to be used.
Could this be done using straight up CSS? I thought so, but I could forsee some problems with it.
Wouldn’t you know it – I was right.
Sticky Footer
So, I’ve been trying for a while to figure out the whole “Holy Grail” (as it’s been called) of layouts: the 3 column layout with header and “sticky footer” that works cross-browser. A List Apart has one, but it relies on having a huge bottom padding, and then reversing that with a huge negative margin. Me, I’m chick who likes to use negative margins as sparingly as possible – meaning only when I have to, and preferably nothing in the quadruple (or larger) digits.
There’s several other ones I’d found – but most of them relied on similar fixes – or javascript to determine the browser window’s height (for IE purposes). For me, javascript is a no-no. The point of CSS is so people can still see what you’re doing – whether javascript is turned off or not. Then there were ones that were fixed width and centered, and didn’t have sidebars. Neat idea – but I needed more.
Then I came across this site the other day, and the guy had a 3-column layout. It was nice, and exactly what I was looking for – however it had a lot of hacks and (what seemed to me) unnecessary extra code and CSS in there. So I played with it…
Disjointed rollovers
So I’m back from my little hiatus (I’m sure you missed me! hahaha), and had a new challenge posed to me.
Image swaps are cool for rollover effects, but what about disjointed rollovers? Can they be accomplished with no javascript?
I’m here to tell you “hell, yeah!”
And I will also show you
Fluid 3-column Layout
…and now we come to what A List Apart calls “the Holy Grail” of layouts – the fluid 3-column layout. This is my version, brought upon by a request made on a message board for a 3-column layout where the designer could vertically center-align the sidebar content. Amazingly, I got it to work for her – but it didn’t work in anything but Firefox and IE6 (that’s all she was worried about, so I stopped there). However, I became obsessed with trying to figure out a way to accomplish the 3 column layout in a way that was better than anything I’d found. After reading the A List Apart article, and a few others, I put my mind to it and came up with the below tutorial.
Now, personally, my favorite way to do a multi-column layout is to add in background gif images for the column backgrounds. Why do I like this style? I don’t know. I guess I like the option of putting in a cool tiled background, if I really want it, rather than a solid color. Of course, there are drawbacks – the only one I can think of off the top of my head is if someone comes to the site with images turned off – but in a case like that, I believe if you can see the content, then all is well (since most people who have images turned off just want to see the content anyway!)
However, to do it in a 2 column layout is easy. But a 3-column? With the center fluid? How could it be possible?
read more »
Two Column Fixed Width Layout
The Two Column Layout is the most popular of layouts I’ve done in the past. This site used to be done in the two-column layout – it seems to be the most popular for simple websites. One column – narrow in width, is usually reserved for the sidebar navigation, the secondary column is wider and handles the content of the pages.
Now, you can do without the header and /or footer quite easily – but the technique I’m going to describe is for the example layout above – and done entirely in CSS.
That’s right – no tables.
read more »