[HTML] Printen i.c.m pagebreaks + css - Softwareontwikkeling

dinsdag 12 februari 2008 13:45

Acties:

Topicstarter

Hallo,

Ik heb een pagina waar 2 aparte tabellen met allerlei data + tekst, naast elkaar staan (bewust geen geneste tabellen!). 1 tabel staat links uitgelijnd, de andere tabel rechts.

Door middel van CSS hebben ze allebei een breedte van 45% zodat er 5% witruimte tussen zit. Zit allemaal goed.

Tussen deze 2 tabellen zit een pagebreak:

code:

1	page-break-before: always;

Hierdoor hakt hij de pagina in 2 delen, 1e (linkse) tabel apart op een a4 en de 2e (rechtse) tabel apart op een a4. Tot hier gaat het goed, maar het gaat om de verdeling op de a4tjes.

Als ik in de stylesheet opgeef dat beide tabellen 45% breed moeten zijn, krijg ik op het 1e a4tje (van de linkse tabel dus) een tabel van 45% breed, en dan 55% witruimte, en op het 2e a4tje juist omgedraaid , eerst 55% witruimte, dan de tabel van 45% breed.

Goed, googelen, GoT-search > aparte css voor print-pagina's..
Hiermee kan je dus 2 aparte weergaves maken, 1 voor op de site, 1 voor uit de printer. Voor op de site laat ik ze allebei op 45% staan dus op de site zit het allemaal goed. In de stylesheet voor het printen geef ik op:

code:

.tabelleft {
width: 100%;
}

.tabelright {
width: 100%;
}

In het afdrukvoorbeeld heb ik dan inderdaad de eerste tabel 100% verspreid over het hele a4tje, perfect dus.. alleen op de 2e pagina zie ik niks.. Goed, ik dacht dus: 100% + 100% gaat niet, dan zal het misschien wel 50% + 50% moeten zijn.. maar dan krijg ik hetzelfde als eerst (tabel+ witruimte en ander a4tje met witruimte + tabel).

Ik zelf weet even niet meer hoe je dit op moet lossen.. heel simpel gezegd heb ik dus 2 tabellen op een website naast elkaar, waarbij allebei de tabellen bij het uitprinten elk op 1 a4 moeten komen, en dan 100% op het a4tje moeten staan..wat doe ik fout?

Ik heb het idee dat het niet mogelijk is om met een pagebreak aan te geven dat hij alles na de pagebreak-tag als 'nieuwe' input op een pagina moet zetten.
Omdat er op de site iets 'voor' of 'na' de tabel staat, zet hij op a4 ook iets neer op de plek waar zijn buurman stond. Maar omdat er een pagebreak stond maakt hij het wit, in plaats van de tabel tegen de rand aan te gooien.

Vaag verhaal denk ik, hopelijk iemand die er meer van weet?

[ Voor 11% gewijzigd door Thrilled op 12-02-2008 14:07 ]

dinsdag 12 februari 2008 14:28

Acties:

Rekcor

Printen in browsers is sch**se, zoals onze oosterburen plachten te zeggen.

Maarre...mogen we misschien wat meer CSS van je, of - helemaal mooi - een voorbeeld online? En hoe ziet je HTML eruit?

dinsdag 12 februari 2008 14:30

Acties:

LauPro

Prof Mierenneuke®

Gewoon PDF van bakken, klaar.

Inkoopacties - HENK terug! - Megabit
It is a war here, so be a general!

dinsdag 12 februari 2008 14:40

Acties:

Thrilled

Topicstarter

@ Rekcor:

(veel) meer CSS valt er niet te geven. Zodra de print-functie aangeroepen wordt, wordt de standaard stylesheet vervangen door de print-stylesheet.. in dit geval dus:

code:

.tabelleft {
width: 100%;
}

.tabelright {
width: 100%;
}

button {
display: none;
}

.printvoor {
page-break-before: always;
}

.printna {
page-break-after: auto;
}

En mijn html is nog simpeler. Ik heb mijn hoofdproject opzij gezet en gewoon een nieuw html-bestandje aangemaakt met 2 tabellen..

code:

<html>
 <head>
  <title>test tabellen</title>
 </head>

<body>
<link rel="stylesheet" type="text/css" media="print" href="print.css">

<table border="1" align="left" width="45%" class="tabelleft">
 <tr>
  <td> tabel 1</td>
 </tr>
</table>

<table border="1" align="right" width="45%" class="tabelright">
 <tr>
  <td> tabel 2</td>
 </tr>
</table>

</body>
<html>

Uiteraard wordt in het hoofdproject alles opgemaakt in de hoofdstylesheet, maar dat is hier even niet van belang.

Inmiddels heb ik het voor elkaar dat er te veel lege pagina's worden meegeprint

schematisch:

code:

<div class="printna">
- tabel -
</div>

<div class="printna">
- tabel -
</div>

Dit resulteert in 3 pagina's uit de printer. Pagina 1 + tabel, Pagina 2 + tabel, Pagina 3 = blanco..

@ LauPro:
alles in PDFjes gooien is geen optie, heb ik ook al aan gedacht maar is al geschrapt.. toch bedankt voor het mee denken

[ Voor 5% gewijzigd door Thrilled op 12-02-2008 14:42 ]

dinsdag 12 februari 2008 14:54

Acties:

Thrilled

Topicstarter

mm zelfs met een:

code:

