Zeilenabstand in Absatz zu groß

[mathefritz]

http://schmieder-laher.de/INARBEIT/2terAbschnittNeu.html laufen lassen;

ist natürlich noch nicht fertig, Angaben werden also später mölicherweise nichtmehr zutreffen.

der Text neben/um das 3eck wird in

http://schmieder-laher.de/INARBEIT/Initialisierungen.js erzeugt

Wenn ich in Initialisierungen.js, Zeile 32, vor "Vorletztes" ein <p> einfüge und in Zeile 35 vor dem letzten Quotes ein </p> dann wird der Zeilenabstand diese Absatzes zu groß. Warum ? Abhilfe?

[Matthias Apsel]

Hallo mathefritz,

p-Elemente haben per default einen oberen und unteren Außenabstand, der übrigens nichts mit dem Zeilenabstand zu tun hat. Setze diesen auf einen dir genehmen Wert.

PS: Ich finde, das Zeichnung und Lösungshinweise nicht in ein td-Element sollten. Ich würde sie von der Tabelle #tastatur entkoppeln und die Tabelle von der Grafik und dem Text umfließen lassen.

Bis demnächst
Matthias

[mathefritz]

Danke Matthias
fürs
tatsächliche hineinschauen.
Mit
oberen und unteren Außenabstand meinst Du wohl margin-top, margin-bottom,
aber die sind nicht das Problem, und auch nicht der Zeilenabstand im p-Element
wie ich es irrtümlich sah,
sondern
daß das img das das auf das Wort "ist" folgende "h"
darstellt, sich so absetzt - egal, wie breit ich das Fenster ziehe und auch
noch den zoom ( Strg-- ) verringere, es beginnt eine neue Zeile . Siehe Bild.
Die
Funktion mixWr, die diesen Text produziert, erzeugt von sich aus keine br oder sonstiges.

...von ...#tastatur entkoppeln: nun, ich will das schon NEBEN der Tastatur haben, keinesfalls darüber oder darunter - vielleicht verstehst Du das, wenn du nach dem Start den Debugger hinzunimmst und Vorlauf() laufen läßt ( simuliert paar Klicks )

[Matthias Apsel]

Hallo mathefritz,

daß das img, das das auf das Wort "ist" folgende "h" darstellt, sich so absetzt - egal, wie breit ich das Fenster ziehe

Kann ich nicht bestätigen.

nun, ich will das schon NEBEN der Tastatur haben, keinesfalls darüber oder darunter

Wenn der Bildschirm breit genug ist, ist es auch neben der Tastatur. Auf schmaleren Bildschirmen müsstestt du so horizontal scrollen, obwohl vielleicht Tastatur und der Rest gemeinsam auf den Bildschirm passen würden, nur untereinander eben.

Bis demnächst
Matthias

[mathefritz]

Hallo Matthias,

Kannst Du nicht bestätigen ? ( daß das "h" sich absetzt )
auch,
wenn Du die Code-Änderung "<p>" ... "/p> einbaust?

Bildschirmbreite: meiner ist ein 1600px*1200px 17Zöller CRT,
mit halber Breite für das Browserfenster noch gut lesbar.

und jetzt wird es noch seltsamer - gibt es eine implizite Spaltenbreitebegrenzung?

ich habe im Debugger folgendes eingetippt

TbHlp2.innerHTML = ''; mixWr(TbHlp2,mSms,["<p>Absatz: ",],["mehr Text, Sym a, Absatzende ", mSa],["</p>",]);

und hier das Ergebnis ( mSa ist wieder ein Index auf eine img src in Array mSms )

[Matthias Apsel]

Hallo mathefritz,

Kannst Du nicht bestätigen ? ( daß das "h" sich absetzt )
auch,
wenn Du die Code-Änderung "<p>" ... "/p> einbaust?

Wenn du einen neuen Absatz „einbaust“, beginnt der natürlich in einer neuen Zeile.

und jetzt wird es noch seltsamer - gibt es eine implizite Spaltenbreitebegrenzung?

Nein. Wenn du einen neuen Absatz erzeugst, beginnt der natürlich in einer neuen Zeile.

TbHlp2.innerHTML = ''; mixWr(TbHlp2,mSms,["<p>Absatz: ",],["mehr Text, Sym a, Absatzende ", mSa],["</p>",]);

Wenn du einen neuen Absatz erzeugst, beginnt der natürlich in einer neuen Zeile.

Bis demnächst
Matthias

[mathefritz]

Hallo Matthias,

neuer Absatzt - neue Zeile ist klar - aber die vielen "-" ? Da scheint was mit der Silbentrennung schief zu laufen.

