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 </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>
// 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 </span>
<span style="color: #007700">wort2 </span>
<span style="color: #0000BB">wort3 </span>
<span style="color: #007700">wort4 </span>
</span>
</td>
<td>F2 S3<br>Z2</td>
<td>F2 S4</td>
</tr>
Danke für Eure Hilfe!
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 </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>
// 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 </span>
<span style="color: #007700">wort2 </span>
<span style="color: #0000BB">wort3 </span>
<span style="color: #007700">wort4 </span>
</span>
</td>
<td>F2 S3<br>Z2</td>
<td>F2 S4</td>
</tr>
Danke für Eure Hilfe!