Phone and FAX
Tel: 0845 121 1194
Fax: 0845 121 1195
Archives:
Meta:
Categories:
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 |
| 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
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:
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:
View CodeCSS | |
1 2 3 4 5 | p { font-family: Special,sans-serif; font-weight: normal; } |
Gary
Web Designer