Zeilenumbrüche an ungeeigneten Stellen

[estebu]

Hallo Gemeinde,

ich habe folgende Frage: Warum werden die Zeilen in folgender Ausgabe umgebrochen, obwohl noch genügend Platz für das nächste Wort vorhanden ist?
http://admin.filmkunstfest.de/admin/...336f4af37a872e
Wenn man den Link aufruft und das Browserfenster ganz schmal zieht, erkennt man, was ich meine. Ich brauche diese Ausgabe aber für einen Webview in einer Android-App und dort ist das Fenster nunmal im Hochformat so schmal.
Hat jemand eine Idee, wie ich das lösen könnte? Ich habe bereits die css-Eigenschaft white-space versucht, aber ohne Erfolg.

[hellbringer]

Schau dir doch den HTML-Code an. Es sind keine Leerzeichen zwischen den Wörtern. Wer auch immer das verbrochen hat, hat von HTML wohl keine Ahnung.

[estebu]

Ursprünglich hatte ich Leerzeichen VOR und NACH dem/den jeweiligen Namen, das hat aber auch keine Auswirkung gehabt. Dann habe ich sie durch ein padding-left, padding-right von 3px ersetzt - das hat aber offenbar auch nicht geholfen. VIelleicht muss ich in der php-Ausgabe htmlentities aktivieren?

[hellbringer]

Ursprünglich hatte ich Leerzeichen VOR und NACH dem/den jeweiligen Namen, das hat aber auch keine Auswirkung gehabt. Dann habe ich sie durch ein padding-left, padding-right von 3px ersetzt - das hat aber offenbar auch nicht geholfen.

Lass die Spielereien und schreibe einfach normalen Text. Dann kann es der Browser auch sinnvoll rendern.

VIelleicht muss ich in der php-Ausgabe htmlentities aktivieren?

Nein. htmlentities() bringt hier überhaupt nichts und ist auch in 99,9999% aller anderen Fälle komplett unnötig. Die Sache hat auch nichts mit PHP zu tun. Es ist einfach nur kaputter HTML-Code (zwar nicht von der Syntax, aber vom Inhalt her).

[MrMurphy]

Hallo

Ursprünglich hatte ich Leerzeichen VOR und NACH dem/den jeweiligen Namen, das hat aber auch keine Auswirkung gehabt.

Ich habe keine Ahnung was du mit "jeweiligen Namen" meinst. Leerzeichen gehören zwischen jedes Wort. Dann bricht der Browser die Worte auch ganz normal um.

Das

 MÄVERS</span><span class='credits_bold red'>SOUNDDESIGN</span><span class='credits_normal'>ANDRES

ist für den Browser das Wort

 MÄVERSSOUNDDESIGNANDRES

und bricht deshalb nicht um, sondern steht so immer zusammen in einer Zeile.

Das span-Element ist speziell dazu gedacht Text zu formatieren, aber dabei grade keinen Zeilenumbruch zu erzeugen.

padding erzeugt inneren Abstand aber auch keinen Zeilenumbruch.

Leerzeichen, die einen Zeilenumbruch ermöglichen sollen, können nicht mit CSS erzeugt werden, sondern müssen im Quelltext stehen. Wobei Zeilenumbrüche im Quelltext in der Browseransicht auch meist wie Leerzeichen behandelt werden.

<div style="width:100%;white-space:normal;text-align:left">

Das Inline-CSS ist hier vollkommen überflüssig.

Das ganze ist zudem ein Absatz, gehört also in ein p-Element. div-Elemente und andere Container wie header, main, article, section enthalten nie direkten Text, sondern immer zunächst weitere Elemente.

Der Quelltext sollte zudem in normaler Groß-/Kleinschreibung geschrieben werden. Außer den Begriffen, die grundsätzlich nur Großbuchstaben enthalten, zum Beispiel RBB. Die durchgehende Großschreibung wird mittels CSS erreicht.

Zudem sollte in deinem Beispiel das p-Element eine Klasse bekommen und die anders formatierten Worte einfache span-Elemene ohne Klasse. Dann wird zum einen der Quelltext übersichtlicher und es wird weniger CSS benötigt.

Also zum Beispiel statt

<div style="width:100%;white-space:normal;text-align:left">

...</span><span class='credits_bold red'>REDAKTION</span><span class='credits_normal'>ARTE, RBB</span><span class='credits_bold red'>FILMF&Ouml;RDERUNG</span><span class='credits_normal'>MEDIENBOARD BERLIN BRANDENBURG</span><span class='credits_bold red'>VERLEIH</span><span class='credits_normal'>ESTEBU MEIER IN KOOPERATION MIT XY</span>
</div>

