An exercise in CSS, transparency and Javascript

Building a site from the ground up

The object

The object of this exercise was to produce an accessible and visually attractive site using Valid XHTML 1.0 strict, valid CSS and Javascript.

I wanted the pages to be semi-transparent and to sit on top of a large background image which could be seen through the page's content. I also wanted to use background rollover images for the main navigation links.

The markup

The markup I used was straightforward xhtml inside a basic three div layout: sidebar, content and footer all contained within a wrapper div

<div id="wrapper">
<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

The sidebar div contains an unordered list and an ordered list for the menus, the content div contains simple markup using h1, h2, h3... p, img etc. and the footer contains the copyright and two site validation links.

The Javascript

The increase the accessibility of the site, I added a script to enable users to increase or decrease to font sizes, revert back to the default font size and switch between left-aligned and justified text throughout the site.

I also added a stylesheet switcher to enable users to change the stylesheet used on the site. The users preference of font size, text alignment and stylesheet are stored in cookies.

It was also necessary to include an external links script for opening links external to the site in a new window as target="_blank" is not valid in XHTML 1.0 strict.

Font styling

Before styling individual elements, I added a font size and family to the #wrapper div in the stylesheet:

#wrapper {font:62.5% Verdana,Arial,Helvetica,sans-serif;}

A relative font size was then added to all the other elements along with colour, weight, alignment and decoration.

The basic layout

The wrapper div was given a fixed width and centred on the screen by using:
body{text-align:center;} and #wrapper{margin:20px auto;}

The sidebar div was given a fixed width and floated to the left side of the wrapper:
#sidebar{float:left;}

The content div wass given a left margin equivalent to the width of the sidebar div:
#content{margin-left:166px;}

The footer div was cleared to make it sit below the sidebar and content divs:
#footer{clear:both;}

Borders, margins and padding were then added to the elements and IDs to give the basic layout.

The full monty

Before working on the transparency, I added my large background image to the page and fixed it to the bottom and left of the window.

To make the wrapper div semi-transparent, I added a small, repeated semi-transparent .png image as a background image to the wrapper:

#wrapper{background:url(../images/transbackground.png);}

This works in Firefox and Opera but to get the transparency effect in IE I added a conditional filter to the markup:

<!--[if IE]><style type="text/css">
#wrapper {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=72);}
</style><![endif]-->

To produce the background image rollovers I used a {display:block;}, also giving a width and a height to the element.

A background image was then added to each invividual "a" element along with a corresponding rollover background image to each "a:hover" pseudo-class selector.

To complete the styling I added "position:relative;" to the images to stop them appearing transparent in IE and added a background colour, padding and a border to all the images.