[CSS] Printen: Header en Footer op elke pagina?

[Verwijderd]

Ik ben op het moment bezig een site van een nieuw jasje te voorzien en alles liep verder prima, totdat ik vanmiddag in een dolle bui 's aan het experimenteren ging met een print stylesheet.

Uiteraard voor het te gebruiken stylesheet een media selector gebruikt in het LINK element in de HEAD van de pagina, maar ik kom er gewoon niet uit.

De bedoeling is dat de kop en voet van de html pagina op elke printout komen (of in ieder geval de voet, die's echt belangrijk).

De opzet van de pagina is redelijk simpel en modulair:

code:

<div id="pagina"> <-- om ook in IE de page te centreren
     <div id="kop"> alle Header bende </div>
     <div id="zijbalk"> Zaken als menu zitten hier </div>
     <div id="inhoud"> Spreekt voor zich </div>
     <div id="voet"> de Footer </div>
</div>

Nu is het me prima gelukt om de bewuste footer op elke pagina te prakken (position: fixed) maar ik krijg een nette marge BOVEN die voet maar niet werkend. @page wil niet werken, maar dat klopt (helaas) omdat niemand het ondersteunt, zelfs Firefox doet er helemaal niets mee (hier althans).

Heeft iemand een oplossing hiervoor?

[NMe]

Margin-top misschien?

[Verwijderd]

NMe84: margin-top op welk element bedoel je?

Als ik dat declareer voor "inhoud" dan krijg ik een enkele marge, alleen op de eerste pagina, en ik wil in principe op ~elke~ pagina een marge voor die koptekst. (zelfde voor margin-bottom uiteraard, maar dan de laatste pagina, NA de content)

In het geval van declareren op het 'fixed' element "voet".. nu, dat werkt ook niet omdat die door de "position: fixed" niet meer in de normale flow van de pagina zit en de tekst er vrolijk onderdoor loopt. (En dat is allemaal keurig CSS2 gedrag..)

[Verwijderd]

ik heb een tijdje wat met printstyles gewerkt (niet op deze manier though), maar ik denk dat in theorie alleen @page:before en :after wat voor je zouden kunnen betekenen eigenlijk

[NMe]

Ik bedoelde dat laatste ja.
Heb je misschien een link naar de pagina waar we over praten? Dat werkt wat fijner. Of laat op zijn minst de gehele CSS van de genoemde classes, en in het speciaal de class "voet", zien.

[Verwijderd]

code:

@page {
    margin: 4cm 2cm;
}

#kop,
#zijbalk,
.menu,
.prijslink,
.toplink {
    display: none;
}

#voet {
    position: fixed;
    bottom: 0;
    left: 0;
}

#voet p {
    width: 100%;
    font-weight: bold;
    text-align: center;
}

da's wat er nu allemaal aan print.css bestaat, dus de pagina is verder vrij van opmaak en alleen wat er geprint moet worden staat er.

Inhoud pagina stelt niets voor eigenlijk, hoop alinea's met een hoop tekst in "inhoud" en 1 regeltje gecentreerde tekst in "voet" (en een tweede keer het hoofdmenu maar dat word niet gerendered door "display: none")

edit:
en die @page werkt dus niet maar staat er voor de volledigheid toch bij. Als die zou werken was er zat ruimte voor de voettekst...

[ Voor 15% gewijzigd door Verwijderd op 15-08-2004 03:42 ]