<pre><code> macht probleme

[Meike]

Hallo,
ich versuche Code nach diesem Schema darzustellen:

<pre class="code">
<code>
usw....

Als css dient:

*{
line-height : 160%;
font-family : arial, "sans serif", helvetica, verdana;
font-size : 10px;
}
body, td {
font-size : 12px;
}
.code {
padding-left : 30px;
padding-top : 20px;
font-size : 21px;
font-family :"courier new", verdana, fixedsys, system;
line-height : 200%;
}

-------------

Nach Validator vollkommen OK.

Aber die Code-Darstellung bezieht sich immer auf
den globalen CSS Eintrag "*{...}", während ".code{...}"
ignoriert wird. Ausgenommen die Angabe existiert nicht
im globalen, dann reagiert das Aussehen auf ".code".

In diesem Beispiel will ich Textgrösse = 21px haben
und Font = "courier new", stattdessen erhalte ich
10px arial.

Woran liegt das, und vor allem wie kann ich das ändern?
Denn diese Reaktion passiert nur bei <code> bei allem anderen
funktioniert alles wie gewünscht.

Gruss Meike

[Christoph Schnauß]

hallo,

ich versuche Code nach diesem Schema darzustellen:
<pre class="code">
<code>

Was selbstverständlich so nicht funktinieren kann. Versuchs mal mit

<pre class="code">
&lt;code&gt;

Und schau dir nochmal an, was <pre> eigentlich tut.

Grüße aus Berlin

Christoph S.

[Meike]

Hallo Christoph,

Was selbstverständlich so nicht funktinieren kann. Versuchs mal mit

<pre class="code">
&lt;code&gt;

Und schau dir nochmal an, was <pre> eigentlich tut.

Was willst du mir denn da erzählen?

Schau mal in deinem Link ein paar zeilen höher,
da steht auch:

<pre>
 <code>
  FUNCTION Osterberechnung(year : INTEGER) : INTEGER;
  VAR  a, b, c, d, e, f, g, h, i, k, l, m : INTEGER;
  BEGIN
     a  :=  year MOD 19;
     b  :=  year DIV 100;
     c  :=  year MOD 100;
     d  :=  b DIV 4;
     e  :=  b MOD 4;
     f  :=  ( b + 8 ) DIV 25;
     g  :=  ( b  f + 1 ) DIV 3;
     h  :=  ( 19 * a + b  d  g + 15 ) MOD 30;
     i  :=  c DIV 4;
     k  :=  c MOD 4;
     l  :=  ( 32 + 2 * e + 2 * i  h  k ) MOD 7;
     m  :=  ( a + 11 * h + 22 * l ) DIV 451;
     Easter :=  h + l - 7 * m + 22;
  END{FUNC};
 </code>
</pre>

Also versteh ich deine Antwort nicht.

vg.
Meike

[Gunnar Bittersmann]

Hello out there!

<pre class="code">
<code>

Was selbstverständlich so nicht funktinieren kann.

Warum nicht?

Versuchs mal mit

<pre class="code">
&lt;code&gt;

Warum das? Es soll sicherlich nicht "<code>" im Viewport angezeigt werden.

Und schau dir nochmal an, was <pre> eigentlich tut.

Führst du Selbstgespräche? >;->

See ya up the road,
Gunnar

[rob]

Hi!

Deine eigentlich Frage hat Christoph dir ja bereits beantwortet.

Ich wollte aber hier zu nach mal was schreiben:

font-family : arial, "sans serif", helvetica, verdana;

Du möchtest, daß die Arial (wenn vorhanden) als Schrift eingesetzt wird.
Ist diese nicht vorhanden, wird eine Ersatzschrift genommen.
Ersatzschriften hast du auch angegeben.
"sans serif" ist allerdings falsch. Es sollte "sans-serif" heißen.
Und dabei handelt es sich um eine generische Schriftfamilie. Die solltest du als letztes angeben:
font-family: arial, helvetica, verdana, sans-serif;
Ist keine Arial vorhanden, wird die Helvetica genommen.
Ist die nicht vorhanden, wird die Verdana genommen.
Ist die auch nicht vorhanden, wird eine andere serifenlose Schrift genommen.
So sollte es aussehen. Anders herum ergibt es irgendwie nicht wirklich Sinn.

Schöner Gruß,
rob

[Meike]

Deine eigentlich Frage hat Christoph dir ja bereits beantwortet.

Ich wollte aber hier zu nach mal was schreiben:

font-family : arial, "sans serif", helvetica, verdana;

So sollte es aussehen. Anders herum ergibt es irgendwie nicht wirklich Sinn.

Danke für den Hinweis, aber war jetzt nicht wirklich drüber
nachgedacht nur mal kurz hingeschrieben, normal mache ich da keine
Fehler ;-)

Aber seltsam, dass der Validator deine Hinweise nicht erkennt.

Gruss
Meike

[rob]

Hi!

Aber seltsam, dass der Validator deine Hinweise nicht erkennt.

Kann er auch nicht.
Es könnte ja sein, daß es einen Font gibt, der "sans serif" heißt.

font-family: gibt-es-nicht;
würde der Validator also auch nicht anmeckern. Könnte ja sein, daß jemand einen Font mit diesem Namen erstellt...

Schöner Gruß,
rob

[Meike]

Hey Rob,

würde der Validator also auch nicht anmeckern. Könnte ja sein, daß jemand einen Font mit diesem Namen erstellt...

stimmt ja, na ja schon spät ;-)

Aber mein eigentliches Problem ist leider noch nicht gelöst.

Meike

