We are using the following markup for producing place cards (in this case for two persons):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="resmed-styles.css" />
</head>
<body><div id="toc"><ul></ul></div>
<div class="tischkarte">
<div class="divider">
<p class="fullname">
<span class="anrede">Frau</span>
<span class="titel"> Dr.</span>
<span class="vorname">Heinz</span>
<span class="nachname">Becker</span>
</p>
</div>
<div class="tischkarte">
<div class="divider">
<p class="fullname">
<span class="anrede">Dipl. Inf.</span>
<span class="titel"> Dr.</span>
<span class="vorname">Andreas</span>
<span class="nachname">Jung</span>
</p>
</div>
</div></div></body>
</html>
and the following CSS
* {
font-family: "Trebuchet MS", Verdana, Arial;
}
@page {
size: A4 landscape;
margin: 0;
}
.tischkarte {
background: blue url(tischaufsteller_background.png);
border-top: 10mm solid #1D2E7F;
border-bottom: 10mm solid #1D2E7F;
border-right: 1.27mm solid black;
height: 190mm;
width: 295.77mm;
}
div.divider {
width: 297mm;
border: 0.27mm solid black;
height: 0;
position: relative;
top: 94.5mm;
}
p.fullname {
font-family: "Arial";
font-size: 48pt;
font-style: bold;
position: relative;
top: 37mm;
padding: 0 0.77em;
}
I would have expected getting two pages inside the PDF however I can not see how to produce a proper page break.
Adding page-break-after: always to the .tischkarte rule did not help. Anything I am missing?
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="resmed-styles.css" />
</head>
<body><div id="toc"><ul></ul></div>
<div class="tischkarte">
<div class="divider">
<p class="fullname">
<span class="anrede">Frau</span>
<span class="titel"> Dr.</span>
<span class="vorname">Heinz</span>
<span class="nachname">Becker</span>
</p>
</div>
<div class="tischkarte">
<div class="divider">
<p class="fullname">
<span class="anrede">Dipl. Inf.</span>
<span class="titel"> Dr.</span>
<span class="vorname">Andreas</span>
<span class="nachname">Jung</span>
</p>
</div>
</div></div></body>
</html>
and the following CSS
* {
font-family: "Trebuchet MS", Verdana, Arial;
}
@page {
size: A4 landscape;
margin: 0;
}
.tischkarte {
background: blue url(tischaufsteller_background.png);
border-top: 10mm solid #1D2E7F;
border-bottom: 10mm solid #1D2E7F;
border-right: 1.27mm solid black;
height: 190mm;
width: 295.77mm;
}
div.divider {
width: 297mm;
border: 0.27mm solid black;
height: 0;
position: relative;
top: 94.5mm;
}
p.fullname {
font-family: "Arial";
font-size: 48pt;
font-style: bold;
position: relative;
top: 37mm;
padding: 0 0.77em;
}
I would have expected getting two pages inside the PDF however I can not see how to produce a proper page break.
Adding page-break-after: always to the .tischkarte rule did not help. Anything I am missing?