nicht angemeldet
Rolf BHallo Ingrid,
ich habe mal ein bisschen gefummelt. Bei mir gibt's keine Probleme. D.h. ich habe dein Problem vermutlich nicht vollständig erfasst...
Ich habe ein Page-Layout mit Grid. Es gibt Header, Footer und 6 figures, in denen die Dias stehen. Die Zahl 6 ist das Maximum pro Seite.
Als Print-Sonderlocke habe ich den Font des Header geändert.
Header und Footer sind im Grid fest platziert (Zeile 1 und 4, jeweils über alle Spalten), die figures ordnen sich dann automagisch in den restlichen Zellen an.
Statt img habe ich Divs als Platzhalter gesetzt. Im Bild 2 habe ich eine Table eingebaut. Damit die figcaptions immer schön unten stehen, habe ich etwas Höhenarithmetik hinzugefügt. Könnte man sicher auch anders machen.
Was fehlt in meinem Beispiel, um deine Probleme zu reproduzieren?
<!DOCTYPE html>
<html lang="de">
<head>
<title>Dia-Test</title>
<style>
@media print {
body header {
font-family: Courier;
}
}
body, figure {
margin:0; padding:0;
}
body {
height: 100vh;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto repeat(2, 1fr) auto;
}
header {
font: 200%/2em Verdana,sans-serif;
grid-row: 1; grid-column: 1 / 4;
text-align:center;
background-color: #f90;
}
footer {
border-top: 1px solid black;
text-align:right;
line-height: 2em;
grid-row: 4; grid-column: 1 / 4;
}
figure {
height: 100%;
padding: 1em; box-sizing: border-box;
}
figcaption {
text-align:center; margin:0; padding: 0;
line-height: 2em;
}
figure .content {
height: calc(100% - 2em);
}
figure table {
margin: auto;
border: 3px solid green;
}
.fakeimg {
background-color: #ccc;
}
</style>
</head>
<body>
<header>
Meine Welt in Bildern
</header>
<figure><div class="content fakeimg">:)</div><figcaption>Yet Another Nice Pic</figcaption></figure>
<figure><div class="content">
<table>
<tr><th>Name</th><th>Funktion</th></tr>
<tr><td>Müller</td><td>Obermahler</td></tr>
<tr><td>Meyer</td><td>Flugzeug-Wartung</td></tr>
<tr><td>Schmitz</td><td>Colonia-Beauftragter</td></tr>
</table></div>
<figcaption>Your Data</figcaption></figure>
<figure><div class="content fakeimg">:)</div><figcaption>Yet Another Nice Pic</figcaption></figure>
<figure><div class="content fakeimg">:)</div><figcaption>Yet Another Nice Pic</figcaption></figure>
<figure><div class="content fakeimg">:)</div><figcaption>Yet Another Nice Pic</figcaption></figure>
<figure><div class="content fakeimg">:)</div><figcaption>Yet Another Nice Pic</figcaption></figure>
<footer>
Ein Beispiel von Rolf B
</footer>
</body>
</html>
Rolf
sumpsi - posui - clusi
Matthias Apsel
Henry