[Gunnar Bittersmann]

Hello out there!

Aber die Code-Darstellung bezieht sich immer auf
den globalen CSS Eintrag "*{...}", während ".code{...}"
ignoriert wird.

Nein, wird sie nicht. Sie gilt für die Elemente der Klasse "code"; in dem Falle

<pre class="code">
<code>

auf das 'pre'-Element.

Auf dessen Kindelement passt allerdings der '*'-Selektor.

Aber wozu eigentlich zwei Elemente? 'code' reicht doch (die Klasse "code" ist auch überflüssig), dem 'code'-Element verpasst du einen geeigneten Wert für die 'http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space@title=white-space'-Eigenschaft und gut ist.

See ya up the road,
Gunnar

[Meike]

Hallo Gunnar,

Aber die Code-Darstellung bezieht sich immer auf
den globalen CSS Eintrag "*{...}", während ".code{...}"
ignoriert wird.

Nein, wird sie nicht. Sie gilt für die Elemente der Klasse "code"; in dem Falle

Doch, leider.
Aber wie ich mittlerweile weiss nur deshalb, weil innerhalb
von <code> weiter Tags sind und die code formatierung
scheint sich nicht zu vererben.

Auf dessen Kindelement passt allerdings der '*'-Selektor.

Auch das habe ich bereits probiert.

Aber wozu eigentlich zwei Elemente? 'code' reicht doch (die Klasse "code" ist auch überflüssig), dem 'code'-Element verpasst du einen geeigneten Wert für die 'http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space@title=white-space'-Eigenschaft und gut ist.

»»

Weil es so, unter anderem, aus semantischen Gründen
empfohlen wird und sich bei vielen Seiten eingebürgert hat.

Nebenbei mal gefragt: Ist <code> eigentlich als richtiger
TAG zu verstehen oder gibt es da Unterschiede?
Ich meine ist ein normaler TAG wie <div> <h1> <p> usw.
gleichwertig mit Code? Ich frage deshalb, weil mit
Ausnahme von span alle browser ja Standard anzeigen auch
ohne css für die Tags haben, für code aber nicht, oder ?

Aber zurück zum Thema.
Probiere das Folgende und du wirst sehen was ich meine:

<style type="text/css">
<!--
*{font-size:10px;}
body{font-size:12px;}
pre{font-size:16px}
.code{font-size:28px;}
code{font-size:28px;font-size:inherit;white-space:pre;}
pre * code{font-size:28px;}
p{white-space:pre;}

-->
</style>

Normaler Text
<pre>Dieser Text ist 12px gross</pre>
<pre class="code">Hat 28px aber bei span <span>mal sehen</span></pre>
<pre><code>Sollte 28px haben, hat aber <p>Hier mal ein p</p> nur 10px bei Kindelementen<span>hallo</span>weiter</code></pre>
<code class="code">Sollte auch 28px haben, hat aber auch nur 10px bei <span>childs</span>, na ja</code>

<code>
<p>Code im P
auch mal white-space versuch der scheitert
</p>
code normal
auch mal eine zeileumbruch
und noch einmal, aber dann<br>
<span>code im span</span>
<div>code im div</div>
<h2>code im h2 tag</h2>

Ich möchte aber, dass alle Kindelemente sich nach der codeformatierung richten,
was muss ich dafür machen? Habe es auch erfolglos mit inherit probiert.
<code>

[rfb]

Moin

Ich möchte aber, dass alle Kindelemente sich nach der codeformatierung richten,
was muss ich dafür machen? Habe es auch erfolglos mit inherit probiert.
<code>

code, code * {...}
gilt für code sowie alle Nachfahrenelemente von code

Gruß
rfb

[D.R.]

Hallo,

Nein, wird sie nicht. Sie gilt für die Elemente der Klasse "code"; in dem Falle

Doch, leider.
Aber wie ich mittlerweile weiss nur deshalb, weil innerhalb
von <code> weiter Tags sind und die code formatierung
scheint sich nicht zu vererben.

Doch, das tun sie. Allerdings werden sie ja wieder von deinem Universalselektor überschrieben. Wenn du das verhinder willst, kannst du z.B. folgendes machen:

pre code, pre code * {}

Also einmal für das Element selbst, und zusätzlich noch für die untergeordneten Elemente.

Nebenbei mal gefragt: Ist <code> eigentlich als richtiger
TAG zu verstehen oder gibt es da Unterschiede?
Ich meine ist ein normaler TAG wie <div> <h1> <p> usw.
gleichwertig mit Code? Ich frage deshalb, weil mit
Ausnahme von span alle browser ja Standard anzeigen auch
ohne css für die Tags haben, für code aber nicht, oder ?

Doch. <code> wird immer mit diktengleicher Schrift angezeigt. Das ist in einem <pre>-Element natürlich nicht sichtbar, weil dieses ja auch diktengleiche Schrift nutzt.

Ich möchte aber, dass alle Kindelemente sich nach der codeformatierung richten

s.o.

Habe es auch erfolglos mit inherit probiert.

für die Kindelemente?

mfg. Daniel

[D.R.]

Hallo,

Aber wozu eigentlich zwei Elemente? 'code' reicht doch (die Klasse "code" ist auch überflüssig), dem 'code'-Element verpasst du einen geeigneten Wert für die 'http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space@title=white-space'-Eigenschaft und gut ist.

Das ist keine gute Idee, weil man den Code ohne CSS dann nicht mehr lesen könnte. Ich würde das HTML eher so lassen und den Code einfach per

pre code {}

formatieren.

mfg. Daniel