pre begrenzen

[ripmav]

Hallo,
ich möchte einen Text, der mit einem <pre> tag eingebunden ist, begrenzen, da sonst das Design der Seite "gesprengt" werden würde.

Meine Idee war folgende:
<div style="overflow: scroll; margin: 5px;">
    <pre>Langer Text</pre>
</div>

Firefox & Opera können das - Wird der Text im pre zu lang, wird der Scrollbalken des divs aktiv. Der IE 7 und der Safari 3.1 hingegen lassen die Scrollbalken inaktiv und somit wird das Design "gesprengt".

Ich habe testweise beim style des divs width: 800px; angegeben; dann funktioniert das in allen Browsern. Das Problem ist nur, dass ich die Breite nicht in Pixeln (bzw. %) angeben kann, da ich nicht weiss, wieviel Platz für das pre zur Verfügung steht..

Was könnte man tun?
MfG,
Max

[Pete]

Hallo du willst also das Pre zweckentfremden, denn es tut ja genau was es soll, den text gleich deinem quelltext darzustellen.

Hmm, eine andere Möglichkeit:
Nimm ein textarea und formatiere das, müsste besser klappen.

Wenn nicht, dann erzähl mal genau was du darstellen willst, um dir besser zu helfen.

Pete

[ripmav]

Ich möchte C++ Code farblich anpassen, damit der Code besser lesbar ist.

Mithilfe von <span> tags formatiere ich den Text (eigentlich nur die Farbe, z.b. von Keywords, strings usw.).
Soweit ich weiß, kann man in textareas nicht einzelne Textstücke formatieren.

Bisher habe ich den C++ Code mithilfe eines Tools umgewandelt, der mir den Code in <pre> tags einbaut.

Eine Alternative wäre natürlich, sich ein eigenes Konvertierungsprogramm zu erstellen, das ein Zeilenende mit <br /> macht, und weiterhin Keywords einfärbt usw.
Das ist halt sehr aufwändig..
Aber vielleicht gibt es ein solches Programm bereits?
Ich habe keines gefunden..

[Pete]

Hi,

Aber vielleicht gibt es ein solches Programm bereits?

Ja, http://de.wikipedia.org/wiki/GeSHi

Pete

[ripmav]

Aber vielleicht gibt es ein solches Programm bereits?

Ja, http://de.wikipedia.org/wiki/GeSHi

Leider nein!
Auch dieses Script erstellt ein <pre> tag..

[Daniel unreg]

Hallo,

Ich habe testweise beim style des divs width: 800px; angegeben; dann funktioniert das in allen Browsern. Das Problem ist nur, dass ich die Breite nicht in Pixeln (bzw. %) angeben kann, da ich nicht weiss, wieviel Platz für das pre zur Verfügung steht..

Warum weisst du das nicht? Das Element, dass das pre-Element enthält wird doch wohl auch eine definierte Breite besitzen?

Gruß

[ripmav]

Warum weisst du das nicht? Das Element, dass das pre-Element enthält wird doch wohl auch eine definierte Breite besitzen?

Nein, es ist eine Zelle in einer größeren Tabellenstruktur. Weil die Tabelle als width: 75% hat, müsste die Größe des <pre> tags etwas in der Art von 75% - 20px sein (ist nur ein Beispiel)..

[Daniel unreg]

Hallo,

Nein, es ist eine Zelle in einer größeren Tabellenstruktur. Weil die Tabelle als width: 75% hat, müsste die Größe des <pre> tags etwas in der Art von 75% - 20px sein (ist nur ein Beispiel)..

Oh, die böse Tabelle aber auch.

Und wie wäre es mit einer Angabe wie 70% statt der vollen 75%?

Gruß

[ripmav]

Und wie wäre es mit einer Angabe wie 70% statt der vollen 75%?

Hallo,
eine echt gute Idee! Ich habe es einmal ausprobiert:

<div style="width: 70%; overflow: scroll; margin: 5px;">
    <pre>Langer Text</pre>
</div>

In Firefox und Opera geht das, aber Safari und der IE nicht.
Es sieht aus, als ob sie beim Aufrufen der Seite die Breite (also 70%) ausrechnen, wenn man aber das Fenster in der Größe ändert, bleibt das alte width..

[ripmav]

Um mal eine kleine Zusammenfassung zu schreiben:

Es ist anscheinend nicht möglich, ein <div>, welches ein <pre> Element enthält, dynamisch in der Größe festzulegen.
Die einzige Begrenzung, die möglich ist, ist eine Angabe in Pixeln.

Beispiel:
<div style="width: 100px; overflow: scroll; margin: 5px;">
    <pre>Langer Text</pre>
</div>

Wenn ich das korrekt aufgefasst habe, bleiben mir folgende Möglichkeiten:
1. Die Größe des <div> Elements per Javascript in onresize ändern
2. Das <pre> tag irgendwie anders begrenzen

Nr. 1 fällt gleich weg, da onresize nicht im JS-Standard ist.

Also bleibt nur Nr. 2 übrig:
Man könnte z.b. das <pre> auslagern in eine andere html-datei, und diese mithilfe eines <iframe> Elements einbinden. Das finde ich aber sehr unschön und aufwendig.

Wie könnte man also das <pre> besser begrenzen (möglichst mit Scrollbalken) ?

[Ingo Turski]

Hi,

Es ist anscheinend nicht möglich, ein <div>, welches ein <pre> Element enthält, dynamisch in der Größe festzulegen.

