Iedereen kent het waarschijnlijk wel, je wil iets gaan afprinten van het internet maar als je dan het afdrukvoorbeeld bekijkt is het één grote rommelhoop. Voor deze tutorial baseer ik me op de layout die ik maakte in de 3 kolommen layout tutorial.

Als we die layout eens in afdrukvoorbeeld bekijken krijgen we dit.

Zoals we op bovenstaande afbeelding zien is dat geen mooie pagina om af te drukken. Neem bijvoorbeeld het linker- en rechtermenu. Deze zouden bij het printen eigenlijk helemaal niet te zien moeten zijn omdat de gebruiker meestal enkel de hoofdtekst wil afdrukken die je in het midden van de pagina ziet.

Hoe beginnen we eraan

(Gebruik 3 kolommen layout tutorial om deze tutorial op voort te bouwen. Onderaan de pagina kan u het voorbeeldbestand downloaden.)

Eerst maken we een kopie van onze gewone stylesheet, deze kopie noemen we dan bijvoorbeeld printstyle.css. In de HTML pagina koppel je in plaats van de gewone stylesheet de printstylesheet aan de pagina.

Nu pas je de printstylesheet aan zoals je het zou willen zien in het printvoorbeeld. Let erop dat als je een bepaalde tag niet wil zien in het printvoorbeel, dat je deze niet verwijderd maar dat je deze gewoon de optie display:none; geeft. (Bijvoorbeeld bij het links- en rechtsmenu.)

Na wat restylen aan het css bestand kom ik tot deze print stylesheet.

printstyle.css code

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#total {
width: 100%;
margin-right: auto;
margin-left: auto;
}
#header {
display:none;
}
#leftContent {
display:none;
}
#centerContent {
width: 100%;
}
#rightContent {
display:none;
}
#footer {
font-size: 12px;
font-weight:bold;
color: #333333;
height: 14px;
width: 800px;
clear:both;
}
p {
padding: 0px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 7px;
margin-left: 0px;
}
h1 {
font-size: 36px;
font-weight: bold;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}

Om nu de print en de gewone stylesheet aan het html bestand te koppelen doen we het volgende. Normaal hebben we maar een regel nodig om onze stylesheet aan het html document te koppelen, bijvoorbeeld

0

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

Maar in plaats van die ene regel gaan we er nu 2 plaatsen.

0
1
2

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

Het attribuut media dat we gelijk op print zetten, duidt erop dat die stylesheet enkel gebruikt gaat worden om te printen. Als we nu een afdrukvoorbeeld van de pagina bekijken krijgen we het volgende

Goed print voorbeeld

U ziet meteen dat we nu een proper en overzichtelijk printvoorbeeld krijgen.

Een voorbeeld hiervan kan u hieronder bekijken.
3 kolommen CSS layout met goed printvoorbeeld

Stem of voeg toe aan :