Stijlsheet voor printen

<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />

Reacties

1. Henk van de Kamer says:

   16-07-2008 at 11:36:28 Reply

   Als ik in Firefox de print preview gebruikt, zie ik geen verschil met hoe het er online uitziet. Enige wat verdwenen lijkt te zijn is de kop, ofwel het begint meteen met de berichtjes…

2. Roland says:

   16-07-2008 at 15:18:17 Reply

   Op dit moment zijn er inderdaad weinig verschillen, alleen de header, het navigatieblokje en de footer ontbreekt. De header ontbreekt omdat ik heb gezegd dat de achtergrond wit moet zijn. Ben er nog niet helemaal tevreden mee overigens, zo moeten de code blokjes nog netjes afgebroken worden en op de volgende regel doorgaan. Dit is eigenlijk ook gewoon een experimentje geweest om te zien hoe dit werkt .

3. Henk van de Kamer says:

   17-07-2008 at 13:53:18 Reply

   De reden dat ik er naar keek was het feit dat ik een tijd terug deze al eens op mijn lijstje had gezet voor Het Lab. Daar wil ik eigenlijk zorgen dat dan het menu verdwijnt. Kortom ik ben heel benieuwd naar het resultaat en hoe het werkt. Scheelt mij weer in het zelf uitzoeken .

4. Roland says:

   17-07-2008 at 14:27:53 Reply

   Het werkt als volgt. In de header.php heb ik een verwijzing naar print.css opgenomen voor mediatype print. Het bestand print.css heeft de volgende inhoud:

   @media print {
   /* hier begint de eigenlijke css */
   body {
           background:white;
           font-size:10pt;
           margin:0;
   }
   .narrowcolumn {
           display:none;
   }
   .widecolumn {
           margin-left:0;
           float:none;
           width:auto;
   }
   .navigation {
           display: none;
   }
   blockquote, table, pre {
           page-break-inside: avoid;
   }
   
   /* hier eindigt de css */
   
   }

   In mijn geval zit het navigatieblokje in de class .navigation, door deze in te stellen op display: none wordt deze verborgen bij het afdrukken. Met dezelfde truc verberg ik ook de footer. Ook kun je in het stukje zien dat de achtergrond van de pagina op wit wordt ingesteld, zodat de pagina niet opeens met een kleurachtergrond uit de printer rolt terwijl gebruikers dat niet willen.

   Als je alleen bepaalde div’s wilt verbergen op een geprinte pagina, dan kun je dit als basis gebruiken. Dit is niet mijn volledige print.css bestand, maar dit zijn wel de belangrijkste stukjes er uit.

   In jouw geval zal het dan voldoende zijn om:

   • de huidige regel die je voor blue.css hebt aanvullen met media=”screen”
   • regel toevoegen voor de print stylesheet met daarin media=”print”
   • in de print.css de class .menu in te stellen op display: none

   Van daaruit kun je dan verder werken. Hoop dat je er iets aan hebt!

5. Henk van de Kamer says:

   13-08-2008 at 12:41:20 Reply

   Ik heb de laatste tijd wat andere zaken aan mijn hoofd gehad, maar ik ga hier zeker eens naar kijken!