- engindeniz.net - http://www.engindeniz.net/v3.0 -

CSS İle Print Alanının Belirlenmesi ve Page Break

Bir formumuz var. Veriyi post ettik ve bir sonuç aldık. Şimdi bu sonucu bastırmamız gerekli ama çıktıdaki uyarıları yada notların gözükmesini istemiyoruz. Bazı sayfalarında ikinci sayfada çıkmasını istiyoruz
Ne yapacağız?

Çözüm CSS ile geliyor. Buradan buyrun :)

CSS birçok konuda olduğu gibi yazıcıya sayfayı gönderme konusunda da işimizi oldukça kolaylaştırıyor
öncelikle sayfamızda print ile ilgili başka bir style kodu yada css sayfası var ise siliyoruz
kodlar kısa olduğundan sayfanızda CSS style tagları arasına aşağıdaki kodları ekleyebilirsiniz

@media print
{
body * { visibility: hidden; }
#yazdir * { visibility: visible; }
#yazdir { position: absolute; top: 40px; left: 30px; }
}
.break { page-break-before: always; }

Print alacağımız sayfamızın üst kısmına çekinmeden bir print ikonu koyabiliriz çünkü bu kısım yukarıdaki kod sayesinde gözükmeyecek:)

<a href="javascript:window.print()">
<img alt="" src="print.gif" align="right" />
</a>

(sizin bir print ikonunuz olduğunu varsaydım)

Şimdi yukarıdaki CSS kodu ile ilgili ;
Sayfanızda nereyi yazdırmak istiyorsanız yazdırmak istediğiniz alanı aşağıda örneği verildiği şekilde div tagı içine alınız

bu kısım yazdırılmayacak
<div id="yazdir">
bu kısım yazdırılacak alandır
</div>

böylece “yazdir” tagi içinde kalanlar yazıcıdan çıkıyor olacak
Eğer bazı kısımların ikinci sayfada çıkmasını istersek
aşağıdaki örnekteki gibi break class’ını kullanacağız

bu kısım yazdırılmayacak
<div id="yazdir">
bu kısım yazdırılacak alandır
ve birinci sayfasıdır
</div>
<p class='break'>
bu kısımda yazdırılacak ama ikinci sayfada çıkacak</div>
</p>

Break classını koyduğumuz yer artık bir sonraki sayfa olarak çıkar.

Hep unuttuğum bu kısa kodları web defterimede eklemek istedim
umarım birilerini nde işine yarar

Görüşmek üzere
sevgiler.

Be Sociable, Share!
  • [1]
  • [2]
  • [3]
  • [4]