1	<div class="printnooit"></div>

waarbij

code:

1
2
3

.printnooit {
page-break-after: avoid;
}

is, werkt het niet..

page-break-after: avoid;
Avoid inserting a page break after the element

dinsdag 12 februari 2008 14:58

Acties:

Rekcor

Dit werkt bij mij:

HTML:

<html>
 <head>
  <title>test tabellen</title>
 </head>
  <link rel="stylesheet" type="text/css" media="print" href="print.css">
  <link rel="stylesheet" type="text/css" media="screen" href="screen.css">  
<body>
<table border="1" class="tabelleft">
 <tr>
  <td> tabel 1</td>
 </tr>
</table>
<p class="pagebreak"></p>
<table border="1" class="tabelright">
 <tr>
  <td> tabel 2</td>
 </tr>
</table>
</body>
<html>

print.css

Cascading Stylesheet:

.tabelleft
{
  width: 100%;
}

.tabelright {
  width: 100%;
}

p.pagebreak{
  page-break-after: always;
}

screen.css

Cascading Stylesheet:

.tabelleft {
  width: 45%;
  position: absolute;
  left: 0px;
}

.tabelright {
  width: 45%;
  position: absolute;
  right: 0px;
}

p.pagebreak{
  display: none;
}

dinsdag 12 februari 2008 15:40

Acties:

Thrilled

Topicstarter

Thnx voor je code, maar bij mij gooit het alleen maar de opmaak in de war (van het afdrukvoorbeeld, website blijft goed).

De tabellen worden niet gesplitst, ze worden juist 'door elkaar' gegooid.. ze overlappen elkaar en laten de tekst door elkaar zien. Omdat ik dacht dat het aan de 'absolute' waarde lag deed ik deze even weghalenmaar toen kreeg ik weer 1 a4 met de 1e tabel + een leeg a4tje.

dinsdag 12 februari 2008 15:51

Acties:

Rekcor

Dat is heel vreemd, wat is de uiteindelijke complete HTML van je pagina?

[ Voor 6% gewijzigd door Rekcor op 12-02-2008 15:58 ]

dinsdag 12 februari 2008 16:08

Acties:

CHeff

Allemaal gekkigheid

Men neme het voorbeeld van Reckor:
De width in de print.css veranderen naar 50% zou moeten werken.

Verder zou ik je html tag nog even afsluiten en de link tags in de head sectie zetten.

[ Voor 10% gewijzigd door CHeff op 12-02-2008 16:10 ]

dinsdag 12 februari 2008 16:10

Acties:

P.O. Box

misschien moet je tabelright in de print css expliciet links uitlijnen? ik heb het idee dat hij hem nu rechts print vanaf 100%.. dus zeg maar "naast je pagina"...

dinsdag 12 februari 2008 16:13

Acties:

Thrilled

Topicstarter

@ CHeff:
html tag niet afsluiten was een typfoutje

de width naar 50% is niet de oplossing. De situatie is nu trouwens iets anders:
In mijn startpost was het probleem: width op 50% gaf op het eerste a4tje:
1 tabel + 50% lege ruimte

en op het 2e a4tje:
50% lege ruimte + 1 tabel

/edit ik zag dat je het had over de print.css van Rekcor.. zoals hij het zegt is het goed, dit had ik zelf ook al. die 100% is namelijk voor de tabel wanneer hij alleen op de pagina staat. Dan moet hij dus wél 100% zijn, en niet de helft. Op de website moet hij weer 45% zijn

Maar nu heb ik het zover gekregen dat de tabellen allebei op 100% en allebei op 1 aparte pagina komen, maar hij gooit er een lege pagina achteraan.

Rekcor, de uiteindelijke html is ongelofelijk lang dus daar zal ik jullie niet mee vermoeien, maar het zijn gewoon 2 grote tabellen met jou tags er in/om/voor/aan/op/bij

[ Voor 19% gewijzigd door Thrilled op 12-02-2008 16:15 ]

dinsdag 12 februari 2008 16:28

Acties:

Rekcor

Thrilled schreef op dinsdag 12 februari 2008 @ 16:13:
@ CHeff:
html tag niet afsluiten was een typfoutje

de width naar 50% is niet de oplossing. De situatie is nu trouwens iets anders:
In mijn startpost was het probleem: width op 50% gaf op het eerste a4tje:
1 tabel + 50% lege ruimte

en op het 2e a4tje:
50% lege ruimte + 1 tabel

/edit ik zag dat je het had over de print.css van Rekcor.. zoals hij het zegt is het goed, dit had ik zelf ook al. die 100% is namelijk voor de tabel wanneer hij alleen op de pagina staat. Dan moet hij dus wél 100% zijn, en niet de helft. Op de website moet hij weer 45% zijn

Maar nu heb ik het zover gekregen dat de tabellen allebei op 100% en allebei op 1 aparte pagina komen, maar hij gooit er een lege pagina achteraan.

Rekcor, de uiteindelijke html is ongelofelijk lang dus daar zal ik jullie niet mee vermoeien, maar het zijn gewoon 2 grote tabellen met jou tags er in/om/voor/aan/op/bij

Ja oke, maar het moet wel aan jouw code liggen, want mijn voorbeeldje (met kleine tabel) werkt goed. Dus als je nou alle rijen op 1 na weghaalt uit je tabellen en dan je code neerplempt hiero.

Pagina: 1

Reageer