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

Layout nach belieben
runde Ecken OK
padding OK

Text Links muss volle Höhe bekommen
padding nahezu auf 0 reduzieren
runde Ecken weg (Meiner Ansicht nach), Rand weg (enthält keine Information :-)

|MediaWiki:Common.css

#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>

mit MediaWiki:Common.css

div.Quellenangabe-klein { text-align:right; font-size:x-small; }

viele Grüße Andreas

Ein neues Thema zu Diskussion:Aktuelles starten

Navigationsmenü

Suche