Topic on Diskussion:Aktuelles

Jump to: navigation, search
Line 3: Line 3:
 
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 <nowiki><div></nowiki>-Elementen statt einer Tabelle drum herum. Für  @screen ([[MediaWiki:Common.css]]) und @print ([[MediaWiki:Print.css]]) kann man dann angemessen umdefinieren:
 
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 <nowiki><div></nowiki>-Elementen statt einer Tabelle drum herum. Für  @screen ([[MediaWiki:Common.css]]) und @print ([[MediaWiki:Print.css]]) kann man dann angemessen umdefinieren:
  
Bildschirm
+
<table class="wikitable vertical-align-top">
 +
<tr><th> Bildschirm </th><th> Ausdrucken</th></tr>
 +
<tr><td>
 
* Layout nach belieben
 
* Layout nach belieben
 
* runde Ecken OK
 
* runde Ecken OK
 
* padding OK
 
* padding OK
 
+
</td><td>
Ausdrucken
+
 
* Text Links ''muss'' volle Höhe bekommen
 
* Text Links ''muss'' volle Höhe bekommen
 
* padding nahezu auf 0 reduzieren
 
* padding nahezu auf 0 reduzieren
 
* runde Ecken weg (Meiner Ansicht nach), Rand weg (enthält keine Information :-)
 
* runde Ecken weg (Meiner Ansicht nach), Rand weg (enthält keine Information :-)
 
+
</td></tr><tr><td>
 
+
|[[MediaWiki:Common.css]]
[[MediaWiki:Common.css]]
+
<syntaxhighlight lang="css">
 
#mw-content-text > div.interessierte {
 
#mw-content-text > div.interessierte {
 
   width:100%;  
 
   width:100%;  
Line 35: Line 36:
 
   margin-top: 40%; margin-bottom: 50%;
 
   margin-top: 40%; margin-bottom: 50%;
 
}
 
}
 
+
</syntaxhighlight>
 +
</td><td>
 
[[MediaWiki:Print.css]], erster Vorschlag: reines &lt;div> Layout ohne Tabelle
 
[[MediaWiki:Print.css]], erster Vorschlag: reines &lt;div> Layout ohne Tabelle
 +
<syntaxhighlight lang="css">
 
#mw-content-text > div.interessierte {
 
#mw-content-text > div.interessierte {
 
   /* 1 Ebene unterhalb content folgend */
 
   /* 1 Ebene unterhalb content folgend */
Line 56: Line 59:
 
   margin-left:1em;
 
   margin-left:1em;
 
}
 
}
 +
</syntaxhighlight>
 +
</td></tr></table>
  
 
Problem besteht, dass Ausdruckvariante optimal wäre, wenn Zufallsbild rechst <code>float:right;</code> 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 &lt;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.
 
Problem besteht, dass Ausdruckvariante optimal wäre, wenn Zufallsbild rechst <code>float:right;</code> 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 &lt;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.