Code-Block anlegen

[AugustQ]

Hello to everyone!

ich hätte da eine Anfängerfrage, da ich mich in HTML einarbeite.

Ich lege gerade einen Blog an, bei Blogger (also Google). Und darin will ich einen Block mit Auszügen aus Programmcode oder einer Konsolenausgabe oder .... einfügen.

Gedacht hatte ich an eine Lösung, die ich im Ubuntuforum fand:
http://forum.ubuntuusers.de/topic/brennen-einer-dvd-mit-brasero-bleibt-beim-umwa/

Im Source der Seite beginnt der Block mit <pre class="notranslate">, gefolgt von den Textzeilen. Sobald mehr als 10 Zeilen Text enthalten sind erscheint ein Scrollbar rechts.

Wie wird so etwas eigentlich gemacht?

Ich habe schon die CSS-Dateien durchgesucht, aber nichts gefunden.

Ich bitte um einen Tipp.
Vielen Dank
AugustQ

[Tabellenkalk]

Hallo,

Wie wird so etwas eigentlich gemacht?

Ich habe schon die CSS-Dateien durchgesucht, aber nichts gefunden.

Dann such nochmal nach "overflow" und "max-height".

Gruß
Kalk

[Gunnar Bittersmann]

@@AugustQ:

nuqneH

Im Source der Seite beginnt der Block mit <pre class="notranslate">

Das sollte besser <pre translate="no"> heißen. [qa-translate-flag]

Qapla'

[Jörg Reinholz]

Im Source der Seite beginnt der Block mit <pre class="notranslate">, gefolgt von den Textzeilen. Sobald mehr als 10 Zeilen Text enthalten sind erscheint ein Scrollbar rechts.

Ich finde im Firefox mit der Quellcode-Ansicht für die Auswahl:
<pre style="height: 15em; max-height: none;" class="notranslate">

Im Source-Code für die gesamte Seite wie Du auch:
<pre class="notranslate">

In der main-sprite.css finde ich den zutreffenden Eintrag:
div.code,pre{overflow:auto;max-height:15em;}

Wie wird so etwas eigentlich gemacht?

Ich vermute, der Browser zeigt mir an, was er schon errechnet hat.

Jörg Reinholz

[AugustQ]

Hi,

ich habe mal weiter gespielt: den Quelltext habe ich lokal gespeichert, die zugehörigen Stylesheets ebenfalls. Dann habe ich auf dem PC den Internetzugang ausgeschaltet und mir dann die Seite im Firefox angesehen: voila, sie geht (zur Sicherheit habe ich auch mal das Netzwerkkabel gezogen - gleiches Bild).

Dann ahbe ich mit der HTML-Datei ein wenig rumgespielt: die Anweisungen für das von mir gewünshte Element stehen in der Datei main-sprite.css.

Und das scheint die Stelle zu sein:

pre{  
    background-color:#eee;  
    font-family:monospace;  
    border:1px solid #aaa;  
    padding:0 0.4em;  
    overflow:auto;  
    font-style:normal;  
    }  
div.code,pre{  
    overflow:auto;  
    max-height:15em;  
    }  

Ich habe das mal in eine andere HTML-Datei eingebaut und mir das Ergebnis angesehen: sieht schon ganz gut aus. Auf der Ubuntuseite ist allerdings noch 'vergrößern' bzw. 'verkleinern' angegeben, das habe ich noch nicht drin.

Nun versteh ich obigen Code noch nicht. Von HTML versteh ich mittlerweile ein bissel, von CSS noch nix. Also habe ich mal gekramt und ein Buch zum Thema HTML + ... gefunden, aus dem Franzis-Verlag, von 1999. Da bin ich gerade am Nachlesen.

Für Tipps bin ich trotzdem dankbar. Soweit ich das verstanden habe werden mit diesen Anweisungen Variablen gesetzt (bzw. Standardwerte überschrieben). Der Code-Block wird also über den pre-Tag angelegt, die Anweisung class="notranslate" hat für das Aussehen keine Bedeutung (das kann man durch einen anderen Text ersetzen, auch ganz weglassen).

Ich suche weiter. Insbesondere diesen Aufklapp-Mechanismus habe ich noch nicht hingekriegt. Für einen Tipp bin ich offen.

Vielen Dank an die Autoren der Antworten. Die Hinweise haben mir weitergeholfen.
Schönen Gruß
August

[Der Martin]

Hallo,

Nun versteh ich obigen Code noch nicht. Von HTML versteh ich mittlerweile ein bissel, von CSS noch nix. Also habe ich mal gekramt und ein Buch zum Thema HTML + ... gefunden, aus dem Franzis-Verlag, von 1999. Da bin ich gerade am Nachlesen.

tu dir bitte einen großen Gefallen und leg das Buch dorthin zurück, wo du es gefunden hast. Oder vergrab es ganz, ganz tief. Nichts gegen den Franzis-Verlag, aber 1999 ist nach IT-Maßstäben quasi Jungsteinzeit. Vieles von dem, was da drinsteht, wird heute hoffnungslos veraltet sein, manches vielleicht sogar falsch.

Für Tipps bin ich trotzdem dankbar. Soweit ich das verstanden habe werden mit diesen Anweisungen Variablen gesetzt (bzw. Standardwerte überschrieben).

Vielleicht meinst du das Richtige, die Ausdrucksweise ist aber total falsch.

Da wird zunächst mal ein Element des HTML-Dokuments (oder mehrere) ausgewählt - das ist der Teil, der vor der öffnenden geschweiften Klammer steht. Das  kann der Name eines HTML-Elements sein (in deinem Beispiel pre), das kann eine Klasse sein, oder eine Kombination von beiden (so wie div.pre, das alle div-Elemente mit der Klasse "pre" selektiert). CSS kennt aber noch eine ganze Fülle weiterer Selektoren, so dass man Elemente auch anhand ihrer ID, eines beliebigen Attributs oder ihrer Position in der Dokumentstruktur selektieren kann.

Und dann folgt in der geschweiften Klammer eine Folge von Definitionen, von denen jede eine CSS-Eigeschaft nennt und dieser Eigenschaft, durch einen Doppelpunkt getrennt, einen Wert zuweist. Diese Definitionen gelten dann für alle Elemente, die durch den Selektor vor der Klammer erfasst werden.

Ein Buch oder ein Tutorial, eine Einführung in CSS würde ich dir aber allemal empfehlen. Nur sollte es bitte nicht gerade 10 Jahre alt sein.

Ciao,
 Martin

[AugustQ]

Hallo Martin,

ich glaube, Du erwartest zu viel Engagement in Sachen HTML und CSS von mir. Ich will meinen Blog gestaltem und habe festgestellt, daß die dort angebotenen Werkzeuge nicht reichen. Also bin ich auf HTML gewechselt und habe dazu dann auch dieses Buch gesucht/gefunden.

Ich suche einfach ein paar Bausteine, die ich in meinen Blog einbauen kann, mehr nicht.

Mit ist schon klar, daß ein Buch von 99 heute nicht mehr aktuell ist. Vielleicht hätte ich doch ein <g>  an die Jahreszahl anhängen sollen. Die Grundlagen scheinen aber noch zu stimmen.

Ich wollte in HTML einen Code-Block bauen und habe jetzt herausgefunden, wie ich das machen kann. Und die Sache mit dem 'vergrößern' oder 'verkleinern', die ich mal erwähnte, die wird per JavaScript gemacht; da verzichte ich dann halt drauf.

Einen weiteren Baustein habe ich, und Experte in HTML und CSS will ich gar nicht werden.

Schönen Gruß
AugustQ