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