• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text Zeile in mehreren <span></span> unterschiedlich bei "Strukturierung" ... warum?

jw1900

Neues Mitglied
Hallo,

ich bin noch neu im HTML und CSS. Als Programmierer lege ich viel Wert auf überschaubare Strukturen und eine Sache, die mir bei vielen HTML-Seiten massiv missfällt ist, dass die Einrückungen "misachtet" werden und oft "meterlange" Zeilen angetroffen werden. Ich habe nun ein konkretes Beispiel und ein Problem, das ich nicht verstehe. Vielleicht kann mir jemand auf die Sprünge helfen:

PROBLEM:
Zunächst bin ich bisher davon ausgegangen, dass Zeilenumbrüche, Blanks und Tabs ("Whitespace") vom Browser ignoriert (bzw., wenn innerhalb eines Ausgabewertes, dann entsprechend zusammengestrichen) werden. Und dass beliebiger Umbruch, Blanks, Tabs AUSSERHALB von Tags unberücksichtigt bleibt.

Nun habe ich ein Beispiel, in dem eine eben so "meterlange" Zeile ist. der GESAMTE ausgegebene Text ist dabei in viele <span></span> Tags "eingekesselt", um Farben der Text-Bestandteile zu ändern.

Ich habe diese Zeile nun in mehrere aufgeteilt und "schön ordentlich" eingerückt, um das ganze besser lesbar zu machen. Vergleiche ich die beiden HTML Seiten nun im Browser, so "mogelt" die schön strukturierte Variante jeweils ein Blank hinzu. Das Ergebnis sieht also FAST gleich aus, aber die Abstände zwischen den einzelnen "Worten" der Zeile sind unterschiedlich.

FRAGE 1: Warum die zusätzlichen Blanks?

