Print Friendly Pages - May 12th, 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

Posted in CSS, Web Design | No Comments »

Css Font-Face - Src: url - May 2nd, 2008

That’s right it is now an option in CSS that you don’t have to rely on your standard fonts that come pre installed. For a long time this has been a big drawback for web designers. If you wanted to use a fancy font or break from the norm and not use a standard font then you have always had to place your text in an image.

Well from now on you won’t! As long as all your end users use Safari! So this doesn’t make a massive story because you are still limited but its progress, and it’s in the right direction.

You can now use any font you like by specifying the source of the font in your Css file. If you use a non standard font then you can upload the font file to your server and in your CSS file specify its path just like you would with an image.

First you need to define the font:

[Copy to clipboard][-]
View CodeCSS
1
2
3
4
5
6
7

@font-face {
 
font-family: spacial font;
 
src: url(’special.otf’);
 
}

You need to repeat this for any bold or other versions of the font you will use. Then you can use the font in your normal css statement:

[Copy to clipboard][-]
View CodeCSS
1
2
3
4
5

p {
 
font-family: Special,sans-serif; font-weight: normal;
 
}

Gary
Web Designer

Posted in CSS | No Comments »

« Previous Next »