The CSS, HTML, and JavaScript Lab
This is a collection of experiments, methods, tips and tricks related to HTML, CSS, and JavaScript that may or may not come in handy some day. Some of these techniques are based on ideas of my own, others are based on stuff that I’ve come across on the web, on mailing lists, in books, and other places.
Please note: Most of these techniques are very old and obsolete and are left here mostly as examples of how you could solve things around the mid 2000s.
If you want to use any of these techniques, go ahead, take a look at the source to learn how it’s done. However, for the techniques that use images I ask that you please create your own graphics.
- CSS Frames
- The look of frames without using frames.
- CSS Tabs, separate lists
- A two-level tab menu based on separate unordered lists.
- CSS Tabs, nested lists
- A two-level tab menu based on nested unordered lists.
- CSS Tabs, nested lists (Listamatic 2)
- A two-level tab menu based on separate unordered lists. Based on the HTML from Listamatic 2.
- CSS Teaser Box, fixed width
- A fixed width box with rounded corners. It uses no extra markup and just one image.
- CSS Teaser Box, flexible width
- A flexible width (and height) box with rounded corners. It uses very little extra markup and two images.
- Dropshadow
- A simple dropshadow effect.
- Equal height boxes with CSS
- Side-by-side elements that behave like table cells.
- Equal height boxes with CSS, part II
- Side-by-side elements that behave like table cells. Some workarounds to prevent Internet Explorer from breaking down completely.
- Flexible box with custom corners and borders
- A flexible width (and height) box with custom corners and borders.
- Horizontal centering
- A very basic example of horizontal centring with CSS.
- Horizontal and vertical centring
- Horizontal and vertical centring with CSS.
- Inverted Sliding Doors Tabs
- Upside down tabs based on the Sliding Doors technique.
- News list
- A list of vertically expandable boxes with rounded corners.
- Rounded corners
- An older example of a box with rounded corners.
- Soft dropshadow
- A somewhat limited way of creating a nice and soft dropshadow.
- Styling form controls
- Examples of CSS applied to form elements.
- Transparent custom corners and borders
- Create a resizable box with custom, transparent corners and borders and no extra markup. A much improved version of the Flexible box with custom corners and borders demo.
- Two column CSS layout with full width header and footer
- Fixed width, centred horizontally.