FRAGE 2: Gibt es einen "Trick" um diese zu verhindern (und trotzdem die "schöne" Formatierung zu haben?

So sehen die beiden fraglichen Teile (in einer Tabelle aus:

// kaum formatierter Teil
<tr id="FORUM1">
<td>Forum1</td>
<td>F1</td>
<td><span style="color: #000000">
<span style="color: #0000BB">wort1&nbsp;</span><span style="color: #007700">wort2&nbsp;</span><span style="color: #0000BB">wort3&nbsp</span><span style="color: #007700">wort4&nbsp</span>
</span>
</td>
<td>F1 S3<br>Z2</td>
<td>F1 S4</td>
</tr>


// WUNSCH-formatierter Teil (gesamte Seite "sauber" eingerückt, hier nur der fragliche Teil
<tr id="FORUM2">
<td>Forum2</td>
<td>F2</td>
<td>
<span style="color: #000000">
<span style="color: #0000BB">wort1&nbsp;</span>
<span style="color: #007700">wort2&nbsp;</span>
<span style="color: #0000BB">wort3&nbsp</span>
<span style="color: #007700">wort4&nbsp;</span>
</span>
</td>
<td>F2 S3<br>Z2</td>
<td>F2 S4</td>
</tr>



Danke für Eure Hilfe!
 
Werbung:
Leider können wir die styles nicht sehen.
Ich vermute das Problem beim box-sizing.
Normalerweise sind padding und border innerhalb der Box. Falls mit
CSS:
box-sizing: border-box;
das Verhalten verändert wird hast du die Abstände ausserhalb der Contentbox und mit jedem Zeilenumbruch im code ein whitespace.
Du kannst font-size / margin / border / padding auf '0' setzen oder das box sizing wieder auf normales Verhalten.
Oder du schreibst den Code ohne Umbrüche :)
Box-sizing
 
Werbung:
Warum die zusätzlichen Blanks?

Das ist das übliche Browserverhalten. Denn das

Zunächst bin ich bisher davon ausgegangen, dass Zeilenumbrüche, Blanks und Tabs ("Whitespace") vom Browser ignoriert (bzw., wenn innerhalb eines Ausgabewertes, dann entsprechend zusammengestrichen) werden. Und dass beliebiger Umbruch, Blanks, Tabs AUSSERHALB von Tags unberücksichtigt bleibt.

stimmt nicht und hat nie gestimmt. Trotzdem wird diese Falschmeldung immer wiederholt und ist nicht auszurotten.

Richtig ist, das mehrere Leerzeichen und /oder Zeilenumbrüche ignoriert werden.

Gibt es einen "Trick" um diese zu verhindern (und trotzdem die "schöne" Formatierung zu haben?

Nein, wozu auch? HTML und CSS dienen der Informationsweitergabe, nicht einer übertriebenen Optik. Kein Mensch stört sich an den von dir bemängelten Abständen.

Sachlich ist das span-Element zudem ein Inline-Element, das überhaupt nicht durch Absätze im Quelltext in eine extra-Zeile versetzt werden soll. Wenn html-Elemente falsch verwendet werden muss man sich über die Folgen in der Anzeige nicht wundern.

Das table-Element mit seinen Unterelementen ist zudem nur für echte Tabellendaten vorgesehen, da kommt das span-Element somit überhaupt nicht vor, da es keinen Sinn macht.
 
Zuerst einmal: Dannke für's Feedback.

@msi: Ich habe nach einer Möglichkeit zur Formatierung gesucht, aber nicht gefunden. Dir drei Punkte sind mir irgendwie nicht aufgefallen. In anderen Foren die ich nutze und wo viel Code platziert wird, sind diese Symbole immer sichtbar. Gelobe Besserung.

@MrMurphy:
Deine Kritik in Ehren. Einleuchtend ist es aber nicht, dass eine aufgeräumte Strkturiereung einer HTML Datei deren Ausgabe derart beeinflußt. Ich habe den Code, <span> innerhalb von Tabellen zu nutzen, auch nicht selber ausgebrütet sondern von der (Test-)Webseite eines recht kompetent wirkenden PHP-Programmierers generieren lassen, dort gibt's "tonnenweise" Beispielcode für verschiedenste Tabellen und der hier gepostete schien für mich der geeignetste.

Nun denn ... ich freue mich immer über, konstruktive Kritik. Daher vielleicht einfach meine (hinter dem Problem stehende) Fragestellung ... vielleicht hat ja jemand eine genial einfache Lösung:

Eine PHP-Anwendung soll bei der Ausgabe viele - grundsätzlich ähnliche, aber im Detail (Hintergrundfarbe, Rahmen, alternierende Zeilen und Schriftfarbe) dann doch unterschiedliche Tabellen variabler Länge erzeugen, die immer wieder durch andere Textausgaben unterbrochen werden.

Beispiele: Logbuch, Tagespläne, Berichte über Zustandsänderungen über Tage- und Wochen hinweg.
Treten Fehler auf, kommen noch Warnungen (ohne Trace), Fehlermeldungen (mit Trace) hinzu. optional am Ende der Ausgabe das Ablauf-Log, ggf. Debugging-Infos, ParameterAusgabe ...

Die konkrete Ausprägung kann der Benutzer parametrieren. Das heißt, das dasselbe Programm bei einem Anwender mehr und beim anderen weniger Ausgaben erzeugt.

Problematik:
1.) Es ist nicht bekannt, wieviele Tabellen mit welchen konkreten Ausprägungen vorkommen werden

2.) Es soll ein möglichst schlanker Code - auch bei der HTML Ausgabe - entstehen, weil alles auf relativ kleinen Microprozessor-Boards laufen wird.

3.) Es soll die Möglichkeit bestehen, dass Anwender die Farb-Kombinationen selbst festlegen.

4.) Auch der HTML code sollte für einen Menschen einigermaßen lesbar sein ... schon, um im "Fehlerfall" mal gucken zu könne, wo es denn klemmt. Daher möchte ich ja auch diese "Monsterzeilen" vermeiden und eine entsprechende Einrückung haben, damit man schnell findet, wo man suchen muß.

Wie würde sowas idealerweise mit CSS abgebildet? Danke im Voraus für jeden Hinweis.
 