[Matthias Apsel]

Hallo mathefritz,

neuer Absatzt - neue Zeile ist klar - aber die vielen "-" ? Da scheint was mit der Silbentrennung schief zu laufen.

Ohne Link zur entsprechenden Seite kann dir wohl keiner sagen, wo die vielen Bindestriche herkommen.

Bis demnächst
Matthias

[mathefritz]

Hallo mathefritz,

neuer Absatzt - neue Zeile ist klar - aber die vielen "-" ? Da scheint was mit der Silbentrennung schief zu laufen.

Ohne Link zur entsprechenden Seite

sorry wenn das nicht klarr war .es ist immer noch
http://schmieder-laher.de/INARBEIT/2terAbschnittNeu.html , laufen lassen,
nichts klicken, über Debugger
oder "Javascript-Umgebung" ( so nennt sichs bei ff, Extras->Web-Entwicker )
die Befehlszeile
TbHlp2.innerHTML = ''; mixWr(TbHlp2,mSms,["<p>Absatz: ",],["mehr Text, Sym a, Absatzende ", mSa],["</p>",]);
ausführen lassen.
Es ist seltsam daß da überhaupt Silbentrennung erfolgt da ja noch genug Platz für das ganze Wort wäre.

-- Bin wohl erst Abends wieder dran.
Gruß
Fritz

[Matthias Apsel]

Hallo mathefritz,

sorry wenn das nicht klarr war .es ist immer noch
http://schmieder-laher.de/INARBEIT/2terAbschnittNeu.html , laufen lassen,
nichts klicken, über Debugger
oder "Javascript-Umgebung" ( so nennt sichs bei ff, Extras->Web-Entwicker )
die Befehlszeile
TbHlp2.innerHTML = ''; mixWr(TbHlp2,mSms,["<p>Absatz: ",],["mehr Text, Sym a, Absatzende ", mSa],["</p>",]);
ausführen lassen.

Mach es potenziellen Helfern so einfach wie möglich und stelle die problematische Seite online zur Verfügung ohne dass man erst noch irgendwelche Aktionen ausführen muss.

Ich kann da keine Bindestriche entdecken.

Bis demnächst
Matthias

[mathefritz]

Hallo Matthias,

es ist wirklich sehr nett daß Du Dich noch darum bemühst.
Eigentlich habe ich das Problem unter Verzicht auf p-Tags umgangen.

Ich kann da keine Bindestriche entdecken.

Du HAST also TbHlp2.innerHTML = ''; ... durchgeführt . Dann wird es wohl am Browser liegen; ff 47.0 für SuSE 13.1 ;

http://schmieder-laher.de/INARBEIT/2terAbschnittNeu.html

zeigt nun nach Start unter der Tastatur einen Link, der geklickt die Befehle durchführt.
Das Bild danach ist bei mir immer noch wie das schon gezeigte, und entsteth auch wenn ich der Seite die ganze Bildschirmbreite zugestehe.

Ich fände es vollkommen in Ordnung wenn Du Dich nichtmehr darum kümmerst.

Gruß Fritz.

[Matthias Apsel]

Hallo mathefritz,

javascript:fuerMatthias() „produziert bei mir keine Minusse entlang des Bildes“.

Allerdings ist dein HTML kaputt. Dass die Beschreibung meiner Meinung nach von der Tabelle#Tastatur getrennt werden sollte, hatten wir schon.

Es fehlt eine Doctype-Angabe <!DOCTYPE html>

<!--zu Initialisieren mit ----------------------------------------------------
*    mixWr(document.getElementById('BildA'  ),mSms,[,mSA]);
*    mixWr(document.getElementById('Bildabc'),mSms,[,mSa],[",",mSb],[",",mSc]);
------------------------------------------------------------------------------ -->

Aufeinanderfolgende Bindestriche sind innerhalb eines Kommentars nicht erlaubt, weil bereits die Zeichenfolge -- den Kommentar beendet.

Möglicherweise sind das deine „Minusse“, weil die Browser unterschiedlich fehlertolerant sind.

Bis demnächst
Matthias

[mathefritz]

Hallo Matthias,

DOCTYPE eingebaut, HTML-Kommentare korrigiert, die Minusse bleiben,
ebenso der unerwünschte Umbruch nach dem "ist, ", aus "Initialisierungen.js",
Zeilen 31.., entstehend, durch das p-Tag vor dem Wort "Vorletztes";
wenn dort stattdessen 2mal br-Tags stehen (natürlich dann ohne das /p am
Textende ) tritt das nicht auf. Kann damit leben.

