Dienstag, Juli 30, 2013

Scrollbars und Code bei blogger

Darstellung von Code in Div containern und Verwendung von Scrollbars.

<div style="border: 1px solid brown; background-color:#eee;height: 144px; overflow: scroll; width: 435px;padding:3px;">
<div style="width:990px;">
<pre><code>Code...BlaBla........
</code>
</pre>
</div>
</div>

Die die Darstellung von Code auf der Blogger Seite zeigt obiger Code.
Das erste Div bestimmt,  wie groß die Code Box wird und wie sie aussieht.
Das zweite Div bestimmt, ab welcher Breite ein Text zum Umbruch führt. Auch kann man an dieser Stelle erst mit diesem zweiten Div das Overflow Attribut dazu animieren, einen horizontalen Schiebebalken zu aktivieren.
Das Pre Tag sorgt dafür, dass die Code Zeilenumbrüche und Leerzeichen wie vorgegeben dargestellt werden.
Das Code Tag markiert Anfang und Ende des Code und formatiert standardmäßig in einer monospaced Schriftart.
Den Code lässt man am Besten von einem Wysiwyg Editor wie Expression Web in HTML umwandeln, damit etwaige Steuerzeichen oder Tags als Text und Entities eingesetzt werden.

Keine Kommentare: