div rotate unten auf der A4-Seite
Linuchs
- css
Hallo,
ihr kennt diese Zettel für An- und Verkäufe, unten ist die Kurzform als abreissbare "Briefmarke" mehrfach vorhanden und um -90deg rotiert.
Mit dem FF möchte ich Veranstaltungstermine drucken und aushängen.
Problem: Die Höhe der "Briefmarke" ist variabel. Um welchen Punkt muss ich sie drehen? Habe dies versucht:
.marke {
position: absolute;
left: 0;
top: 100%;
transform: rotate(-90deg);
transform-origin: 0 0;
}
Es ist nur die erste Zeile gedreht, die anderen sind nicht zu sehen. Wahrscheinlich, weil sie vor dem Drehen auf der nächsten A4-Seite gestanden haben.
Habe auch schon mit bottom:0 versucht, aber um welchen Punkt wäre dann zu drehen?
Gruß, Linuchs
Hallo
ohne Link zu der Seite und unterschiedlichen Beispielen zu den variablen Höhen werden wir dir kaum helfen können.
Und was versteht du unter einer DIN-A4-Seite bei HTML und CSS? Webseiten haben keine Größe.
HTML, CSS und Drucken sind eh' ein Thema für sich, auch wenn das nur in einem bestimmten Browser funktionieren soll.
Gruss
MrMurphy
Hallo MrMurphy,
ohne Link zu der Seite und unterschiedlichen Beispielen zu den variablen Höhen werden wir dir kaum helfen können.
Habe das jetzt mal für ein Event und den Firefox hingemogelt: Konzert im Stadtmuseum - siehe Firefox, Datei, Druckvorschau.
Und was versteht du unter einer DIN-A4-Seite bei HTML und CSS? Webseiten haben keine Größe.
Beim Drucken kommt (bei mir) immer A4 raus. Ich habe halt kein Papier "ohne Größe".
HTML, CSS und Drucken sind eh' ein Thema für sich, auch wenn das nur in einem bestimmten Browser funktionieren soll.
Mag sein, aber ich mache das seit Jahren. Und es klappt ganz gut. Da die Drucker am Client hängen, bleibt mir auch gar nichts anderes übrig, wenn Daten aufs Papier sollen.
Gruss, Linuchs
Hallo,
die Marken wirst du zu jedem Veranstaltungstermin individuell anpassen müssen. Aber das geht ja recht übersichtlich.
Der Drehpunkt über die linke obere Ecke passt.
Die Position der Marken würde ich über transform translate anpassen.
Ich habe mal ein Beispiel erstellt, die Anpassungen für dich solltest du hinbekommen. Ansonsten kannst du ja noch mal nachfragen.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Buttongestaltung 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%; /*für die Einheit rem, mit der ich gerne arbeite*/
}
body {
position: relative;
width: 14cm;
height: 25cm;
padding: 0;
border: 1px solid black;
margin: 1cm 0 0 0;
}
footer {
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
}
footer p {
display: inline-block;
position: absolute;
padding: 0;
margin: 0;
transform-origin: 0% 0%;
}
footer p:nth-child(1) {
transform: rotate(270deg) translate(10px, 10px);
}
footer p:nth-child(2) {
transform: rotate(270deg) translate(10px, 50px);
}
footer p:nth-child(3) {
transform: rotate(270deg) translate(10px, 120px);
}
footer p:nth-child(3) span:nth-child(1) {
color: red;
}
footer p:nth-child(3) span:nth-child(2) {
font-weight: bolder;
}
footer p:nth-child(4) {
transform: rotate(270deg) translate(10px, 160px);
}
footer p:nth-child(5) {
transform: rotate(270deg) translate(10px, 200px);
}
footer p:nth-child(6) {
transform: rotate(270deg) translate(10px, 240px);
}
}
</style>
</head>
<body>
<main>
<h1>Überschrift</h1>
<p>In Deutschland gibt es rund 120.000 Vermögensmillionäre. Sie gelten als die Reichen im Lande. Damit sind ihnen zwei Dinge ganz sicher: Neid und immer neue Begehrlichkeiten des Fiskus. Wer da glaubt, von einer Million als Bonvivant gut leben zu können, der kennt das deutsche Steuerrecht schlecht. Stellen wir uns den steuerehrlichen Herrn Michel vor, der eine Million erarbeitet oder geerbt hat.</p>
<p>In Deutschland gibt es rund 120.000 Vermögensmillionäre. Sie gelten als die Reichen im Lande. Damit sind ihnen zwei Dinge ganz sicher: Neid und immer neue Begehrlichkeiten des Fiskus. Wer da glaubt, von einer Million als Bonvivant gut leben zu können, der kennt das deutsche Steuerrecht schlecht. Stellen wir uns den steuerehrlichen Herrn Michel vor, der eine Million erarbeitet oder geerbt hat.</p>
<p>In Deutschland gibt es rund 120.000 Vermögensmillionäre. Sie gelten als die Reichen im Lande. Damit sind ihnen zwei Dinge ganz sicher: Neid und immer neue Begehrlichkeiten des Fiskus. Wer da glaubt, von einer Million als Bonvivant gut leben zu können, der kennt das deutsche Steuerrecht schlecht. Stellen wir uns den steuerehrlichen Herrn Michel vor, der eine Million erarbeitet oder geerbt hat.</p>
</main>
<footer>
<p>Tel. 0123 456789 0000 000</p>
<p>Tel. 0123 456789 0000 <br>0134 34ö 34ö5</p>
<p>Tel. <span>0123</span> 456789 <span>0000</span></p>
<p>Tel. 0123 456789 0000</p>
<p>Tel. 0123 456789 0000</p>
<p>Tel. 0123 456789 0000</p>
</footer>
</body>
</html>
Gruss
MrMurphy
Hallo
die body-width soll natürlich 100% sein.
Gruss
MrMurphy
Hallo,
ich habe als Morgenübung noch mal eine Seite mit deinen Abreißstreifen erstellt.
Die child-Angaben des main-Elements dienen meiner Fingerübung. Die im section-Element halte ich für sinnvoll um den Quelltext übersichtlicher zu halten. Aber das ist auch Geschmackssache.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Anzeige mit Abreißstreifen 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
@media all {
header, nav, main, aside, section, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%; /*für die Einheit rem, mit der ich gerne arbeite*/
}
body {
position: relative;
width: 14cm;
width: 100%;
height: 25cm;
padding: 0;
border: 1px solid black;
margin: 1cm 0 0 0;
}
body > p:nth-child(1),
main h1,
main p {
font-size: 0.9rem;
line-height: 1.1;
padding: 0.1rem 0 0.2rem 0;
margin: 0;
}
main p:nth-child(2),
main p:nth-child(5),
main p:nth-child(8),
main p:nth-child(11),
main p:nth-child(14),
main p:nth-child(17),
main h3 {
font-weight: bold;
}
section {
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
}
section div {
display: inline-block;
position: absolute;
padding: 0;
margin: 0;
transform-origin: 0% 0%;
}
section div:nth-child(1) {
transform: rotate(270deg) translate(10px, 10px);
}
section div:nth-child(2) {
transform: rotate(270deg) translate(10px, 120px);
}
section div:nth-child(3) {
transform: rotate(270deg) translate(10px, 230px);
}
section div:nth-child(4) {
transform: rotate(270deg) translate(10px, 340px);
}
section div:nth-child(5) {
transform: rotate(270deg) translate(10px, 450px);
}
section div:nth-child(6) {
transform: rotate(270deg) translate(10px, 560px);
}
section div p {
white-space: nowrap;
font-size: 0.8rem;
line-height: 1;
overflow: hidden;
margin: 0.1rem;
}
section div img:nth-child(2) {
float: right;
}
section div p:nth-child(3) {
font-weight: bold;
}
section div p:last-child {
color: red;
}
}
</style>
</head>
<body>
<p>Das Layout ist zum Drucken im Firefox ausgelegt.</p>
<main>
<h1>Copy for Dummys</h1>
<p>Fax from Wieden & Kennedy to S&J, 8/13/1995:</p>
<p>Guido, Bob suggested using this fax as dummy copy.</p>
<p>Best, Michael.</p>
<p>Fax from S&J to Wieden & Kennedy, 8/14/1995:</p>
<p>Michael & Bob, nice idea and thanks for your fax. What do you think of adding this fax to yours? It makes your dummy copy a bit longer, so it will fit into long copy ads as well.</p>
<p>Very best. Guido.</p>
<p>Fax from Wieden & Kennedy to S&J, 8/14/1995:</p>
<p>Guido, Bob here. A nice idea adding your copy to ours, and we agree that the copy needs to be a bit longer. To that end, how about adding something from Oscar Wilde? How about "I always travel with my diary. It'‘s important to have something sensational to read on the train."</p>
<p>Yours truly, Bob.</p>
<p>Fax from S&J to Wieden & Kennedy, 8/15/1995:</p>
<p>Bob'n'Michael, I had a bad, bad night. I was in doubt about making the dummy copy longer. Those art directors creating ads with short copys will probably never read the end of the new dummy copy. This could create the desire to switch to brochure designers, which could, in the long run, mean the end of print advertising.</p>
<p>Dreadfully, Guido.</p>
<p>Fax from S&J to Wieden & Kennedy, 8/22/1995:</p>
<p>Dear Bob Michael, haven't received a message from you yet. Are you sure that you want to end your dummy copy with a fax written by me?</p>
<p>Waiting for your final words, Guido.</p>
<p>Fax from Wieden & Kennedy to S&J, 8/22/1995:</p>
<p>No, we think it's fine if you end it.</p>
</main>
<section>
<div>
<p>Donnerstag, 15. Oktober 2015, 19:30 - 22:00 Uhr</p>
<img src="http://remso.eu/qrc/qrc_TID_18560.png" alt="QR-Code des Konzerts" />
<p>Konzert im Stadtmuseum</p>
<p>D-64521 Groß-Gerau</p>
<p>Am Marktplatz 3</p>
<p>www.remso.eu/?TID=18560</p>
</div>
<div>
<p>Donnerstag, 15. Oktober 2015, 19:30 - 22:00 Uhr</p>
<img src="http://remso.eu/qrc/qrc_TID_18560.png" alt="QR-Code des Konzerts" />
<p>Konzert im Stadtmuseum</p>
<p>D-64521 Groß-Gerau</p>
<p>Am Marktplatz 3</p>
<p>www.remso.eu/?TID=18560</p>
</div>
<div>
<p>Donnerstag, 15. Oktober 2015, 19:30 - 22:00 Uhr</p>
<img src="http://remso.eu/qrc/qrc_TID_18560.png" alt="QR-Code des Konzerts" />
<p>Konzert im Stadtmuseum</p>
<p>D-64521 Groß-Gerau</p>
<p>Am Marktplatz 3</p>
<p>www.remso.eu/?TID=18560</p>
</div>
<div>
<p>Donnerstag, 15. Oktober 2015, 19:30 - 22:00 Uhr</p>
<img src="http://remso.eu/qrc/qrc_TID_18560.png" alt="QR-Code des Konzerts" />
<p>Konzert im Stadtmuseum</p>
<p>D-64521 Groß-Gerau</p>
<p>Am Marktplatz 3</p>
<p>www.remso.eu/?TID=18560</p>
</div>
<div>
<p>Donnerstag, 15. Oktober 2015, 19:30 - 22:00 Uhr</p>
<img src="http://remso.eu/qrc/qrc_TID_18560.png" alt="QR-Code des Konzerts" />
<p>Konzert im Stadtmuseum</p>
<p>D-64521 Groß-Gerau</p>
<p>Am Marktplatz 3</p>
<p>www.remso.eu/?TID=18560</p>
</div>
<div>
<p>Donnerstag, 15. Oktober 2015, 19:30 - 22:00 Uhr</p>
<img src="http://remso.eu/qrc/qrc_TID_18560.png" alt="QR-Code des Konzerts" />
<p>Konzert im Stadtmuseum</p>
<p>D-64521 Groß-Gerau</p>
<p>Am Marktplatz 3</p>
<p>www.remso.eu/?TID=18560</p>
</div>
</section>
</body>
</html>
Gruss
MrMurphy
Moin MrMurphy1,
ich habe als Morgenübung noch mal eine Seite mit deinen Abreißstreifen erstellt.
Danke dir, habe ich hier mal für die Mit-leser reingestellt: http://remso.eu/_text/test_MrMurphy1.htm
Der Code ist sehr übersichtlich, mal schauen, was ich da übernehmen kann. Meine Seiten sind historisch gewachsen und nicht immer minimiert.
section div:nth-child(1) { transform: rotate(270deg) translate(10px, 10px); } section div:nth-child(2) { transform: rotate(270deg) translate(10px, 120px); } ...
Okay, du verwendest auch feste Werte für die Verschiebung. Ich hatte ja nach variablen gefragt, falls die Zeilenzahl in der Marke unterschiedlich ist. Aber zwei Zeilen passen noch hin, dass "passt" schon.
Variabel wäre es wohl dann, wenn ich fünf oder sechs dieser Abreiss-marken untereinander setze und sie gemeinsam drehe. Aber was vor dem Drehen nicht auf der A4-Seite steht, geht verloren. Ist das so?
Gruß, Linuchs
Aber was vor dem Drehen nicht auf der A4-Seite steht, geht verloren. Ist das so?
Verstehe gerade, wie du es gelöst hast. Du packst <section> absolut unten auf die Seite. <section> hat keine Höhe, aber die Abreiss-marken als Inhalt, auch jeweils absolut.
Und beim Drehen dreht sich der Inhalt aus der "platten", höhen-losen section heraus. Pfiffig.
Habe dein Beispiel minimal verändert, jetzt werden auch variable Höhen der Abreiss-Marken berücksichtigt.
Ich packe sie untereinander in ein gemeinsames div, das dann gedreht wird.
Klasse, optimale Lösung.
linuchs
Moin,
icih habe gestern die Idee weiterentwickelt zu einem A3-Plakat, das sich aus zwei A4 Seiten zusammensetzt. Der Druck erfolgt mit dem Firefox.
Die Abreiss-Streifen setze ich in ein <section> nach dem Beschreibungs-Feld und ziehe sie mit negativem margin-top in das Feld hinein. Innerhalb <section> ist noch ein <section>, das um -90deg gedreht wird.
Anzeige: Warum überlappt <section> das Textfeld (id=body) an beiden Seiten, obwohl es 265mm breit ist, genauso breit wie das Textfeld? Druck: Nun sind die 265mm etwas kleiner als die 265mm des Textfeldes. Es sieht korrekt aus.
Eigentlich nimmt der Firefox angegebene Maße recht genau. Aber hier bin ich ratlos. Wo liegt der Fehler? Man könnte sagen: Das Ergebnis stimmt, sei doch zufrieden. Aber ich hasse diesen stundenlangen Wechsel zwischen Versuch und Irrtum. Und irgendein unbekannter Windhauch macht so ein labiles Gleichgewicht wieder kaputt und ich weiss nicht, warum.
Hier die Seite: http://remso.eu/?TID=17568&LO=dru
Gruß, Linuichs