[CSS]Pagina printen

[Dr_Frickin_Evil]

Ik ben met een pagina bezig die helemaal is opgebouwd uit verschillende divjes, absoluut gepositioneerd over het scherm. De daadwerkelijke content staat in een div welke op zijn beurt weer in een andere div staat:

code:

<div id="container">
    <div id="include"><? include($section_array[$section][0]); ?></div>
</div>

Nu moet het mogelijk zijn om de inhoud van de pagina te printen, zònder de aparte knoppen en menubalken uit te printen. Dit doe ik als volgt, ik incl een printer.css, met daarin:

code:

@media print  {
    #footer, #header, #login, #menu1, #menu2, #menu3, #select, #selectpic, #scrolldown, #scrollup { 
        display: none; 
        }
    
    #container {
        border: none;
        height: 100%;
        left: 0px;
        overflow: auto;
        overflow-y: auto;
        top: 0px;
        width: 100%;
        }
}

Dit zou in principe moeten werken, maar, bij het opstarten van m'n browser wordt, als javascript aanstaat, voor element "container" de overflow op "hidden" gezet. Gevolg hiervan is (zo ziet het er althans naar uit), dat de overflow zoals door javascript gezet, de "overflow: auto" uit printer.css overruled, met als gevolg dat er steeds een heel stuk van m'n content wegvalt bij het uitprinten (print preview that is ). Hoe kan ik dit nu verbeteren?

Een mooiere oplossing zou eigenlijk zijn, dat echt alleen id "include" wordt afgedrukt. Het werkt (natuurlijk) niet om #container ook display: none te geven, en #include display: block. Maar dat zou wel de mooiste manier zijn. Iemand een idee daarvoor?

(Ik kan natuurlijk best een popupje maken ofzo, waarin ik de te includen php-file open, maar dit is een veel mooiere manier vind ik.

Ik heb de site ook met mozilla bekeken, en met Javascript uit. Dan werkt het in principe wel goed, maar dan heb ik het (rare) probleem dat de pagebreaks niet werken. Hij print gewoon totdat het niet meer past, en stopt dan. Hoe verhelp ik dat?

[ Voor 16% gewijzigd door Dr_Frickin_Evil op 30-01-2004 23:25 ]

[BetuweKees]

je kan de proberen of het gebruik van de !important postfix werkt (dan krijg je dus iets als #mijnid { display: block !important; } )
ook zou je voor voor het tweede ding wat je aangeeft (enkel content div) kunnen proberen de container div op visbility: hidden; te zetten en de content div absoluut over je print kunnen positioneren (position: absolute; left: 0; top: 0;)
daarnaast vind ik het zelf wel fijn om daadwerkerkelijk printoutjes te maken, maar dan wel virtueel in pdf bijvoorbeeld. vind ik vaak betrouwbaarder dan de print preview.

[Verwijderd]

Zet in een style sheet met duidelijk aangegeven 'media=screen' een CLASS neer of verwijs naar de verschillende DIVjes met overflow:hidden; vervolgens zorg je met JS dat die class op verschillende elementen gezet wordt, zodat ze verdwijnen.

Het style sheet wat 'media=print' heeft zal er nu geen last van hebben.

[crisp]

Dr_Frickin_Evil schreef op 30 januari 2004 @ 22:56:
[...]
Dit zou in principe moeten werken, maar, bij het opstarten van m'n browser wordt, als javascript aanstaat, voor element "container" de overflow op "hidden" gezet. Gevolg hiervan is (zo ziet het er althans naar uit), dat de overflow zoals door javascript gezet, de "overflow: auto" uit printer.css overruled, met als gevolg dat er steeds een heel stuk van m'n content wegvalt bij het uitprinten (print preview that is ). Hoe kan ik dit nu verbeteren?
[...]

Het meest eenvoudig lijkt me dan om niet direct direct de style-property te zetten, maar met js een class toe te voegen:

JavaScript:

document.getElementById('container').className = 'foo';

Cascading Stylesheet:

#container.foo { overflow: hidden; }
@media print  {
  #container.foo { overflow: visible; }
}

[Dr_Frickin_Evil]

!important werkt inderdaad, maar dat vind ik toch niet zo'n mooie oplossing.

De oplossing van Anne en crisp werkt goed. Nog 1 klein probleempje, in mozilla print ie alleen de 1e pagina uit, en stopt daarna geheel (laatste regel print ie maar half uit, omdat die er niet meer oppast), en in IE print ie wel mooi alles uit, maar print ie op het eind van de pagina een halve regel (in de hoogte zegmaar), en de andere helft print ie op het volgende blad uit. De pagebreaks kloppen dus niet echt. Wat kan ik daaraan doen?

[Justice]

pagebreaks worden beschouwd als zijnde onbetrouwbaar, enige oplossing is het opsplitsen van de content en forms niet langer maken van 1 pagina. Helaas.

[Verwijderd]

Heb je dingen ingesteld met CSS [1] of zag het er gewoon raar uit?

[1] http://www.w3.org/TR/CSS21/page.html#page-breaks