Template Issues

I've got a couple of people asking me about the cute little banner at the top of the page as well as about the three-column layout.

I really liked the layout that Alex and Jared have on their blogs with the two sidebars so I got in touch with Alex and he gave me some great tips. I found some three-column templates on the web but I couldn't get them to implement correctly without first razing everything to the ground. After some searching, I found a nice little article on glish.com/css. I improvised with what they provided because again, I couldn't make their template work correctly. Essentially I used position:absolute; for the text in the center, while using float:left; and float:right; for the two sidebars. This works for my browser but I've heard it doesn't for certain people (yeah with Mozilla Firefox, it screws up). I dunno, I've tried various other methods, but they don't give. I don't think the method I'm using is even good because I've noticed the text jumps as the page is loaded. Any ideas?

The banner tip was provided by Alex. You just have to add a line in the CSS for the #header para: background: url(http://(YOUR PIC URL HERE) no-repeat center center;. This essentially places the picture for your banner in the background of your header without any repeating patterns and in the center, with your blog title superposed on top. You then have to adjust header and blog-title heights, widths, paddings, margins, borders etc. to make it look right.

All this blogging stuff is pretty fun.

P.S.:-

Alrighty, after some more snoopin' around, I've modified the positioning codes in the CSS to make stuff display better on Mozilla. I'm using position:absolute;right:75%; for the left sidebar, position:absolute;left:25%;right:25% for the center text, and position:absolute;left:75% for the right sidebar.

This makes displaying on IE6 perfect, since there's no text jumping due to the float command anymore. On Mozilla, there are still issues with some text being out of line (I dunno what's causing that), and also maybe because of the fixed-width, variable-width thing (?), you gotta resize the window to see everything fit nicely. At least now the main text doesn't fall right smack on the left sidebar no more.

P.S.#2:-

Hey, just a note. If you click on view-->source, you can see the HTML code for my page, so you can pretty much see how I did the banner thing. Also you can see how I did the positioning stuff for the sidebars too -- which, for the web-savvy ones, isn't good enough at all. Go to Alex's website for his very nice layout: he uses float:left; and float:right;. Somehow that doesn't work well with the rest of the stuff I have.

P.S.#3:-

This just goes on and on. I realize now that if I used position:absolute;right:75% etc. as described in P.S., I wouldn't get it completely right in either IE6 or mozilla. So I'm gonna stick with my guns and go back to the float:left, float:right, and position:absolute; thing that I had earlier. Sorry Mozilla guys, I have to bow down to the IE6 god because that is what I have on my laptop. That said, Alex somehow has it completely right on both IE6 and mozilla... drool...