As promised, here’s my experimental layouts page. You can get to it by finding the not-so-secret door on the layouts page.
I’m purposely not making the link obvious because 1) these aren’t layouts I think should be used in their current form, so the fewer who see them, the better chance they won’t wind up in a website. And 2) because silly little easter-egg like things make websites fun.
Up on the layouts page I’ve added a link beneath the description of various layouts that point to a ZIP file with all the relevant files needed to get things going. That should make life easier for some. My problem will be keeping up to date with any changes I make.
I also want to touch base on what will inevitably be my next release, Plaine. It’s less about a unique or fancy layout and more about teaching or at least creating discussion about the purpose of the web and web pages.
It’s also maybe a lesson in that we might not need as much markup as we use (or I use) in these layouts. I like taking a more minimalist approach to things. And after spending a week on Nausicaa my work on Plaine has been a bit refreshing.
Less is more.
Sometimes.
Anyways. Plaine works on all current Mac platforms. Netscape 7 (but not Mozilla, oddly enough) has some extra padding at the top and bottom of the columns. IE 5.5 and below won’t draw a border around the body element, so the border around the entire page does not show up. The only real way to fix this would be to apply a wrapper element around the content. I do this all the time, but this particular layout is about a more minimalist (in terms of markup) approach. I’m going to give it some thought as to whether or not I want to add this extra bit of HTML or leave it out. I will also work out Netscape 4 compatibility on this layout.
So there you are.
And remember: No matter where you go, there you are.
Following up on a post I made on sIFR a couple weeks back. I gave sIFR a try today to 1) get exposed to it and 2) see if the CSS for the gargoyles layout was causing problems with it.
After some trial-and-error and finally reading the documentation completely, I found a bit of a gotchya.
A quick primer: sIFR is a method for replacing HTML elements with a Flash movie that is dynamically sized to occupy the same area as the replaced HTML element. This is really useful if you want to create headings that use exotic fonts that most users won’t be able to support. ABC News uses this quite a lot.
So the first thing sIFR needs to do it get the dimensions of the element you want to replace. Then it inserts a special flash movie with the given dimensions and positions it over the location of your replaced HTML element. The Flash movie includes logic to scale the font as needed to make it fit within the given dimensions.
Now the big gotchya here is that sIFR isn’t wholly replacing the element, but rather just the content of it. So borders, padding, etc… that you apply via CSS are still there after the Flash replacement. Problem is, sIFR is including the padding and borders in its calculation of what size the Flash movie will be. The result is an element that’s too big to properly fit in the area it’s given. The fix around this is to either remove your padding via CSS, which sIFR easily lets you do by applying a global class of .sIFR-hasFlash. So you include in your CSS something like
.sIFR-hasFlash h1 { padding: 0; border-width: 0; }
And you’re ready to go.
But another method is to defining the existing padding (including borders) in the JavaScript call used to trigger the replacement. If you do this, the sIFR code will shrink the replacement area by the padding values you pass.
The big big catch/gotchya is making sure to include border widths as well as padding. If you just include padding and have a pixel-perfect layout (like the left-hand elements on many of the layouts I have here) you’re going to cause that element to get pushed down below the rest of the page.
As long as you take all of the padding into consideration, you can use sIFR just fine with gargoyles or really any other layout.
Here is an sIFR-enabled example of the gargoyles layout.
Cheers!
The Forgettable Mister Ruthsarian 