2012-03-15 12 views
36

için CSS kullanarak altbilgi bir görüntü üstbilgi ve altbilgi uygulanacak CSS3 kullanmaya çalışıyorum her sayfa. Beni koymak için bir yol var mıSayfa oluşturuluyor başlıkları ve ben Uçan (PDF'ye iText CSS/HTML dışarı döker) Saucer ve ben kullanarak bir PDF yaratıyorum baskı

@page { 
    size: 8.5in 11in; 
    margin: 0.5in; 

    @top-left { 
     content: "Hello"; 
    } 
} 

:

<div id="pageHeader"> 
    <img src="..." width="250" height="25"/> 
</div> 

Benim CSS biraz bu gibi görünür:

Ben aslında her sayfanın sol üstünde bulunan bu div koymak istiyorum Bu div content? Her sayfanın üst bir öğe koyarak

cevap

35

:

@page { 
    @top-center { 
    content: element(pageHeader); 
    } 
} 
#pageHeader{ 
    position: running(pageHeader); 
} 

(Uçan Saucer'ten içinde çalışıyor) http://www.w3.org/TR/css3-gcpm/#running-elements Bkz

+0

Vay tanımlanması gerekecektir ben o daha az tam bir şekilde yapmak 'background-image' kavga ettiğimiz, er bu bilinen isterdim. Çok teşekkürler! –

+0

Bunu benimsemeye çalışıyorum ama bazı nedenlerle Chrome'da başlık yalnızca ilk sayfada ve altbilgi yalnızca son sayfada yazdırılıyor. Firefox'ta bu tamamen bozuk. –

+2

Firefox veya Chrome'da çalışıyor mu? İkisini de denedim, ama benim için işe yaramıyor:/ – Jaro

1

sayfalarında üstbilgi ve altbilgi dahil etmek için (@ mükemmel cevap ayrıntılandırırken Adam):

<style> 
@page { 

    margin: 100px 25px; 
    size: letter portrait; 

    @top-left { 
     content: element(pageHeader); 
    } 

    @bottom-left { 
     content: element(pageFooter); 
    } 
} 

#pageHeader{ 
    position: running(pageHeader); 
} 

#pageFooter{ 
    position: running(pageFooter); 
} 

</style> 
<body> 
    <header id="pageHeader">something from above</header> 
    <footer id="pageFooter">lurking below</footer> 

    <div>meaningful rambling...</div> 
</body> 

NOT: amacıyla altbilgi o olabilir her sayfada tekrarlamak için , O (çok sayfalı içerik için) ÖNCE diğer vücut içeriği

İlgili konular