Topic on Diskussion:Aktuelles

Jump to: navigation, search

Optimierung fürs Ausdrucken?

2
Andreas Plank (Talkcontribs)

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

Andreas Plank (Talkcontribs)

Ich habe meine Vorschlagseite Benutzer:Andreas Plank/Test Layout noch erklärlicher gestaltet. Mein Vorschlage wäre grob gesagt folgende Struktur, wobei man sich noch überlegen kann, wie man die CSS Klassen sinnvoll benennen könnte:

Vorgeschlagene verschachtelte Struktur: nach dem derzeitigen Layout

 div.interessierte
 ├  div.Zufallsbild
 ├  div.interessierte
 │   └ div.quellenangabe
 └  div.interessierte
     └ div.quellenangabe
Vorschlag: CSS Klassen sinngebend umbenennen
 div.Infobox
 ├  div.Zufallsbild
 ├  div.Infobox
 │   └ div.Quellenangabe-klein
 └  div.Infobox
     └ div.Quellenangabe-klein