HTML und CSS haben mit Programmierung nichts zu tun. Dein Problem ist, dass du deine Programmierkenntnisse auf HTML und CSS übertragen willst. Daran sind schon viele Programmierer gescheitert. Du musst dich vom Programmieren komplett lösen und zunächst HTML und CSS lernen. Und dich dann natürlich an die HTML- und CSS-Regeln halten. Dazu gehört, dass Leerzeichen und Zeilenumbrüche im Quelltext Auswirkungen auf die Darstellung haben können, nicht müssen.

Einleuchtend ist es aber nicht, dass eine aufgeräumte Strkturiereung einer HTML Datei deren Ausgabe derart beeinflußt.

Autsch. Bei HTML und CSS ist vieles nicht wie bei Programmen strukturiert. Das liegt zum einen daran, dass HTML und CSS grundsätzlich abwärtskompatibel sein sollen und in der Regel auch sind.

Weiterhin sollen, im Gegensatz zu Programmen, Fehler möglichst wenig Auswirkungen haben. Selbst wenn der Code massenhaft Fehler enthält soll der Browser versuchen die enthaltenen Informationen noch irgendwie möglichst sinnvoll darzustellen.
 
Zuletzt bearbeitet:
Werbung:
Als Freund von praktischen Beispielen und Lösungen habe ich mal eine Beispieldatei erstellt:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>HTML-Quelltext</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /*Basisangaben*/
   @media all {
      * {
         min-width: 1px;
      }
      html {
      }
      body {
         max-width: 1200px;
         margin: 0rem auto 0rem auto;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
   }

   /*Quelltext - pre-Element*/
   @media all {
      pre {
         background-color: oldlace;
         white-space: pre-wrap;
         max-width: 1200px;
         padding: 0.5rem;
         border: 2px solid grey;
         border-radius: 0.5rem;
         margin: 1rem;
      }
   }

   /*Problem-CSS*/
   @media all {
      td {
         background-color: gold;
      }
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>HTML-Quelltext</h1>
   </header>
   <nav id="navigation" class="navigation">
   </nav>
   <main id="content" class="content">
      <h2>Hinweise</h2>
      <p>Das Problem sind die Abstände in der dritten Spalte. Die vier Worte werden durch span-Elemente getrennt. In der jeweils ersten Zeile stehen die span-Elemente im Quelltext in einer Zeile, in der jeweils zweiten Zeile stehen die span-Elemente im Quelltext jeweils in einzelnen Zeilen.</p>
      <p>Zudem werden hinter jedem der vier Worte geschützte Leerzeichen genutzt.</p>
      <p>Erste Zeile</p>
      <pre>
                     &lt;span style="color: #0000BB">wort1&amp;nbsp;&lt;/span&gt;&lt;span style="color: #007700"&gt;wort2&amp;nbsp;&lt;/span&gt;&lt;span style="color: #0000BB"&gt;wort3&amp;nbsp;&lt;/span&gt;&lt;span style="color: #007700"&gt;wort4&amp;nbsp;&lt;/span&gt;
      </pre>
      <p>und zweite Zeile</p>
      <pre>
                     &lt;span style="color: #0000BB"&gt;>wort1&amp;nbsp;&lt;/span&gt;>
                     &lt;span style="color: #007700"&gt;>wort2&amp;nbsp;&lt;/span&gt;>
                     &lt;span style="color: #0000BB"&gt;>wort3&amp;nbsp;&lt;/span&gt;>
                     &lt;span style="color: #007700"&gt;>wort4&amp;nbsp;&lt;/span&gt;>
      </pre>
      <p>Die Darstellung mit den normalen Leerzeichen kommt den Wünschen des Fragestellers wohl am nächsten. Das ist zudem die von den HTML-Entwicklern vorgesehene Verwendung von Leerzeichen. Geschützte Leerzeichen sollen nur verwendet werden, wenn sie sachlich sinnvoll sind.</p>
      <p>Nebenbei: Inline-CSS, wie es hier zum Färben von Text verwendet wird, soll bereits seit über 20 Jahren nicht mehr verwendet werden und funktioniert nur, weil die Browser abwärtskompatibel sind. Gleiches gilt für Tabellen (table-Element), das hier offensichtlich zum Layouten mißbraucht wird.</p>
      <h2>Mit Fehlern wie im Originalquelltext</h2>
      <section>
         <table>
            <tr id="FORUM1">
               <td>Forum1</td>
               <td>F1</td>
               <td>
                  <span style="color: #000000">
                     <span style="color: #0000BB">wort1&nbsp;</span><span style="color: #007700">wort2&nbsp;</span><span style="color: #0000BB">wort3&nbsp</span><span style="color: #007700">wort4&nbsp</span>
                  </span>
               </td>
               <td>F1 S3<br>Z2</td>
               <td>F1 S4</td>
            </tr>
         </table>
      </section>
      <section>
         <table>
            <tr id="FORUM2">
               <td>Forum1</td>
               <td>F1</td>
               <td>
                  <span style="color: #000000">
                     <span style="color: #0000BB">wort1&nbsp;</span>
                     <span style="color: #007700">wort2&nbsp;</span>
                     <span style="color: #0000BB">wort3&nbsp</span>
                     <span style="color: #007700">wort4&nbsp;</span>
                  </span>
               </td>
               <td>F1 S3<br>Z2</td>
               <td>F1 S4</td>
            </tr>
         </table>
      </section>
      <h2>Originalquelltext - Fehler korrigiert</h2>
      <section>
         <table>
            <tr id="FORUM1">
               <td>Forum1</td>
               <td>F1</td>
               <td>
                  <span style="color: #000000">
                     <span style="color: #0000BB">wort1&nbsp;</span><span style="color: #007700">wort2&nbsp;</span><span style="color: #0000BB">wort3&nbsp;</span><span style="color: #007700">wort4&nbsp;</span>
                  </span>
               </td>
               <td>F1 S3<br>Z2</td>
               <td>F1 S4</td>
            </tr>
         </table>
      </section>
      <section>
         <table>
            <tr id="FORUM2">
               <td>Forum1</td>
               <td>F1</td>
               <td>
                  <span style="color: #000000">
                     <span style="color: #0000BB">wort1&nbsp;</span>
                     <span style="color: #007700">wort2&nbsp;</span>
                     <span style="color: #0000BB">wort3&nbsp;</span>
                     <span style="color: #007700">wort4&nbsp;</span>
                  </span>
               </td>
               <td>F1 S3<br>Z2</td>
               <td>F1 S4</td>
            </tr>
         </table>
      </section>
      <h2>Geschützte Leerzeichen durch normale Leerzeichen ersetzt</h2>
      <section>
         <table>
            <tr id="FORUM1">
               <td>Forum1</td>
               <td>F1</td>
               <td>
                  <span style="color: #000000">
                     <span style="color: #0000BB">wort1 </span><span style="color: #007700">wort2 </span><span style="color: #0000BB">wort3 </span><span style="color: #007700">wort4 </span>
                  </span>
               </td>
               <td>F1 S3<br>Z2</td>
               <td>F1 S4</td>
            </tr>
         </table>
      </section>
      <section>
         <table>
            <tr id="FORUM2">
               <td>Forum1</td>
               <td>F1</td>
               <td>
                  <span style="color: #000000">
                     <span style="color: #0000BB">wort1 </span>
                     <span style="color: #007700">wort2 </span>
                     <span style="color: #0000BB">wort3 </span>
                     <span style="color: #007700">wort4 </span>
                  </span>
               </td>
               <td>F1 S3<br>Z2</td>
               <td>F1 S4</td>
            </tr>
         </table>
      </section>
      <h2>Leerzeichen weggelassen</h2>
      <section>
         <table>
            <tr id="FORUM1">
               <td>Forum1</td>
               <td>F1</td>
               <td>
                  <span style="color: #000000">
                     <span style="color: #0000BB">wort1</span><span style="color: #007700">wort2</span><span style="color: #0000BB">wort3</span><span style="color: #007700">wort4</span>
                  </span>
               </td>
               <td>F1 S3<br>Z2</td>
               <td>F1 S4</td>
            </tr>
         </table>
      </section>
      <section>
         <table>
            <tr id="FORUM2">
               <td>Forum1</td>
               <td>F1</td>
               <td>
                  <span style="color: #000000">
                     <span style="color: #0000BB">wort1</span>
                     <span style="color: #007700">wort2</span>
                     <span style="color: #0000BB">wort3</span>
                     <span style="color: #007700">wort4</span>
                  </span>
               </td>
               <td>F1 S3<br>Z2</td>
               <td>F1 S4</td>
            </tr>
         </table>
      </section>
   </main>
   <aside class="sidebar">
   </aside>
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html.de/threads/text-zeile-in-mehreren-span-span-unterschiedlich-bei-strukturierung-warum.61287/">https://www.html.de/</a></p>
   </footer>
</body>
</html>
 
Danke für Deine Mühe! Werde mir das heute mittag mal genauer reunziehen. AABER, auf den ersten Blick ist komisch. Ich zitiere Dich mal selber:

Das table-Element mit seinen Unterelementen ist zudem nur für echte Tabellendaten vorgesehen, da kommt das span-Element somit überhaupt nicht vor, da es keinen Sinn macht.

Wenn ich Deine Lösung angucke, finde ich genau das, was Du beim anderen Vorschlag - wie gesagt, das war auch nicht von mir - klar "ins Abseits gestellt" hast ... der Laie staunt, der Fachmann wundert sich ...
 
So, nochmal Danke für die Mühe! Ich habe nicht gleich erkannt, dass Du mir ein Tutorial zu all meinen Fehlern geschrieben hast. Sorry.

Ich habe mich da jetzt mal etwas durchgefressen. Ich sehe auch ein, dass ich vieles falsch übernommen habe ... aber das bringt mich leider nicht so recht weiter. Für mich ist das ganze "HTML-GERAFFEL" eine sehr mühselige, "artfremde" aber leider nötige Sache.

Meine Arbeit ist zu 99% die mit C#, PHP und Python-Code, um Microprozessoren zu ihrer Arbeit zu bewegen sowie das Design von Hardware wie Aktorik und Sensorik.

Die Ausgabe der Ergebnisse - zumeist nur simple "habe das gemacht" oder, wenn M2M geschieht, sogar völlig ohne HTML sondern mit JSON, XML oder sonstigen Standard-Strukturen ist sozusagen eher ein "Abfallprodukt" und nur dann, wenn es etwas für "den doofen Menschen, der mit Einsen und Nullen oder Hex nix anstellen kann, was darzustellen gilt, muss ich halt notgedrungen HTML Code erzeugen.

Ich werde wohl nie ein Spezialist auf diesem Gebiet werden und will's auch nicht, weil ich mich um Protokolle und Hardware-Designs kümmern muss, damit das Projekt irgendwann endlich "live" - also an die Öffentlichkeit - gehen kann.

Deshalb hab' ich ja meine "Anforderungen" beschrieben. Ich vermute ganz stark, dass ein Profi (wie Du einer zu sein scheinst) dem Projekt ein CSS "zeigen" oder "bauen" kann, das klein ist und universell genug, um den (wie ich glaube dich recht geringen) Anforderungen (siehe oben) gerecht zu werden.

Ich werd' mir wohl eher die Finger brechen und verliere viel Zeit durch try&error in einer Welt, die nicht meine ist ...

Ich verstehe z.B. schon nicht was mit "in line CSS" gemeint ist ...
Nebenbei: Inline-CSS, wie es hier zum Färben von Text verwendet wird, soll bereits seit über 20 Jahren nicht mehr verwendet werden ...

Die "Korrektur" des Original-Quelltext's die Du gemacht hat, führt dann wieder zum - tatsächlichen - Original, das dort genau so auch drin ist, für meine Begriffe aber eben "unlesbar" ... und daher hab' ich die Zeile aufgesplittet ...
 
Werbung:
Zurück
Oben