Style sheets – part 3

Style Sheet Summary

The first rule in the style sheet sets the margin and padding for various elements to zero, getting all of the browsers to work similarly.


body, ul, li, ol, dl, dt, dd, div, form, fieldset, label, input, select, img, p, blockquote, pre, h1, h3, h4{margin:0; padding:0;}

The style sheet sets the background image of the border by comparing the body id and footer styles. The default footer background is set on the home page.

#footer {height:150px;background:#fff url(images/home_08.gif) no-repeat top left;

For example, the contact page’s body tag has the id=”contact.” The style sheet says, when the body has an id=”contact”, in the footer, use the following image as the background, over-riding the original.

#contact #footer {background:#fff url(images/contact_08.gif) no-repeat top left;}

Language variations

A similar technique is used to change the colors for different languages. A class is applied to the body tag, for example class=”English”. For pages written in Inuktitut, the body class=”inuk”. The style sheet has a set of styles to change background images and colors for those elements within pages with this class:


/*special colors for inuk language*/
body.inuk #header {background:#fff url(images/bg-header-inuit.jpg) no-repeat top left;}
body.inuk #nav {background:#916926; font-size:90%; } body.inuk #nav li a {text-transform:capitalize; }
body.inuk #nav a:hover, body.inuk #nav a.here {color:#916926;}
body.inuk #content { background:#fff url(images/bg-content-inuk.png) repeat-y top left;}
body.inuk #footer {background:#fff url(images/bottom-inuk.gif) no-repeat top left !important;}
body.inuk .pullquote {background-color:#916926;}

Print style sheet

Museum web sites are a contrast of presenting content and preserving intellectual property. They serve the community yet protect the rights of individual artists. The print style sheet can give museums, and web sites in general, the ability to target the information a person receives on-screen and on the printed paper.

For example, a visitor finds an image they would like to use on their web site or product packaging in a museum’s online collection. They print the page to show their manager, but how do they contact the museum? What are the copyright details? What is the action they should take?

In the footer of every page, I have placed a div with the class=”print”. The basic style sheet hides anything with this class (display:none). However, the print style sheet displays these elements and they will be printed as if visible on the screen. The printed information in the Inuit site includes the contact information for the organization.


<div class = "print" >
This has been printed from the Inuit Heritage Trust web site. For more information, please contact us at:
<dl>
<dt>In person at our Iqaluit Office:</dt>
<dd>Parnaivik Building First Floor Right Entrance, Office #103& #8212; We always love to have visitors!</dd>
<dt>By correspondance:</dt>
<dd>Inuit Heritage Trust Incorporated</dd>
<dd>P.O. Box 2080</dd>
<dd>Iqaluit, NU</dd>
<dd>X0A 0H0</dd>
<dt>By phone or fax:</dt>
<dd>Telephone (867) 979-0731</dd>
<dd>Facsimile (867) 979-6700</dd>
<dt>Or by Email:</dt>
<dd>< a href = "mailto:heritage@ihti.ca" >heritage@ihti.ca</a> </dd>
</dl>
</div>

The print style sheet also hides the navigation element, changes the font to Times New Roman, the font size, margins, and hides elements that the visitor does not need on a printed page.

For more information on creating customized print style sheets, visit CSS Design: Going to Print (http://www.alistapart.com/articles/goingtoprint/)

Re-design Time

A new style sheet was created to show the flexibility of the standards-based web design. The new design uses the entire width of the screen, the navigation is converted to tabs under the header, the language navigation is in the top right, and the header1 information has an image of an Inuit girl as the background. This new design required no modifications to the original code.

screenshot of a completely new design for the IHT web site

Summary

This site should be pretty easy to maintain and finish converting. When creating the alternate language pages, change the body classes. The second line of each page should also define the language of the content:

< html lang = "IU" xmlns = "http://www.w3.org/1999/xhtml" >

Good luck with converting your original pages to the new format. You should find your future programming easier and the site more accessible and user-friendly.

Ted Drake

Drake Web Services
Brian Rountree
Superior Pixels