Hallo Iris,
die Seite muss für das Ausdrucken optimiert werden. Derzeit ist sie unbrauchbar, da alle overflow-y abgeschnitten sind und man nicht alle Informationen ausgedruckt bekommt. Ein Ansatz wäre mit Vorlagen zu arbeiten und CSS Klassen und reinen <div>-Elementen statt einer Tabelle drum herum. Für @screen (MediaWiki:Common.css) und @print (MediaWiki:Print.css) kann man dann angemessen umdefinieren:
| Bildschirm | Ausdrucken |
|---|---|
|
|
#mw-content-text > div.interessierte {
width:100%;
/* width: calc(100% - padding-px); ? */
}
.interessierte > .interessierte {
width:60%;
height:550px;
overflow-y: scroll;
}
.interessierte .Zufallsbild {
float: right;
width: 350px;
height: 550px;
}
.Zufallsbild table {
/* table ist hier das Bild */
/* Unterfangen vertical:middle nicht ganz CSS-offiziell,
Funktion fragwürdig, Kompromiss */
margin-top: 40%; margin-bottom: 50%;
}
|
MediaWiki:Print.css, erster Vorschlag: reines <div> Layout ohne Tabelle #mw-content-text > div.interessierte {
/* 1 Ebene unterhalb content folgend */
width:100%;
padding:0px;
border:0px none;
}
.interessierte > .interessierte {
/* 2 unmittelbar hintereinander verschachtelte */
display: inline;
border: 0px none;
padding: 0px;
width:auto;
}
.interessierte .Zufallsbild {
float: right;
min-width: 350px;
border-left: 1px #ccc solid;
margin-left:1em;
}
|
Problem besteht, dass Ausdruckvariante optimal wäre, wenn Zufallsbild rechst float:right; wäre aber Text links automatisch drum herum fließt und die Papierfläche optimal ausnutzte. Das geht aber mit einer Tabelle nicht. Eine reine <div>-Variante zum experimentieren findest du http://wiki.bayernflora.de/w/index.php?title=Benutzer:Andreas_Plank/Test_Layout&oldid=15899. Im Firefox Entwickler-Konsole öffnen (Kontextmenü: „Element untersuchen“ oder F12 glaube ich), dann Tab Stielbearbeitung, dann [Neu] anklicken und mit CSS Definitionen rumspielen, wobei sich das Layout interaktiv anpasst während du CSS Code schreibst.
Für die Quellenangabe wäre mein Vorschlag
<div class="Quellenangabe-klein">''verfasst von I.L. am 09.03.2016''</div>
div.Quellenangabe-klein { text-align:right; font-size:x-small; }
viele Grüße Andreas
