Not-so stupid Web Tricks

Fancy shadowed boxes

great for code examples

div.code {
  background-color: #dddddd;
  border: 2px outset;
  font-family: Courier New, monospace;
  width: 100%;
}

Apache .htaccess tricks

##  error page
ErrorDocument 404 /404.php

## all .html are processed as PHP
AddType application/x-httpd-php .html .htm .php .php3 .css

SetEnv IMAGES http://abulman.bigsites

php_value auto_prepend_file /home/alister/htdocs/_header.php
php_value auto_append_file  /home/alister/htdocs/_footer.php

There's a few things here:

ErrorDocument

Any missing pages are redirected by Apache to the page /404.php - try it!

AddType application/x-httpd-php .html .htm .php .php3 .css

Process all the listed files as PHP - even the .CSS file!

SetEnv IMAGES http://images.abulman.co.uk

Here why I even process the CSS file though PHP. A snippet of the appropriate style sheet demonstrates why.

body, td 
{
  background: silver url("<?php echo $_SERVER['IMAGES']; ?>/backgrn.jpg");
  font-family: sans-serif,cursive;
}

The IMAGES variable is set by the Apache .htaccess file into the environment, where it's picked up in the CSS (or html/php etc) file and easily replaced. It doesn't have to be a full URL of a different sub-domain - it could just be '/images'. (in fact it could well be - http://images.abulman.co.uk/ is the same directory as http://www.abulman.co.uk/images/, the former is served from the Bigsites image server. We swap a little computer processing time for flexibility.

php_value auto_prepend_file /home/alister/htdocs/_header.php
php_value auto_append_file /home/alister/htdocs/_footer.php

Quickly and easily (via PHP) prepend/append a file to whatever PHP-running file is served. This will also include the .CSS file, so a little checking is needed to not work its magic, since any HTML produced would damage the pristeen stylesheet information.

CSS-based moving change-bars

I used two red hyphens to serve as a change bar. They will "float" to the left of the line containing THIS -- word. If you change the window-width to wrap this paragraph of text differently, you can see for yourself.

<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing 
THIS<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>