Wickham's XHTML & CSS tutorial

Introduction

Cock Pheasant and link to Wickham

View examples in Firefox, IE6 and IE7 to see the differences. The main purpose of this tutorial was initially to show how IE6 and Firefox differ because IE6 will still be used for some time but now shows differences between other browsers as well. IE7 is more like Firefox than IE6 but there are still some differences. Opera, Safari and Google Chrome generally process code in a similar way to Firefox. IE8 RTM is much better than previous IE versions and substantially like Firefox. Google Chrome is based on the same WebKit engine as Safari.

There are introductions to the more common uses of XHTML and CSS coding as listed below. Some of the examples are provided just to show problems, others show solutions that work in Firefox, IE6, IE7, IE8, Opera and Safari. Use the example that suits you.

Index of Contents

Webpage coding generally; stylesheets, text, images, hyperlinks, etc.

Links to useful websites for codes, tutorials, validation and forums for help

A basic webpage

Code for a basic XHTML webpage and CSS Style Sheet

Div boxes - position absolute, relative and fixed

Two and three column layouts

Basic two and three column layouts

Firefox / IE background differences

Firefox / IE6 / IE7 background display differences

Centering divs horizontally and vertically

Firefox / IE6 scrolling div display differences and overflow: hidden

Fixed headers and footers

Header and footer tied to top and bottom of screen

Maximum & minimum width

Maximum and minimum width for a whole webpage, image or text

One layer above another in position: relative or position: absolute

Images with a scrollbar

Scrolling divs, object tag and iFrame for lots of images in a row

Photo album structure

Photo album examples and opening links on the same page

Links from various parts of an image

Lists; unordered, ordered, mixed and definition

Horizontal and vertical dropdown menus using list tags

Popup on hover link and larger image popup from icon

Tables using CSS codes

Forms for submission of data via email

Framesets and iFrames for inserting other HTML pages

Sound and video

Sound and video

Changing color opacity; fixed and on mouseover

Server Side Includes (SSI)

SSI and PHP enable standard sections of code to be inserted in many pages

Some typical Javascript applications

Special effects

Scrollbar colors, 100% height for backgrounds, link colors, highlighted links, different buttons for visited and hover states, table cell color change on hover, animated gifs, favicons, rounded corners, search box, icon color change when scrolling, gradiated background images, border images or shadow images all round a div

Two columns fixed width

Two columns Ready-to-use layout;
fixed width and flexible height with header and footer

Two columns flexible

Two columns Ready-to-use layout;
flexible width and height with header and "sticky footer"

Three columns flexible

Three columns Ready-to-use layout;
flexible width and height with header and "sticky footer"

Notes

View/Source or View/Page Source in browser menu to see all xhtml code.

These examples are for advice only. No liability can be accepted for any untoward consequences of using an example or advice on your web pages.

This website is deliberately simple in layout - even boring - so that viewers looking at the stylesheet or source code for an example are not confused by too many fancy tricks. A simple layout often has more clarity. Less is more.

© Wickham 2006 updated 2009

Robin