web stuff

what's here

Not a lot at the moment, this is the place for odd tricks and techniques I use for web site design. I prefer a simple layout requiring low bandwidth and having a minimum of images. The web site presentation here is built with common tools, there's no database backends or php scripts to get the server into strife.

Using semantic markup, the site's look and feel is controled by a single css file. Exceptions to this are special, one off page sections such as an image or form (at the moment the site has one such form, and one such image). As soon as there are multiple references to a particular casual style, that style is placed into the .ccs file.

Optimising the css file for minimum size and maximum efficiency is a little difficult to explain, but it comes with practice. Adjust and amalgamate settings until they make sense in a logical manner.

CSS menu highlighting, no javascript

Something you wont see with your browser's view source function is how the left panel menu is created on this site without javascript or server side scripting. So here's the source for the left panel SSI include file:

<!-- ssi-file -->
<div id=panel>
<ul class=menu>
	<!--#if expr="$menu = home" --><li class=here>
	<!--#else --><li><!--#endif --><a href="/">home</a>
	<!--#if expr="$menu = awk" --><li class=here>
	<!--#else --><li><!--#endif --><a href="/awk/">awk</a>
	...
	<!--#if expr="$menu = system" --><li class=here>
	<!--#else --><li><!--#endif --><a href="/system/">system</a>
	<!--#if expr="$menu = webstuff" --><li class=here>
	<!--#else --><li><!--#endif --><a href="/webstuff/">webstuff</a>
</ul>
</div>

Gruesome, is it not? The next piece of this old-fashioned magic is how to tell the menu which page we're on. Note that this SSI file is included in all web pages with the blue soft gradient style of this page. The first couple lines of this document's body text contain:

<!--#set var="menu" value="webstuff" -->
<!--#include virtual="/image/panel.html" -->

Now, if you check the last item of the menu list you'll see that when the var $menu has the value 'webstuff', the webstuff menu item gets the <li class=here> tag. This is picked up by the stylesheet rules in the usual manner and thus the main pages get a menu highlight. The main advantage of this technique is a) no style statements in the web pages, b) a single file controls the menu text for the whole site.

If you hit the view source, you'll see no remains of those horrible conditional SSI directives. In fact, if the  text is missing, this file has been preprocessed and compressed to save the web server some delivery time effort. The web site preprocessing and compression techniques and tools are described on the pakweb page.

link hover effect

The apparent raising the link text when you hover the cursor over the link is a simple trick with css, just add a relative movement to the top-left by 1px on hover. Looks good on pages with lots of links, like the kernel boxen information directory page.

The .css rules for the link hover and active effects:

a:hover         {position:relative;top:-1px;left:-1px}
a:active        {background:#f84;color:#fff;position:relative;top:1px;left:1px}

the header background

Three images, each end, and an expanding slice fills the middle, I wrote a small script to generate the images as I couldn't find exactly what I had in mind out there on the Internet. Again, check the pakweb page for the details. And view source to see the three nested divs that control image placement, I found this concept out there on the 'net in a totally different context (how to make rounded box corners). Amazing what one picks up drifting through the many css sites.

CSS submenus

Coming real soon now...

pak-web-make-submenu: script to create the SSI file, submenu.html, in each directory below $doc_root containing directories

using ssi

Hmm, maybe...

which editor?

Vim!

what server?

Apache on a slackware-11.0 linux box.

which hosting provider?

None, this page is served from home over ADSL, until traffic warrants a hosting solution.