besser und übersichtlichter

<p class="credits">... <span>Redaktion</span> Arte, RBB <span>Filmförderung</span> Medienboard Berlin Brandenburg <span>Verleih</span> Estebu Meier in Kooperation mit XY</p>

Um die Übersichtlichkeit für den Webseitenersteller zu erhöhen kannst du die span-Elemente jeweils auch an den Anfang einer Zeile stellen:

<p class="credits">...
<span>Redaktion</span> Arte, RBB
<span>Filmförderung</span> Medienboard Berlin Brandenburg
<span>Verleih</span> Estebu Meier in Kooperation mit XY
</p>

Als CSS reicht dann

.credits {
   font-family: 'Open Sans',sans-serif;
   font-size: 12px;
   text-transform: uppercase;
}
.credits span {
   color: #b51a26;
   font-weight: bold;
}

Hinweis: Von der Barrierefreiheit her ist das Konstrukt eine einzige Katastrophe, aber ich will estebu nicht überfordern. Semantisch korrekt muss hier ein dl-Element verwendet werden.

Ich habe mal eine Beispieldatei erstellt um das Problem aufzuzeigen und zum Schluß die korrekte Lösung anzuzeigen:

http://boratb.bplaced.net/index09.html

Gruss

MrMurphy

[kaminbausatz]

Hinweis: Von der Barrierefreiheit her ist das Konstrukt eine einzige Katastrophe, aber ich will estebu nicht überfordern. Semantisch korrekt muss hier ein dl-Element verwendet werden.

Ich habe mal eine Beispieldatei erstellt um das Problem aufzuzeigen und zum Schluß die korrekte Lösung anzuzeigen:

http://boratb.bplaced.net/index09.html

Gruss

MrMurphy

Gut erklärt.

[estebu]

MrMurphy Hab vielen Dank für Deine Mühe!! Du kennst Dich da ja offenbar sehr gut aus, was html und css anbelangt, ich komme eher aus der programmierenden Sparte und habe daher weniger mit dem korrekten Styling zu tun. Jedenfalls danke ich dir für Deine anschauliche Erklärung. Ich habe Deine Ausführung nun (fast) komplett so übernommen - allerdings musste ich jeweils nach dem schließenden </dd> immer noch ein Leerzeichen einfügen, sonst "klebte" der Inhalt immer am nachfolgenden <dt>-Element. Allerdings habe ich in Deinem Quelltext keine Leerzeichen an der Stelle gefunden.... (?)
Jetzt ist der Beispiel-Link oben in meiner Frage nicht mehr aktuell für die eigentliche Ausgangsfrage aber nun aktuell mit Deinen vorgeschlagenen Änderungen. Jetzt muss ich noch die CSS-Elemente herausnehmen, die ich für meinen Inhalt nicht brauche.
Herzlichen Dank nochmals

Gruß
estebu

[MrMurphy]

Hallo

Du hast auch nicht meinen Quelltext übernommen. Bei mir steht jedes dt- und jedes dd-Element in einer eigenen Zeile. Und ich schrieb auch in meinem Beitrag

Wobei Zeilenumbrüche im Quelltext in der Browseransicht auch meist wie Leerzeichen behandelt werden.

Du brauchst zwischen den Elementen also Leerezeichen oder Zeilenumbrüche. Wobei einfach mit der Leertaste erzeugte Leerzeichen ausreichen sollten.

Zudem sind vor jedem dt- und dd-Element durch die Einrückung Leerzeichen.

Jedes dt- und dd-Element, gleiches gilt für li-Elemente, in eine extra Zeile zu schreiben hat sich seit über 20 Jahren bewährt und ist im Quelltext übersichtlich. Wenn du davon abweichst machst du das zum eigenen Spaß auf eigene Gefahr.

Viel Erfolg noch mit deiner Seite.

Gruss

MrMurphy

[kaminbausatz]

Im Quelltext Whitespaces als Gestaltungslement zu berücksichtigen ist m.E. nicht so prickelnd.

Sauberer ist es dem übergeordneten Element in Deinem Fall <dl> ein font-size:0 zu verpassen und font-size der Listenelemente zu setzen. Dann kann der Quelltext aussehen wie er will - dd und dt benötigen keinen schließenden tag.

[protestix]

Im Quelltext Whitespaces als Gestaltungslement zu berücksichtigen ist m.E. nicht so prickelnd.

Sehe ich auch so.
Abstände kann man mit Margin oder padding setzen. 1ex Beispielsweise.