HOME -> CSS_ARTIKLER -> 01-css-print Tirsdag, 27. Juni 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2004 - Opdateret Jan. 2006

Printervenlige sider

Artiklen beskriver en fremgangsmåde for udarbejdelse af printervenlige sider.

I visse situationer er det rart med printervenlige sider. Disse kan du lave på en nem og faktisk meget simpel måde.
Det eneste du har brug for er to stylesheets. Et til dit normale layout og et til den printervenlige udgave.
Begge stylesheets kaldes på næsten samme måde, med den undtagelse at du tilføjer den printervenlige følgende: media="print".
Og udgaven til skærmen tilføjes media="screen"

Link til det normale sheet:


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



Link til den printervenlige udgave:


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



Dit normale stylesheet kunne se ud som følgende:


#venstre {
position: absolute; top: 10px; left: 10px;
border: 1px solid #000000;
height: 400px;
width: 150px;
font: 10px verdana, arial, sans-serif;
color: #000000;
padding: 10px;
}
#indhold {
position: absolute; top: 10px; left: 180px;
border: 1px solid #000000;
height: 400px;
width: 400px;
font: 10px verdana, arial, sans-serif;
color: #000000;
padding: 10px;
}



Den printervenlige udgave ændres en smule og får følgende udseende:


#venstre {
display: none;
}
#indhold {
font: 18px verdana, arial, sans-serif;
color: #000000;
}



Dit html dokument kan herefter have følgende struktur:


<html>
<head>
<title>Printervenlige sider</title>
<link rel="stylesheet" type="text/css" href="normal.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>

<div id="venstre">
Hej, og velkommen til min side!<br /><br />
MENU<br />Link 1<br />Link 2<br />Link 3<br />
<p> </p>
<input type="button" value="Print denne side" onclick="javascript:window.print()">
</div>

<div id="indhold">De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke .... </div>
</body>
</html>



Vis som eksempel

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top