Effort

Layout Features

Combines dynamic 3-column layout (rigid, pixel-measured1) with stick-to-bottom-of-page footer

Independent, straightforward css background-color, background-image settings for each column

Built-in structures for implementing a wide variety of layout variations, including separated header and true "daylight" separation between columns. Experimentation with variations is made easy by...

PHP-driven CSS

Computations. Dynamic css layouts are often inescapably complex, involving calculated values and value dependencies that make for a delicately balanced css file that is a challenge to alter. In this system, using php, we enlist the computer to do the computing(!). No calculated results are entered "by hand". Instead one enters only the values of the "independent variables" (i.e., basic dimensions, like $header_width=280. These go in the css_vars file, while settings not involved in calculations, like text-decoration, are treated as normal css.) The formulas that use the variables are combined with the straight text css in a hybrid php/css file called main.css.php under the direction of the css_engine which then renders the resulting css text to html (css for this layout: view).

Conditional Settings. We also use php if-then statements to expand the layout possibilities in ways that go beyond calculational convenience. (See css_vars.php and main.css.php)

Browser recognition. There is no need for browser-accomodating hacks in the css file, nor is there any need for proprietary browser-specific html tags. Our css_engine.php loads a browser-specific, hack-free css adjustments file for each (supported) browser that requires such, and appends it to the main css file prior to delivering css to html.

Note: PHP is used to facilitate css but not to construct the layout itself. The layout is entirely the result of css and does not depend upon php, javascript2, transparent images, etc. In fact, you need not link your pages to css_engine.php at all (see stylesheet link in html source). Instead you can use the css engine to experiment and then to generate the final .css text file for your pages.

Tested on the following browsers:
Windows
  Chrome 2.0.1
  Firefox 3
  Internet Explorer 8.0.6
  Opera 9.6.4, 10 (height issues persist)
  Safari 3+
Macintosh
  Safari
Linux/Ubuntu
  Firefox 3

1Satisfies the needs of this site. It is likely not difficult to modify the system for fluid, percent-measured, etc.

2We make use of javascript to force browser refresh for certain browsers that refuse to do so upon window resize, but no scripting is used to construct the layout.

Gratitude

This layout is based on the code found at the following:

positioniseverything.net/piefecta-rigid.html

matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

We also encorporate several invaluable tips from others who are cited in our html/css comments.

We are most grateful to those who have shown the way, and we take full responsibility for the shortcomings of this effort to extend their work.

Invitation

We are in pre-beta (i.e., very rough draft) testing of our online memorials concept that will offer a large selection of artistic themes to customers. Rather than hire one designer, we have created a designer's environment that makes it possible for anyone to become one of our commissioned artists.
No knowledge of HTML/CSS is required. The designer environment is entirely form driven.
The site will charge for creating memorials. If the customer chooses one of your designs you receive a fee.

Theme Designer Registration
(ignore prices and select "demo pay" when you register)

Again, please be prepared for a rough interface (but functioning well enough for you to see how it works). We hope to be fully functional for customers by Spring 2014.

Generosity

Downloads

Free to use and modify
As-Is basis
3
May not be sold

Used by all layouts:

css_engine.php

main.css.php

msie_8.css.php

msie_7.css.php4

mozff.css.php5

opera.css.php

safari.css.php

texture_1.jpg

texture_2.jpg

texture_3.jpg

texture_4.jpg

Generates this layout:

html source

css_vars.php

3 Besides the usual meaning ("you take responsibility for any damage or dissatisfaction resulting from the use of this code") we want to make it explicit that no attempt has been made to make this system self-optimizing with respect to css elements or html markup. It is left to the user to eliminate css and html structures that are made unnecessary by a particular configured layout.

4 IE 7 is not supported, but there is hope that it might be supportable. (Due in part to our limited CSS knowledge we seem to find ourselves, with each passing day, less willing to put out the effort. Ditto for solving lingering height problems with Opera.)

5 This, and some other, browser-specific css/php files are actually blank templates. We include them for the sake of future development needs.