These files contain examples of techniques and tricks that I thought might be useful to other web designers. They are simple no-frills pages boiled down to the core functional elements. You are free to learn from them, reverse-engineer them, copy them... Do what you like with them.
Please check the instructions page, if you need more help please use the support form.
- CSS Centred Content
- Horizontally centred page which allows absolutely positioned and floated elements etc. within the centred area.
- CSS Variable Centred Content
- Horizontally centred page which uses a max-width property to avoid unreadably long lines of text but can also be viewed on narrow screens.
- CSS Rounded Corners
- Give <div>s nice rounded corners, just like you used to do with tables.
- CSS Rounded Corners 2
- Another technique for creating rounded corners. this improves on the first by using only background-images for the rounded edges.
- CSS/Javascript Pull-down Menu
- This pull-down navigation/menu is viewable on all devices and has a delay before the pull-down disappears.
- CSS/Javascript Rollover Form Buttons
- Use CSS backgrounds and javascript to create roll-over buttons that work in ALL browsers and accessible to all users.
- CSS Link Buttons
- Use CSS to create button-like accessible links for navigation etc.
- CSS/Javascript Collapsible Menu
- Use Javascript, Cookies and CSS to create a collapsible menu.
- CSS Left-hand Pull-down Menu
- This left-hand navigation model usess CSS to position the pull-down menus next to the triggers no matter what text size or re-flowing of text.
- CSS Image/Text Headings
- Use images for your headings with text for old browsers, printing and search engines, with no more than a heading tag and a custom class.