Moin, Moin an alle Leser,
ich komme mal wieder nicht weiter und hoffe auf eure Hilfe. Folgender Status und Wunschziel:
- Alles in Beiträgen
- Normaler Fließtext
- Teils kurze, teils (sehr) lange Code-Passagen
- css wird von einer alternativen Datei teils "umgebogen"
- Code wird in <pre>-Tags eingeschlossen.
Das funktioniert alles wunschgemäß. Der CSS-Code sieht so aus:
#content pre { background: silver;
color: #222;
padding: 5px 10px;
border: 2px solid #5e2800;
}Bei Codeblöcken mit bis zu etwa 15 Zeilen ist das ja voll OK, es wird sogar automatisch ein horizontaler Scrollbalken eingefügt, falls erforderlich.
Bei Vielen Zeilen mag ich dem Leser nicht zumuten, zwei oder mehr Bildschimhöhen durchzuschrollen, um an den Folgetext zu gelangen. Insbesondere dann, wenn der Code im Moment nicht so wichtig für den Leser ist. Außerdem gibt es den auch noch als Download.
Mit einem <div> hoffte ich nun, nur diese großen Codeblöcke in eine 300px-Ansicht zu zwängen und mit einer Scrollbar auszustatten:
pre .VielCode {
/* mehr als 300 px */
height: 300px;
overflow: auto;
}
DIV.ScrollBar {
/* mehr als 300 px */
height: 300px;
overflow: auto;
}Beide Alternativen funktionieren nur scheinbar. Einerseits ist es (wohl) entscheidend, wie die beiden Statements geschachtelt sind. <div><pre> ... </pre></div> scheint gar nichts zu bewirken, wenn ich [COLOR=#a52a2a]<div class="VielCode"><pre>[/COLOR] einsetze. Die Code-Zeilen sind voll untereinander zu lesen, immerhin ist ein vertikaler Scrollbalken eingebaut.
Schreibe ich jedoch [COLOR=#A52A2A]<div class="ScrollBar"><pre>,[/COLOR] dann wird das Ganze für mich irritierend. Text rechts wird abgeschnitten, es ist aber keine horizontale ScrollBar sichtbar. Siehe
.
Scrolle ich aber zum Ende des DIV-Bereichs, dann ist offensichtlich im PRE-Block eine Scrollbar eingebunden und sichtbar, am unteren Ende des DIVs jedoch nur Freiraum:
.
Un jetzt verstehe ich die Welt nicht mehr :(. Ich schreibe die andere Reihenfolge: <pre><div> ... </div></pre> und nach dem speichern des Entwurfs sieht die Vorschau genau so aus, wie ich es mir vorgestellt habe. Und funktioniert auch so. Wenn ich nun noch einmal speichere, dann geschieht das, was mich ratlos werden lässt: Die <pre> - Tags werden ohne mein Zutun gelöscht und sämtliche Zeilenschaltungen im <div>-Bereich entfernt. Und das ist dann natürlich auch im Blog sichtbar. Ich sag es mal auf Plattdeutsch: "Scheun Schiet!" ;).
Dass ich etwas falsch mache, ist klar. Aber was? Oder gibt es eine andere Lösung? (Bei den Plugins bin ich nicht fündig geworden, liegt vielleicht auch daran, dass meine letzte Englischstunde >50 Jahre her ist.)Scheinbar "würgt" das <pre> so einiges ab, was aus meiner Sicht hilfreich wäre. Die Alternative, nur einige Zeilen anzuzeigen und dann einen Link zu einem Beitrag mit dem vollen Code zu setzen, finde ich nicht so optimal. Und prinzipiell 300px zu verwenden, ist bei wenigen Zeilen Code auch nicht schön, da so meist zu viel Leerraum entsteht.
Ich arbeite mit dem "normalen" Text-Editor von WP, habe aber auch WP Edit Pro als Plugin installiert. - Bis jetzt habe ich den Code in voller Länge dargestellt, insofern ist der Link zu meinem Blog vielleicht nicht ganz so hilfreich.
Jetzt schon einmal meinen Dank fürs lesen!
Gruß
Günther