category css

Webpagina print layout in css beheersen

0

Aphichat
okt 28, 2008

1 Star2 Stars3 Stars4 Stars5 Stars

Tags: ,

Je kan een html pagina voor het printen met css vormgeven door bijvoorbeeld fonts zoals Times te gebruiken om de leesbaarheid te verbeteren.

Of je hebt een bepaalde div die op het web 200 pixels breed wordt weergegeven, maar die wil je graag op volledige breedte op je A4 hebben.
Ook kan je bepaalde stukjes tekst weglaten bij het printen, zoals de footer van je website.

Ik heb hier een voorbeeldje wat je met @media print code kan doen!
Ten eerste heb je een css bestand nodig. Of je kan het ook direct vanuit je style tag oproepen.
In ieder geval komt @media print onderaan of bovenaan voor het overzicht in je css code.
Verder heb je de mogelijkheid om een bepaalde div onzichtbaar te maken, door {display: none;} te gebruiken.
Bekijk de code-comments voor verdere uitleg!

body { /* standaard css voor beeldscherm */
background: #ffffff;
color: #DD0000;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#content {
width: 200px;
border: 1px solid #888;
padding: 10px;
margin: 0 auto 0 auto;
}
div#footer {
text-align: center;
color: #000;
}
/* == begin print stylesheet == */
@media print {
body {
color:#000; /* text kleur naar zwart */
font-family:"Times New Roman", Times, serif;
/* lettertype veranderen naar Times voor betere leesbaarheid */
}
div#content {
border: none; /* border weghalen! */
width: 100%; /* breedte over gehele a4 laten afdrukken */
}
div#footer {
display: none; /* ook kun je dingen niet mee laten printen! */
}
}

01. HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS print layout</title>
</head>
<body>
<div id="content">
<h1>Printbestand</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis eget magna sit amet nunc pellentesque blandit. Morbi consequat.
Donec tincidunt accumsan quam. Integer mattis viverra ligula. Cras ipsum. Mauris dictum. </p>

<p> Ut elit. Praesent tempus quam eget eros. Nunc lectus leo, egestas in, commodo ut, congue ac, felis.
Nam tincidunt ante ut leo. Nunc sit amet augue ac turpis sollicitudin eleifend. Quisque porta quam eu elit.
Quisque euismod, ante in facilisis porttitor, nisi erat euismod lacus, ut faucibus elit lacus vitae enim.
Sed condimentum diam vel nisl.</p>
</div>
<div id="footer"><p>Heey ik ben maar een footer, en hoor ik niet bij het afgedrukte versie!<br />
© artsmixer.com</p></div>
</body>
</html>

  1. No Comments

    Er zijn nog geen comments geplaats. Wees de eerste!