Quellcode-Darstellungen mit Scrollbar durch overflow:auto;

Bei der Anzeige von Quellcode innerhalb von Webseiten stellt sich oft das Problem, dass der Quellcode, der normalerweise in einer Zeile steht, länger ist, als die Inhaltsspalte der Website breit.

Praktisch ist es dann, wenn das Element, in welchem der Quellcode dargestellt wird, automatisch einen horizontalen Scrollbalken einblendet, wenn die Zeile breiter ist, als das umschließende Element, wie hier zu sehen:

Dazu genügt es, für das Element, innerhalb dessen der Quellcode angezeigt wird, die CSS-Definition overflow:auto; zu notieren!

Das CSS für eine Quellcode-Darstellungs-Box könnte zum Beispiel so aussehen:

pre {
 margin:1em;
 padding:1em;
 border:1px solid #ededed;
 display:block;
 background-attachment: scroll; /* erzeugt Scrollbar */
 overflow:auto;
}

Zum Anzeigen von Quelltext innerhalb eines HTML-Dokumentes eignet sich übrigens das <pre>-Tag ganz besonders, da es jeden Inhalt zwischen Anfangs- und End-Tag in dicktengleicher Schrift darstellt und Einrückungen so wiedergegeben werden, wie sie beim Editieren eingegeben wurden.

Trotzdem müssen aber Sonderzeichen, wie Tags oder Klammern im HTML-Quelltext als HTML-Entities notiert werden.

Im HTML-Code würde dann also beispielsweise stehen:

<pre>&lt;p&gt;Das ist ein Beispiel-Absatz&lt;/p&gt</pre>

Ganz einfach geht das mit dem Worpress-Plugin Simple Code.

Verwandte Beiträge

• Firefox CSS-Viewer: Blick hinter die Kulissen
• Min-width-Lösung für den Internet Explorer mit purem CSS - von Stu Nicholls
• Quellcode-Darstellungen mit Scrollbar durch overflow:auto;
• IE verdoppelt margin eines Floats in float-Richtung - was man dagegen tun kann
• YAML 2.4 - update
• CSS-Dateien mit Struktur
• YAML - Clearing von Fließumgebungen mit .floatbox

Montag, 15. Mai 2006 23:37 Uhr in CSS 2 Kommentare
Kommentar-Abo kommentieren | TrackBack-URI