Thema auf Diskussion:Aktuelles
Diese Seite zeigt die Änderungen zwischen zwei Versionen eines Beitrags von Andreas Plank im Thema „Optimierung fürs Ausdrucken?“ auf Diskussion:Aktuelles an.
Du kannst andere Versionen dieses Beitrags im Verlauf ansehen.
| Zeile 3: | Zeile 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> | |
| − | + | ||
* 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%; | ||
| Zeile 35: | Zeile 36: | ||
margin-top: 40%; margin-bottom: 50%; | margin-top: 40%; margin-bottom: 50%; | ||
} | } | ||
| − | + | </syntaxhighlight> | |
| + | </td><td> | ||
[[MediaWiki:Print.css]], erster Vorschlag: reines <div> Layout ohne Tabelle | [[MediaWiki:Print.css]], erster Vorschlag: reines <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 */ | ||
| Zeile 56: | Zeile 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 <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 <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. | ||