Danke für Deine intensive Mühe.

Fritz.

[Rolf b]

Hallo Mathefritz,

ich habe mir deine mixWr Funktion mal angeschaut. Das Problem ist, dass Du hier Zuweisungen an innerHTML und DOM-Manipulation vermischst. Dieser Aufruf:

mixWr(TbHlp2,mSms,['<p>Absatz: ',],['mehr Text, Sym a, Absatzende ', mSa],["</p>",])

führt im ersten Schleifendurchlauf dazu, dass "<p>Absatz: " ins DOM geschrieben wird. Der Fuchs ergänzt das sofort mit einem </p>, weil Paragraphen ja ein Ende brauchen. Deshalb hängt die zweite Runde das "mehr Text, Sym a, Absatzende " hinter das "</p>".

Du solltest erstmal alles als HTML-String zusammenbauen und es am Ende an innerHTML zuweisen.

Ich könnte jetzt noch Romane über besseres JavaScript schreiben, über Modul-Patterns und Sauberhalten des globalen Namensraumes, aber das führt vieeeel zu weit und ist im Wiki eigentlich gut erklärt. Müsstest Du Dir nur mal zu Gemüte führen.

Rolf

[mathefritz]

Danke Rolf b,

ist das Expertenwissen - oder sogar mit einem Werkzeug beobachtbar?
( mein natürlich nicht Debugging auf Maschinencodeebene );
werd die Änderung mal versuchen,
warscheinlich Morgen Nachmittag online; vormittags Zahnarzt.

Gruß
Fritz.

[Rolf b]

Nein, das war der Firefox-Debugger, den man mit F12 öffnet, und beobachten dessen, was passiert.

Wenn Du den nicht kennst, solltest Du kein JavaScript zu entwickeln versuchen ;-)

[mathefritz]

Hallo Rolf b,
ja, bei mir ist es nicht F12 sondern Extras->Web-Entwickler->Debugger,
allerdings wurde mir schon vor einiger Zeit das addon Firebug empfohlen;
es gelang mir aber nicht, zu beobachten, wie dem <p> vom ff gleich ein </p>
nachgeschoben wird. Mit der nach Deinem Vorschlag geänderten Version von mixWR entstehen nun die Minusse nur mehr wenn der Enge des Fensters wegen nur Mehr 'Ab-' Platz hat -
aber dann macht es irgendwie auch Sinn und ist wohl vom Browser beabsichtigt. Die bisherige Version ist noch für kurze Zeit in schmieder-laher.de/INARBEITold zu haben.

[Rolf b]

Webentwicker-Debugger und F12 ist bei mir das gleiche (FF 43 Windows). Die Standard-Entwicklerwerkzeuge haben in den letzten Jahren sehr zugelegt, ich weiß nicht ob der Firebug noch so große Vorteile hat. Ich arbeite primär mit IE (weil ich muss) und Chrome (weil ich will :D ) und nutze da nur den integrierten Debugger, den man per Druck auf F12 bekommt.

Wenn Du den Debugger offen hast, kannst Du Dir - sobald Du an einem Breakpoint angehalten hast - einen Watch (eine Überwachung) erzeugen. Da habe ich das innerHTML Attribut des von Dir modifizierten DOM Containers eingesetzt, und so gesehen was passiert.

Rolf

[mathefritz]

Danke Rolf b,

ist das Expertenwissen - oder sogar mit einem Werkzeug beobachtbar?

damit hatte ich angedeutet daß ich nicht wußte, wie das Hineinschmugeln eines </p> durch den Browser zu beobchten wäre.
Es ist aber auch ohne debugger, 'ganz einfach' demonstierbar (ganz einfach Apostrophiert, da in den Details der Teufel steckt . Man verzeihe bitte den dürftigen Kopf, für die Demo reicht er).

<html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
  </head>
  <body>
    <span id='bb'></span>
                   <span id = 'out'>x</span><br>
  <script>
      s='';
      b = document.getElementById('bb');
      p = document.getElementsByTagName('p');
      
      s = "p-Elemente vor b.innerHTML = '&lt;p&gt;1'; " +p.length;
      
      b.innerHTML = "<p>1";
      
      s += "<br><br>nach b.innerHTML&nbsp;&nbsp; = '&nbsp;&nbsp;&nbsp;&lt;p&gt;1'; "+p.length;
      
      b.innerHTML += "2</p>";
      
      s += "<br>nach b.innerHTML += '2&lt;/p&gt;'; &nbsp;&nbsp;"+p.length;

      document.getElementById('out').innerHTML = s;
  </script>
  </body>
</html>