NetBull
Erfahrenes Mitglied
Hi,
ich sitze an einer Aufgabe die mir Kopfzerbrechen macht und möchte mich hier nur inspirieren lassen wie andere es angehen würden.
Das Problem: Ein Benutzer eines Web-Frontends soll in der Lage sein ein Schriftstück im Charakter eines Briefes aus drucken zu können. Der Briefkopf war recht einfach aber:
a) ich stelle die Größe eines Dokumentes mit margin-top von 2cm ein und wenn ich das mit einem Lineal nachmesse, dann ist das Margin nicht eingehalten.
b) Absolute Positionieriung eines Elementes von top 19cm ist auf dem Papier eher 20.3 cm.
c) das grösste Problem habe ich mit dem Umbruch. Ich möchte das ein Div Element bei einer bestimmten Größe unterbrochen wird, ein neues erstellt wird, das dann auf der Folgeseite wieder zwischen einem Header und einem Footer platziert wird. Auch bei dynamischer Länge des Textes.
Geht das überhaupt mit CSS?
Geht es mit JavaScript/Jquery?
Gibt es ein Framework das mich da optimal unterstützt?
Das Beispiel:
Wer hat so was schon mal gemacht?
CU NetBu||
ich sitze an einer Aufgabe die mir Kopfzerbrechen macht und möchte mich hier nur inspirieren lassen wie andere es angehen würden.
Das Problem: Ein Benutzer eines Web-Frontends soll in der Lage sein ein Schriftstück im Charakter eines Briefes aus drucken zu können. Der Briefkopf war recht einfach aber:
a) ich stelle die Größe eines Dokumentes mit margin-top von 2cm ein und wenn ich das mit einem Lineal nachmesse, dann ist das Margin nicht eingehalten.
b) Absolute Positionieriung eines Elementes von top 19cm ist auf dem Papier eher 20.3 cm.
c) das grösste Problem habe ich mit dem Umbruch. Ich möchte das ein Div Element bei einer bestimmten Größe unterbrochen wird, ein neues erstellt wird, das dann auf der Folgeseite wieder zwischen einem Header und einem Footer platziert wird. Auch bei dynamischer Länge des Textes.
Geht das überhaupt mit CSS?
Geht es mit JavaScript/Jquery?
Gibt es ein Framework das mich da optimal unterstützt?
Das Beispiel:
HTML:
<doctype>
<html>
<head>
<style>
#LayOutWrapper{
}
body {
margin: 0px;
padding: 0px;
}
body, table{
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
.bordered{
border: solid 1px black;
}
.wrapper.left{
float: left;
width: 8cm;
margin-left: 15mm;
}
.wrapper.right{
width: 7cm;
padding-top: 20mm;
margin-right: 15mm;
float: right;
}
#DocumentTitle{
text-align: center;
font-size: x-large;
line-height: 2cm;
vertical-align: middle;
padding-top: 17mm;
padding-bottom: 3mm;
font-weight: bolder;
color: #999;
}
#DocumentSender{
padding-top: 9mm;
margin-bottom: 1mm;
font-size: 10px;
text-align:center;
border-bottom: 1px solid #999;
}
#DocumentAddress{
padding-top: 3mm;
padding-left: 1cm;
}
#DocumentAddress p{
padding: 0px;
margin: 0px;
}
#DocumentAddress p.special{
padding-top: 3mm;
}
#DocumentSubject{
font-weight: bold;
vertical-align: text-bottom;
padding-left: 20mm;
padding-top: 17mm;
padding-bottom: 3mm;
}
#DocumentContent{
padding-left: 20mm;
padding-right: 20mm;
}
#DocumentContent p:first-of-type{
padding-bottom: 4mm;
}
#DocumentContent p:last-of-type{
padding-top: 4mm;
}
#DocumentContent p{
padding-bottom: 1mm;
text-align: justify;
}
.SmallLine{
width: 5mm;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
margin-left: 10mm;
}
#UpperSmallLine {
}
#BottomSmallLine{
z-index: 100;
position: absolute;
top: 19cm;
}
.endFloat{
clear: both;
height: 0px;
width: 0px;
padding: 0px;
margin: 0px;
border: none 0px;
}
</style>
</head>
<body>
<div id="LayOutWrapper">
<div id="LayoutHeader">
<div class="wrapper left">
<div id="DocumentTitle"> Das Document</div>
<div id="DocumentSender">Hans Muster, Test-Strasse 123, 12345 Irgendwo</div>
<div id="DocumentAddress"><p>Kompletter Name</p><p>z.Hd.: </p><p>Strasse & Nummer</p><p class="special">PLZ Wohnort</p></div>
</div>
<div class="wrapper right"><table width="100%">
<tr><td>Datum</td><td>:</td><td align="right">01.02.2013</td></tr>
<tr><td>Unser Zeichen</td><td>:</td><td align="right">DX-A6R-GH1Z</td></tr>
<tr><td></td><td></td><td align="right"></td></tr>
<tr><td>Ihre Zeichen</td><td>:</td><td align="right">12/345-999</td></tr>
<tr><td></td><td></td><td align="right">13/345-321</td></tr>
<tr><td></td><td></td><td align="right">A/1C1-666</td></tr>
<tr><td></td><td></td><td align="right"></td></tr>
<tr><td colspan="3"><b>Meine Bankverbindung</b></td></tr>
<tr><td>Inhaber</td><td></td>
<td align="right">Hans Muster</td></tr>
<tr><td>IBAN</td><td></td>
<td align="right">DE-1234567890</td></tr>
<tr><td>BIC</td><td></td>
<td align="right">BICXX123</td></tr>
</table></div>
<div class="endFloat"></div>
</div>
<div id="DocumentSubject">Der Betreff des Schriftstückes</div>
<div id="UpperSmallLine" class="SmallLine"></div>
<div id="BottomSmallLine" class="SmallLine"></div>
<div id="DocumentContent"><p>Sehr geehrte Damen und Herren,</p>
<p>das ist dann der Inhalt des Schriftstückes der mir Probleme macht. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat cursus lacinia. In laoreet nisi ligula, non luctus nibh pretium et. Quisque et augue massa. Sed non laoreet tellus, ut blandit nisl. Phasellus rutrum tincidunt volutpat. Nam ullamcorper imperdiet eros eget sagittis. Aenean et tristique augue. Nunc molestie fermentum est, eu faucibus ex molestie vel. Sed libero nisi, feugiat sit amet nibh eget, lobortis scelerisque dolor. Mauris porta augue eros, eu posuere elit semper ac.</p>
<p> Ut vel venenatis ligula, a condimentum lacus. Sed ac mauris nec mi consequat ullamcorper. Nunc sagittis ex libero, sed euismod sem lobortis et. Quisque nec ullamcorper libero, at auctor purus. Nullam hendrerit sit amet diam blandit consequat. Pellentesque risus nunc, euismod et sapien et, hendrerit lobortis lectus. In ultricies dignissim lobortis. Integer ut porta nisi, eleifend convallis nibh. Aliquam erat volutpat. Nunc vel ullamcorper nibh.</p>
<p> Duis eget enim non erat hendrerit condimentum. In hac habitasse platea dictumst. Fusce ornare turpis in mi dignissim, condimentum euismod urna vehicula. In accumsan dignissim lorem, sed interdum augue malesuada vitae. Quisque metus arcu, congue et tincidunt sed, dapibus eleifend purus. Pellentesque sodales velit tellus, mollis mollis diam malesuada at. Cras vestibulum orci quis ex euismod, vel ultricies elit dictum. Aenean egestas magna eu ligula vestibulum scelerisque. Proin ullamcorper ligula vitae egestas sagittis. Nullam lobortis quam quis enim porttitor cursus. Aenean sit amet dolor odio. Aliquam et purus eu felis cursus gravida in non tellus. Maecenas id eleifend dui.</p>
<p> Proin a nisi eget nisi hendrerit bibendum. Integer bibendum, elit ac commodo lobortis, turpis tellus gravida nisi, a pulvinar orci elit tincidunt felis. Pellentesque ut felis sit amet urna ornare imperdiet vitae eget augue. Vivamus non est vehicula, accumsan justo sed, lobortis metus. Sed vitae tortor suscipit, commodo lorem at, imperdiet nulla. Sed semper ligula in felis vehicula sagittis. Aenean ultrices accumsan lectus in aliquam. Vestibulum malesuada urna vel faucibus imperdiet. Donec ac nunc nulla. Integer auctor consectetur quam, sed dapibus diam tristique sit amet. Nullam mollis pellentesque ante quis dapibus. In tempor est purus, vehicula pretium ipsum placerat sed. Morbi efficitur fringilla quam, quis lobortis orci interdum a. Nulla eu erat non nulla mattis mollis. Nunc vitae lorem vitae dui iaculis cursus ac eu augue. Morbi non egestas lorem.</p>
<p>Duis eget enim non erat hendrerit condimentum. In hac habitasse platea dictumst. Fusce ornare turpis in mi dignissim, condimentum euismod urna vehicula. In accumsan dignissim lorem, sed interdum augue malesuada vitae. Quisque metus arcu, congue et tincidunt sed, dapibus eleifend purus. Pellentesque sodales velit tellus, mollis mollis diam malesuada at. Cras vestibulum orci quis ex euismod, vel ultricies elit dictum. Aenean egestas magna eu ligula vestibulum scelerisque. Proin ullamcorper ligula vitae egestas sagittis. Nullam lobortis quam quis enim porttitor cursus. Aenean sit amet dolor odio. Aliquam et purus eu felis cursus gravida in non tellus. Maecenas id eleifend dui.</p>
<p> Proin a nisi eget nisi hendrerit bibendum. Integer bibendum, elit ac commodo lobortis, turpis tellus gravida nisi, a pulvinar orci elit tincidunt felis. Pellentesque ut felis sit amet urna ornare imperdiet vitae eget augue. Vivamus non est vehicula, accumsan justo sed, lobortis metus. Sed vitae tortor suscipit, commodo lorem at, imperdiet nulla. Sed semper ligula in felis vehicula sagittis. Aenean ultrices accumsan lectus in aliquam. Vestibulum malesuada urna vel faucibus imperdiet. Donec ac nunc nulla. Integer auctor consectetur quam, sed dapibus diam tristique sit amet. Nullam mollis pellentesque ante quis dapibus. In tempor est purus, vehicula pretium ipsum placerat sed. Morbi efficitur fringilla quam, quis lobortis orci interdum a. Nulla eu erat non nulla mattis mollis. Nunc vitae lorem vitae dui iaculis cursus ac eu augue. Morbi non egestas lorem.</p>
<p>Duis eget enim non erat hendrerit condimentum. In hac habitasse platea dictumst. Fusce ornare turpis in mi dignissim, condimentum euismod urna vehicula. In accumsan dignissim lorem, sed interdum augue malesuada vitae. Quisque metus arcu, congue et tincidunt sed, dapibus eleifend purus. Pellentesque sodales velit tellus, mollis mollis diam malesuada at. Cras vestibulum orci quis ex euismod, vel ultricies elit dictum. Aenean egestas magna eu ligula vestibulum scelerisque. Proin ullamcorper ligula vitae egestas sagittis. Nullam lobortis quam quis enim porttitor cursus. Aenean sit amet dolor odio. Aliquam et purus eu felis cursus gravida in non tellus. Maecenas id eleifend dui.</p>
<p> Proin a nisi eget nisi hendrerit bibendum. Integer bibendum, elit ac commodo lobortis, turpis tellus gravida nisi, a pulvinar orci elit tincidunt felis. Pellentesque ut felis sit amet urna ornare imperdiet vitae eget augue. Vivamus non est vehicula, accumsan justo sed, lobortis metus. Sed vitae tortor suscipit, commodo lorem at, imperdiet nulla. Sed semper ligula in felis vehicula sagittis. Aenean ultrices accumsan lectus in aliquam. Vestibulum malesuada urna vel faucibus imperdiet. Donec ac nunc nulla. Integer auctor consectetur quam, sed dapibus diam tristique sit amet. Nullam mollis pellentesque ante quis dapibus. In tempor est purus, vehicula pretium ipsum placerat sed. Morbi efficitur fringilla quam, quis lobortis orci interdum a. Nulla eu erat non nulla mattis mollis. Nunc vitae lorem vitae dui iaculis cursus ac eu augue. Morbi non egestas lorem.</p>
<p> Nullam lacus tortor, molestie vel justo vel, elementum egestas velit. Sed vitae ligula id turpis mollis mollis. Nunc elementum felis risus, in porta nisi efficitur quis. Maecenas semper est quis mauris imperdiet vulputate. Nulla accumsan arcu nec diam vehicula tristique. Curabitur posuere blandit ante sit amet ornare. Nam semper elit et purus lacinia scelerisque. Pellentesque tincidunt pretium turpis, at sollicitudin magna congue in. Aenean laoreet ac mi in volutpat. Quisque laoreet sit amet tellus a sollicitudin. Phasellus tempor, tellus et laoreet volutpat, nulla nisl molestie orci, sit amet ultrices lorem metus eu dui. Etiam laoreet ac lectus id suscipit. Sed in nisi rutrum neque vehicula elementum. Aenean consectetur eros quis nisi posuere cursus. Sed sed justo ornare, pulvinar velit vitae, ultricies risus. Sed pellentesque orci id ultricies pharetra und so verbleibe ich </p>
<p>mit freundlichen Grüßen </p>
</div>
</div>
</body>
</html>
Wer hat so was schon mal gemacht?
CU NetBu||