Spider and web


This page contains a few useful tricks that I have used in the past:


This technique uses a image where you view half when not hovering and the over half when hovering over it.

For example consider this image that is 28 pixels high:

Rollover example image

If we create a space that is 14 pixels high as follows and use the pseudo class :hover as shown in the code below:

    height: 14px;
    width: 67px;
    background-image: url(/images/rollover.png);
    background-position: left 0;
    background-position: left -14px;

when hovering over the area below you will see the effect:

This has the advantage in that only one image has to be loaded as therefore the user does not need to wait for a second image to be loaded for the effect to work.

This technique is especially good for menus. It enables the menu to be more decorative and animated.

Sliding doors

This technique enables you to produce graphical buttons and tabs that have variable length, where the graphics at either end is decorative in some way.

On this web site I have used it for the main menu above. It is a very simple technique that requires the use of two overlapping HTML tags.

In this example we are going to use two background images. The left hand side image is for the graphical edge of the button and is not very wide:

Sliding doors left hand side image

And the right hand side image is very wide, wider that the widest button that you require:

Sliding doors right hand side image

The following HTML/CSS code is used to create two sliding doors as shown after the code:

<style type="text/css">

    list-style-type: none;
    position: relative;

#slidingDoorsExample li
    margin: 0;
    padding: 0;
    margin-top: 10px;
    height: 25px;

#slidingDoorsExample li p
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    height: 25px;
    float: left;
    background-image: url(/images/sliding_doors_lhs.png);
    background-position: left top;
    background-repeat: no-repeat;
#slidingDoorsExample li p span
    padding: 5px 20px 0 0;
    margin: 0 0 0 14px;
    height: 25px;
    float: left;
    color: Yellow;
    font: bold 12px Arial, Helvetica, sans-serif;
    background-image: url(/images/sliding_doors_rhs.png);
    background-position: right top;
    background-repeat: no-repeat;

<ul id="slidingDoorsExample">
    <li><p><span>A short bit of text</span></p></li>
    <li><p><span>A longer bit of text - The Quick Brown Fox Jumped Over
                 The Lazy Dog!</span></p></li>
  • A short bit of text

  • A longer bit of text - The Quick Brown Fox Jumped Over The Lazy Dog!

How to debugging positing or what rule is being used?

To find out what CSS rule is being used or where a particular div is being used simply ensure that the background colour is different from the surround areas by changing the rule (in the case of not being sure of what rule is being applied, or add style="background-color: <some colour>" in the tag under question.

Trouble floating?

There are two potential problems with floating areas. The first one is that the area is not where you expect it to be. This is usually due to a miscalculation of the widths of objects. You need to ensure that you take into account the padding and also the border to compute the true width of the areas.

The second problem is that you need to use the clear style. A useful style class is as follows:

    clear: both;

And then place the following after and area where you have used floating areas:

<div class="clear"></div>

The reason for not using:

<div class="clear" />

Is that IE has problems with this notation in this event!

IE - Few tips to get it to work

I have employed two tricks to get it to work with IE. First of all throughout the development process test on IE first. If it works on IE it usually works under Firefox. Secondly if it does not work for IE, the shorthand or /> for a tag can cause problems. Try removing this shorthand and use the long hand version instead