Print Friendly Pages  -  May 12, 2008

CSS (Cascading Style Sheets) have been around for a long time now, allowing developers and designers to separate their code and control the styling of a website from an external source. Many websites use CSS to control their site layout and design, however many do not use CSS to its full potential. Tino (one of our programmers) gave an example last week, using CSS to produce a drop down menu. A little known feature in CSS is the ability to set different designs for different devices.

The following table describes each of the various media types that can be specified:

All For any device
Aural For speech synthesisers
Braille For Braille tactile feedback devices
Embossed For paged Braille printers
Handheld For handheld devices
Print For printed pages
Projection For projectors
Screen For colour computer screens
TV For television

I find the “print” media type the most useful, especially when designing pages that are likely to be printed out, such as product specifications, reports and order confirmations. Use the following HTML code to specify the media as print:

In the printstylesheet.css file you may now want to specify a different position for the logo i.e. at the top left hand side of the page and to remove the navigation box by setting display to none. Below is example code to implement this:

#headerLogo {
position: absolute;
top: 0px;
left: 0px;
height: 80px;
}

#navigation {
display: none;
}

Sam Rutley
Developer

Sam Rutley at 4:27 pm

No Comments

No comments yet.

Leave a comment