Frage: Warum überhaupt <div> und <pre>?
Was passiert, wenn Du lediglich das dafür vorgesehene Element <code> verwendest und dieses entsprechend formatierst?

freundliche Grüße
Ingo

[ripmav]

Was passiert, wenn Du lediglich das dafür vorgesehene Element <code> verwendest und dieses entsprechend formatierst?

Hallo,
das <code> Element hat (fast) dieselben Eigenschaften wie das <pre> Element und verhält sich (leider :-( ) genauso wie das <pre> Element in Sachen Breitengebrenzung..

[Auge]

Hallo

Wie könnte man also das <pre> besser begrenzen (möglichst mit Scrollbalken)?

Etwa, indem man ihm eine Breite zuweist?

Tschö, Auge

[ripmav]

Etwa, indem man ihm eine Breite zuweist?

Also wenn du <pre width="100"> meinst, das ist nicht mehr im XHTML Standard.
Per CSS geht es auch nicht, der Text wird in jedem Browser einfach um die Angegebene Pixelzahl nach rechts verrückt.

[Auge]

Hallo

Etwa, indem man ihm eine Breite zuweist?

Also wenn du <pre width="100"> meinst, das ist nicht mehr im XHTML Standard.

Wo sprach ich davon?

Per CSS geht es auch nicht, der Text wird in jedem Browser einfach um die Angegebene Pixelzahl nach rechts verrückt.

Ich weiß ja nicht, was du nimmst, aber das in diesem HTML-Dokument enthaltene pre ...

[code langhtml]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test mit &lt;pre&gt;</title>
  <style type="text/css">
  pre { border:1px solid; width:30em; overflow:auto; }
  </style>
 </head>
 <body>
  <pre>Irgendein Quelltext mit extraordinaire langer Zeile, die irgendwelchen sinnlosen Text enthalten.
   Diese Zeile beginnt nach drei Leerzeichen.
  </pre>
 </body>
</html>[/code]

... ist sowohl breitenbeschränkt als auch, bei überbreitem Text, mit einem Scrollbalken versehen. Nichtmal der Inhalt wird in irgendeiner Art irgendwohin verschoben. Was, dammichnochmal, ist daran nun so schwer?

Tschö, Auge

[ripmav]

Oh Entschuldigung, falsch von mir formuliert!
Das mit dem nach-rechts-verrücken tritt nur auf, wenn man <pre width="100"> verwendet. Mit CSS funktioniert es, ABER nur wenn man eine Pixel-Zahl angibt.
Versuche es mal mit einer % Angabe, z.b. 70%, die ich schließlich verwenden muss.
Ich erlaube mich hier zu zitieren: "Die einzige Begrenzung, die möglich ist, ist eine Angabe in Pixeln."

Wie kann man nun eine %-Angabe machen?

[Auge]

Hallo

Das mit dem nach-rechts-verrücken tritt nur auf, wenn man <pre width="100"> verwendet.

Dann verwende es nicht.

Mit CSS funktioniert es, ABER nur wenn man eine Pixel-Zahl angibt.

Ich habe die Breitenangabe mit "em" vorgenommen und es funktioniert.

Wie kann man nun eine %-Angabe machen?

Indem man für pre { width:70%; } angibt. Allerdings muss dem Browser auch die Bezugsbreite bekannt sein. Das oder die Elternelement(e) müssen also auch eine breite haben, von der aus die 70% berechnet werden können.

Welches das in deinem Fall ist, weißt nur du allein. Der Code aus dem Eröffnungsposting hat jedenfalls keine Breitenangabe.

<div style="[code lang=css]overflow: scroll; margin: 5px;">
    <pre>Langer Text</pre>
</div>[/code]

Tschö, Auge

[ripmav]

Indem man für pre { width:70%; } angibt. Allerdings muss dem Browser auch die Bezugsbreite bekannt sein. Das oder die Elternelement(e) müssen also auch eine breite haben, von der aus die 70% berechnet werden können.

Leider ist das div in einer Tabellenzelle. Die Größe ist nicht indirekt bekannt, sondern ergibt sich durch die seitlich anliegenden Zellen, die jeweils 10px breit sind. Die gesamte Tabelle hat als width 75%.

Also ist es in meinen Fall nicht möglich ein pre mit einer %-Angabe zu begrenzen, oder?

Übrigens: Ich habe deinen Code nochmal ausprobiert, das div weggelassen und das width: 70% dem pre zugewiesen. Folge: Verrückung nach rechts (IE und Safari)..
Das tritt wohl nur innerhalb einer Tabellenzelle auf..

[Orlando]

ich möchte einen Text, der mit einem <pre> tag eingebunden ist, begrenzen, da sonst das Design der Seite "gesprengt" werden würde.

pre, code {  
 white-space:[link:http://www.w3.org/TR/css3-text/#white-space@title=pre-wrap];      /* CSS3 */  
 white-space:[link:http://developer.mozilla.org/en/docs/CSS:white-space@title=-moz-pre-wrap]; /* Gecko */  
 white-space:[link:http://www.opera.com/docs/specs/opera6/#xml-css-link@title=-pre-wrap];     /* Opera 4-6 */  
 white-space:[link:http://www.opera.com/docs/specs/opera7/#xml-css-link@title=-o-pre-wrap];   /* Opera 7+ */  
 word-wrap:[link:http://msdn2.microsoft.com/en-us/library/ms531186(VS.85).aspx@title=break-word];      /* IE 5.5+ */  
}

(Beispiel)

Roland