Iris style

[DCElliott]

Bindel has accused me of a certain lack of subtlety in Ghanga style.

I have made some modifications to suit his tender sensibilities and give you Iris style.

It is best seen in Gecko but has been tweaked for IE as well.

C'mon, get in touch with your feminine sides.

Iris.zip has:
Iris.css
Iris-annotated.html showing the divs
Iris.html without the annotations but still with content
iris-bg.gif a background image - and the ONLY graphic image used - the transparency effects are all CSS, providing you have IE 6 or Gecko browser.

Who's yo daddy, who's yo daddy?

[DCElliott]

Thought I should post a screenshot of what it looks like in Gecko.

[Zero Angel]

Abso-fricken-lutely amazing, David. How did you size those empty transparant divs anyways?

I was looking through the code, and had a heck of a time finding the portion that actually sized those divs.

[DCElliott]

The CSS is somewhat documented, in part to Joel (ByteWizard's) efforts on Ghanja. I always break my code up into: placement and sizing|colors etc.|fonts etc.|other elements. Here is the section that does the layout:
/*Placement and sizing*/

html {/*Browser Hack proposed by Tantek Celik to correct
IE5 box model misinterpretation*/
voice-family: "\"}\"";
voice-family: inherit;
height:100%; margin:0; padding:0;
min-width:600px; min-height:400px;
}
body {height:99%; margin:0; border:0; padding:.5%;
overflow:hidden;
}
#banner {display:block; height:13%; width:auto;
padding-left:24%; margin:0; overflow:hidden;z-index:10;
}
#middle {display:block; height:72%;width:auto; margin:.5% 0;
z-index:10;
}
#footer {display:block;z-index:10; overflow:hidden;
height:13%; padding-left:24%; width:auto; margin:0%;
}
#content {display:block; position:absolute;
left:auto; right:.5%; top:17%;
height:65%; width:75%; overflow:auto; margin: 0;
z-index:100;
}

/*A top of auto places the element with no offset up or
down the page. (It is used in positioning
sometimes because top and left take precedence over bottom
and right. Sometimes you have to
say top:auto and left:auto if you are specifying
right:xxpx or bottom:xxpx)*/

#nav {display:block; position:absolute;
top:0; left:0; width: 20%; height:92%; margin:2%;
text-align:center; z-index:100;
}
/*block to contain buttons overlying the nav
background*/
#button
{display:block; position:absolute;
top:16%; left:3%; width: 18%; height:34%;
text-align:center; z-index:200;overflow:hidden;
voice-family: "\"}\"";
voice-family: inherit;
left:4%;
}

/*block to contain site info in a scrolling box below
the buttons*/

#blurb {display:block; position:absolute;
top:52%; left:3%; width: 18%; height:42%;
text-align:left; z-index:200; overflow:auto;
voice-family: "\"}\"";
voice-family: inherit;
left:3%;width: 19%; line-height:100%;
}

There is some supplementary code in the HTML itself to "fixup" IE peculiarities:<!--[if IE]>
<style type="text/css" media="screen">
/* hacks for IE - wish I didn't have to use them */
html {overflow:hidden}
body {height:99%; overflow:hidden; margin:0;padding:.5%;}
#content {top:14.5%;right:.5%;padding-right:1%; width:75%;height:70%;}
h1, h2, h3, h4, h5 {padding-left:0; margin-left:0}
#banner {margin-bottom:.5%}
.apart {width:94%;}
</style>

[DCElliott]

Here is a second screenshot, this time in IE 5.5. Although it lacks the rounded boxes, I have used a couple of filter effects in the nav area with CSS shadows.

Notice how the content and other stuff "squishes" gracefully.