Code-Block anlegen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Code-Block anlegen Thu, 21 Nov 13 14:32:45 Z https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595137#m1595137 https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595137#m1595137 <p>Hello to everyone!</p> <p>ich hätte da eine Anfängerfrage, da ich mich in HTML einarbeite.</p> <p>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.</p> <p>Gedacht hatte ich an eine Lösung, die ich im Ubuntuforum fand:<br> <a href="http://forum.ubuntuusers.de/topic/brennen-einer-dvd-mit-brasero-bleibt-beim-umwa/" rel="nofollow noopener noreferrer">http://forum.ubuntuusers.de/topic/brennen-einer-dvd-mit-brasero-bleibt-beim-umwa/</a></p> <p>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.</p> <p>Wie wird so etwas eigentlich gemacht?</p> <p>Ich habe schon die CSS-Dateien durchgesucht, aber nichts gefunden.</p> <p>Ich bitte um einen Tipp.<br> Vielen Dank<br> AugustQ</p> Code-Block anlegen Thu, 21 Nov 13 15:00:55 Z https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595143#m1595143 https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595143#m1595143 <p>Hallo,</p> <blockquote> <p>Wie wird so etwas eigentlich gemacht?</p> <p>Ich habe schon die CSS-Dateien durchgesucht, aber nichts gefunden.</p> </blockquote> <p>Dann such nochmal nach "overflow" und "max-height".</p> <p>Gruß<br> Kalk</p> Code-Block anlegen Thu, 21 Nov 13 15:47:24 Z https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595142#m1595142 https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595142#m1595142 <p>@@AugustQ:</p> <p>nuqneH</p> <blockquote> <p>Im Source der Seite beginnt der Block mit <pre class="notranslate"></p> </blockquote> <p>Das sollte besser <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span> <span class="token attr-name">translate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> heißen. [<a href="http://www.w3.org/International/questions/qa-translate-flag" rel="nofollow noopener noreferrer">qa-translate-flag</a>]</p> <p>Qapla'</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> Code-Block anlegen Thu, 21 Nov 13 15:53:43 Z https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595138#m1595138 https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595138#m1595138 <blockquote> <p>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.</p> </blockquote> <p>Ich finde im Firefox mit der Quellcode-Ansicht für die Auswahl:<br> <code class="language-javascript"><span class="token operator"><</span>pre style<span class="token operator">=</span><span class="token string">"height: 15em; max-height: none;"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"notranslate"</span><span class="token operator">></span></code></p> <p>Im Source-Code für die gesamte Seite wie Du auch:<br> <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>notranslate<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></p> <p>In der main-sprite.css finde ich den zutreffenden Eintrag:<br> <code class="language-css"><span class="token selector">div.code,pre</span><span class="token punctuation">{</span><span class="token property">overflow</span><span class="token punctuation">:</span>auto<span class="token punctuation">;</span><span class="token property">max-height</span><span class="token punctuation">:</span>15em<span class="token punctuation">;</span><span class="token punctuation">}</span></code></p> <blockquote> <p>Wie wird so etwas eigentlich gemacht?</p> </blockquote> <p>Ich vermute, der Browser zeigt mir an, was er schon errechnet hat.</p> <p>Jörg Reinholz</p> Code-Block anlegen Sat, 23 Nov 13 14:55:47 Z https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595139#m1595139 https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595139#m1595139 <p>Hi,</p> <p>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).</p> <p>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.</p> <p>Und das scheint die Stelle zu sein:</p> <pre><code class="block language-css"><span class="token selector">pre</span><span class="token punctuation">{</span> background-color<span class="token punctuation">:</span>#eee<span class="token punctuation">;</span> font-family<span class="token punctuation">:</span>monospace<span class="token punctuation">;</span> border<span class="token punctuation">:</span>1px solid #aaa<span class="token punctuation">;</span> padding<span class="token punctuation">:</span>0 0.4em<span class="token punctuation">;</span> overflow<span class="token punctuation">:</span>auto<span class="token punctuation">;</span> font-style<span class="token punctuation">:</span>normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">div.code,pre</span><span class="token punctuation">{</span> overflow<span class="token punctuation">:</span>auto<span class="token punctuation">;</span> max-height<span class="token punctuation">:</span>15em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>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.</p> <p>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.</p> <p>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).</p> <p>Ich suche weiter. Insbesondere diesen Aufklapp-Mechanismus habe ich noch nicht hingekriegt. Für einen Tipp bin ich offen.</p> <p>Vielen Dank an die Autoren der Antworten. Die Hinweise haben mir weitergeholfen.<br> Schönen Gruß<br> August</p> Code-Block anlegen Sat, 23 Nov 13 16:09:14 Z https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595140#m1595140 https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595140#m1595140 <p>Hallo,</p> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <blockquote> <p>Für Tipps bin ich trotzdem dankbar. Soweit ich das verstanden habe werden mit diesen Anweisungen Variablen gesetzt (bzw. Standardwerte überschrieben).</p> </blockquote> <p>Vielleicht meinst du das Richtige, die Ausdrucksweise ist aber total falsch.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>Ciao,<br>  Martin</p> <div class="signature">-- <br> Man gewöhnt sich an allem, sogar am Dativ.<br> Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( </div> Code-Block anlegen Mon, 25 Nov 13 19:05:04 Z https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595141#m1595141 https://forum.selfhtml.org/self/2013/nov/21/code-block-anlegen/1595141#m1595141 <p>Hallo Martin,</p> <p>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.</p> <p>Ich suche einfach ein paar Bausteine, die ich in meinen Blog einbauen kann, mehr nicht.</p> <p>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.</p> <p>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.</p> <p>Einen weiteren Baustein habe ich, und Experte in HTML und CSS will ich gar nicht werden.</p> <p>Schönen Gruß<br> AugustQ</p>