Layout

[active_apathy]

My recent project, to find a way to get a ComplexSpiral-like effect on LJ, has led to my new layout. It works properly for most current browsers, except IE/Win and Opera (I think). Amaya has a couple of issues with the code, but most like that's from the HTML that LJ gives me - even Trident (the IE/Win rendering engine) manages to render it properly.

It looks kinda ok in IE/Win. That's called 'degrading gracefully'. In other browsers (like Firefox), there's only a tiny patch that's different, but it rather dramatically changes the look of the page. The original image was Tony DiTerlizzi's pic of the Painter that's used in Artists' Alley over at Planewalker.com.

The most beautiful bit of it, though, is that the whole background effect adds roughly as much to page weight as would a large animated icon - a whole 38.6 KB.

Comments

[tephra]

Sweet layout, I assume that it's done with semitransparent backgrounds for block elements?

Here from that metaquotes thread with the fake link text where you mentioned a neat trick in your layout. :)

[active-apathy.livejournal.com]

Not quite. All four background images are here. I think you've probably done the resize-and-scroll thing. Before I explain, you might want to go and have a look at the stylesheet here. I'll wait.





All my CSS is the non-indented stuff down the bottom. The rest was nicked from LJ so my external sheet could still render the basic layout properly.

The trick behind the backgrounds is in the CSS1 specification - the background-attachment: fixed property means that the image is fixed with respect to the viewport - that is, the space in your browser window where the page is rendered. All four of those images are stacked up on top of each other, but you can only see them within their elements, depending on which one happens to be on top. The body doesn't have a background, because 4 backgrounds is enough and I thought the solid indigo border looked prettier.

That's why it doesn't work on IE/Win or Opera, because they fix the background to the element - it works for the body, but not for anything else. The CSS trick that keeps IE/Win and Opera relies on a parse bug known as the Owen Hack - that's the head:first-child+body bit at the start. The 'first-child' pseudoclass means 'match this element if it's the first child of its parent'. The + means that the element to its right directly follows the one on its left. In any valid xHTML document, the body element always immediately follows the head element that's the first child of its parent.

If that's not very clear, then just say so and I'll explain more for you.

[active-apathy.livejournal.com]

Oops. Missed a bit. IE/Win and Opera don't understand most pseudoclass selecters (they only understand the anchor ones), so they see 'invalid' style declarations and ignore them. That's why it stops them from breaking the layout.

[tephra]

Ah, I hadn't noticed the differences in the graphic and had assumed what I was seeing was the result of a semi transparent color overlay. Seeing what I expected rather than what is there.

That's a really cool effect, and other than being a bit confused about the first-child thing I even understand how it's done. Could you maybe explain the syntax of "head:first-child+body div#content" as an example? I've never delved that far into CSS (maybe I should get a good book on it rather than just googling whenever I need to do something? ;)

[active-apathy.livejournal.com]

Not a problem at all. We just need to remember that HTML basically uses a tree to represent what's going on - that is, you have:

         html
        /    \
    head      body
    /  \         |
title  link  [content]

So, let's go through the tricky bits first.
: indicates a 'pseudoclass', which are special classes (like the ones you can make with tag.class) assigned by the browser. Examples include :hover. IE/Win only supports pseudoclasses for links, and then only :link, :visited, :hover and :active.
:first-child is a pseudoclass for an element that's the first child of its parent.
+ shows an 'adjacent sibling' - that is, the elements on either side of the + have to be next to each other in the tree, and have the same parent.
# indicates an id or name. div#content will match <div id="content" ...>
Finally, tag1 tag2 means that tag2 has to be a descendant of tag1, though it doesn't matter how many levels of the tree you have to go through to get there. For a direct descendant, you need to use tag1>tag2, but that's not supported by IE.