s

3 column layout with 7 variations

A set of 7 variations on the 3 column equal height theme. All full width with header and footer, a mixture of fixed and percentage column widths and no images.




s

Professional centered dropdown with flyout images

A centered dropdown menu, using the latest centering technique, with flyout images




s

Centered sliding doors dropline, dropdown, flyout

A centered dropline, dropdown, flyout menu, using the latest centering technique, with current selection option




s

A Photograph Gallery - revisited and updated

An update to one of my early gallery demonstrations to bring it up to date using the latest CSS techniques.




s

Cross browser tabbed pages with embedded links - revisited and updated

An update to one of my early 'one page' demonstrations to bring it up to date using the latest CSS techniques.




s

Cross browser tabbed pages version 2

A second version of the tabbed pages with a default page open on entry.




s

Photo gallery with links to larger images

A photograph gallery with hover to show large images with linking to full size images or another page.




s

CSS Light Box

A CSS take on the javascript LightBox using hover over thumbnail images




s

CSS Light Box - click version

A click version of the Light Box for all browsers except Safari and Chrome




s

Dropline menu with horizontal scrolling images

A dropline menu which uses sliding doors tabs for the top level and a horizontal scrolling dropline which has images and caption.




s

Text OR associated image hover

A CSS only method of hovering over text OR associated images to highlight both AND grey out other images.




s

Professional Any Width top and sub levels

A simplified method of producing a centered dropdown and flyout menu with variable widths depending on text content.




s

Professional Any Width flyout menu

A flyout version of the 'any width' dropdown menu.




s

Professional Any Width top and sub levels v2

A restyled version that allows dropdowns and flyouts to the left and right. Centered top level list and different color sub levels. Even works in IE5.5.




s

Skeleton menu version 4

The fourth in the skeleton menu series restyled to use recent developments to make it work in all versions if IE from IE5.5 to IE8.




s

IE6 select box bug - iframe shim fix

Applying the iframe shim fix to the variable width dropdown/flyout menu system. Using expressions to add the iframe and styling.




s

Professional Any Width flyout menu with over run

A second 'any width' flyout menu, this time with an over run area and gapping between menu items.




s

Professional drop table menu

A dropdown menu that uses a table to hold the dropdown information.




s

Centering unknown width horizontal menus - revisited

After much searching of the web and with the arrival of IE8, I now have a method of positioning horizontal menus of unknown width left / center / right in the containing element.




s

Professional dropdown flyout left/right menu

A dropdown menu with any width sub menus and the option of left or right dropdown/flyouts.




s

Professional multi-column dropdown

A single level dropdown menu with multi-columns, headings and curved corners using sliding doors techniques for the dropdowns.




s

Photograph gallery using the 'object' element

A photograph gallery using just html/css to switch the contents of an 'object' for browsers that understand and an iframe alternative for IE.




s

Professional anywidth centered dropdown menu

A single level dropdown anywidth menu with dropdown that are centered beneath the top level links.




s

Professional anywidth centered dropline menu

A dropline anywidth menu with droplines that are centered beneath the top level links which are also centered.




s

Professional anywidth centered dropdown/flyout menu

A multi level dropdown flyout anywidth menu with dropdown and flyouts that are centered beneath the top level links, with the ability to have a left or right flyout.




s

Vertical scrolling photo gallery

A conversion of the horizontal scrolling gallery into a vertical version.




s

A mixed gallery using the 'object' element

A mixed gallery using just html/css to switch the contents of an 'object'. The content can be text, images, shockwave/flash and quicktime movie.




s

A Professional droplist menu

A droplist menu with method of setting the number of columns in each list and the option of a full width bottom bar for extra linking.




s

Mini tabbed pages version 2

A version of my mini tabbed pages with the ability to have a tab open on page entry.




s

A film strip gallery

A gallery using a horizontal scrolling filmstrip containing negative/positive thumbnails and landscape/portrait large images with show/hide descriptive text.




s

A film strip gallery version 2

As promised, the previous filmstrip gallery rotated into a vertical format with a few enhancements.




s

Latest centering technique

There have been many methods of centering unordered lists of unknown width, but this is the one I have found to be most robust.




s

A basic anywidth flyout menu

Back to basics to show how to use the latest techniques to produce a flyout menu with the widths of the sub levels automatically sized to fit the longest text.




s

A droplist menu with a sublist feature

A previous professional droplist menu with the additional feature of a dropline heading with droplists giving extra lists within the same dropdown.




s

A droplist menu with top level images and text/links

A droplist menu using top level blocks containing images with text and links.




s

A fix for a problem with divide lines and sliding doors hover graphics

Fixing a problem when having vertical divide lines between horizontal link and using rollover images.




s

A CSS Fisheye Image Menu

A CSS only version of the popular javascript dynamic menu.




s

A CSS Fisheye Text Menu

A similar menu to the previous image version, but this time using expanding text on mouseover.




s

A dynamic CSS image magnifier

A very simple method of magnifying an image using just CSS




s

A CSS Fisheye Image Menu version 2

Another version of the CSS only fisheye menu, this time with expanding images and associated text.




s

A CSS Fisheye png menu

Adding the use of png images for IE6 and giving a smoother zoom animation




s

An image sliding menu

An experimental menu to explore the possibility of having sliding images on hover




s

A single image zoom

Zooming a single image on hover.




s

A vertical flyout list menu

A vertical menu with a 2 tier flyout and the last tier can contain any information you like including images, text and further links.




s

FINALLY a new CSS only dropdwon meu

Afer all this time there is finally a dropdown menu that doesn't use javascript, table, conditional comments, hacks, extra markup and works in all the major browsers including IE6.




s

New definition list menu

A definition list menu using the new menu system to simplify the styling




s

New vertical slide menu

Using the latest techniques for no hacks menus this is a vertical slide version with all the features of the dropdown menu including tabbing, and the sub list stays open when clicking the top level.




s

UPDATE to new click to slide vertical menu

Added a click to open and also a reclick to close feature.




s

Zoom icon with speech bubble

A zoom icon with a popup sub menu in a speech bubble.




s

TTF fonts for web pages

It is now possible to use ttf fonts in your web pages. There are now 5 browsers that support @font-face