Printertilpasset css

Siden er opdateret 23.1.2008

Når en side skal printes ud, er der ikke nogen fornuftig grund til at skulle bruge hverken papirplads eller printerblæk på at få f.eks. menuen med ud.

Alle de elementer på siden, der alene tjener til at brugeren kan manøvrere rundt mellem de forskellige sider, kan med fordel skjules i udprintningen. Det giver et print, der indeholder den information, brugeren ønsker.

For at dette kan lade sig gøre, skal der i sidens <head> indsættes et kald til et særligt stylesheet, beregnet på udprint. Dette kald indsættes efter kaldet til det normale stylesheet, beregnet til skærmen - default-værdi.

Kaldet til printer-stylesheetet laves sådan:

<link href="priner.css" rel="stylesheet" type="text/css" media="print">

Derefter skal der i dette særlige stylesheet indsættes de definitioner, som skal afvige fra visningen på skærm. Derimod er der ingen grund til at gentage de definitioner, der ikke ændres.

body{
background:white;
color:black;
margin:0px;
}

.search{
display:none;
}

.bookmark{
display:none;
}

.printer{
display:none;
}

.home{
display:none;
}

.menu{
display:none;
}

.indhold{
padding:10px;
}

......

Fortsæt selv med de definitioner, du vil sætte for udskrift.

Du ser i eksemplet, at baggrunden er defineret hvid. Der er ingen grund til at udprinte den baggrund, jeg i skærmversionen har lagt under menuen, hvis menuen alligevel ikke printes ud.

Du ser også, at en hel den funktioner, som kun har betydning for navigation på skærmen, er blevet 'blanket ud' i udskriftfunktionen.

Dine brugere har næppe gavn af at f.eks. din søgefunktion bliver udprintet. Den virker alligevel ikke på et stykke papir.

Desuden har jeg for klassen .indhold defineret padding-left:10px, hvor jeg i skærmversionen har padding-left:160px for at give plads til menuen i venstre side.

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2003
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - Printertilpasset css
sidens top
Brugere lige nu: 1
Home Mail