PC Services

"From Payroll to Body Scanners"

Some PHP Tips and 'Tricks'

Thinking beyond each page and DESIGNING your web site

Text as pseudo buttons

Often a design would like a button effect - i.e. a link shows one way for when not selected (current page), a different way for when selected and a further different way for when the mouse pointer passes over the link to emphasise to the user it is a link 'pseudo' button. Just like text links can do for link to be visited, a link that has been visited, and mouse pointer over the link.

Preferably you want to achieve a result that does NOT rely on Javascript, Java applets, browser specifics or extra software like Flash.

In order to acheive this it is useful to use the Cascading Style Sheet (CSS) methods of ',hover', '.link' and '.visited', however this means for a 'pseudo' button to appear as a 'button' in a different position, you need an extra 'method' of 'selected'. To really acheive the nearest to a full button effect, you will need to style this 'pseudo' button to at least have a different colour scheme for selected and not selected, most changing of background colour by CSS style sheets involves only changing the background colour around the text itself, not the spaces and effective box of the 'pseudo' button.

A 'selected' style for a text button shows where you are in the web site, so the user does not accidentally go to the same page again by mistake and knows where they want to go next!. Changing the style for 'visited' links saves the users time and makes it easier for them to view your site, without getting frustrated.

This is where colour schemes become important as well as ensuring only the links you want appear in a menu, have these actions. By observing the menu on the left you will note that this currently selected page has a different background to show it is selected, also the text of the menu item does not act as a link, (why have a link to the same page). This means we have one colour scheme that is not altered by the mouse going over the button. On the other menu items the text and background are different colours, (text different for visited and not visited links), also when the mouse pointer passes over the text, it changes colour and adds the underline atribute.

These attribute changes are easily acheived by styling and choice of how text item is displayed. the styling methods are to give the menu items their own 'class' in the style sheet of 'menu' for an unselected menu item, and 'selected' for a selected menu item. Then further classes are created for methods of ',hover', '.link' and '.visited', thus the actions are covered. An additional formatting option is done of NOT adding the link details to the menu item.

You will find various pages on the web for doing this with an HTML unordered list tag pair (<li></li>), however this is only really useful for horizontal menus that have menu items of different widths as the background colour will only change around the text not the area encompassed by the list tag pair, and requires lots of style sheet formatting for changing the bullet image, line breaks, spacing and other attributes; which may well fail on different browsers and screen resolutions.

I prefer to use table cells as widths can be set using "%" of table width/screen or by using the text and the 'NOWRAP' attribute, remembering to add a non-breaking space on the end of at least the longest menu item to ensure a sensible gap to the right of the text. A typical menu item would look like -

<TR>
  <TD NOWRAP class=menu><A href="page.htm">Link name&nbsp;</A></TD>
</TR>
<TR>
  <TD NOWRAP class=selected>Link name&nbsp;</TD>
</TR>

The astute coders amongst you can see this is relatively easy to do in iterative looping through tables or results from a database. There is very little to add to each menu item as a text button to make this work, when navigating complex sites keeping the paths to files can be more complex, but that is dealt with later in the example section.

With judicious use of menu items like 'Home', or 'Introduction', or 'Welcome', having lots of non-breaking spaces (&nbsp;) it is possible to force the width of a vertical menu to always be the same whatever the menu width of longest item is. This method allows for items to have spacers by use transparent images or blank entries ( ' &nbsp; ') or headings in either style without a link tag being used.

This achieves a simple result, which is NOT browser, operating system or extra software dependent. Also the text will scale more easily with browsers and screen resolutions.