Text, Bilder, Inhalte II

Tja nun ist der Text dran. Ich erstelle mal schnell einen Neuen. Der sieht im Editor so aus:

Beachtet bitte einfach mal die erste Zeile.

Nach dem Schließen im Arbeitsfenster und auch in der Vorschau, als auch in der publizierten Version sieht das dann so aus:

Und da wird doch tatsächlich hinten einfach der Text weggeschnitten. Es gibt unten auch keine horizontale Scrolleiste, wie man vielleicht denken könnte. Damit ist das CMS bei mir schon durchgefallen. Denn jetzt bleibt eigentlich als Alternative nur noch, die Zeilenlänge zu ermitteln – bei mir endet diese nach den Worten „eine der „ auf der ersten Zeile - und den gesamten Text in zeilenlangen Absätzen zu formatieren.

Das ist unzumutbar, vor allem wenn man bedenkt, dass man vielleicht auch irgendwann einmal den Text ändert. Dann muß man alle Zeilen neu formatieren, bloß weil man zwei, drei Wörter eingefügt hat.

Als nächstes wollte ich das Bild oben etwas verkleinern und in die Mitte positionieren  Das geht auch nicht so einfach. Man kann nur rechts oder links einstellen. Ein paar Leerzeichen davor setzen, brachte das Bild zwar im Editor in die Mitte, aber in der Vorschau war es wieder links. Also habe ich eine einfache Tabelle mit 3 Spalten eingefügt und das Bild in die mittlere Spalte eingefügt. Durch das Einfügen von Leerzeichen in der ersten Spalte, konnte ich diese soweit verbreitern, dass das Bild in der Mitte war. Eine andere Möglichkeit die Spaltenbreite einzustellen, gab es nicht. (Es sei denn ihr könnt HTML, dann könnt ihr direkt im Code arbeiten)

Tja und dann dachte ich mir, das kannst du ja auch mal mit dem Text probieren. Und siehe da, es klappte. Ich habe also eine Tabelle mit einer Zeile und einer Spalte eingefügt und den Text dort hinein gepackt. Und er machte einen ordentlichen Zeilenumbruch. Dann habe ich nur noch die Tabelle auf die anzeigbare Breite eingestellt und alles war OK. Siehe Bild

Allerdings gibt es gleich das nächste Problem. Ich habe also ein kleines Bild rechts angeordnet. Optisch befindet es sich jetzt also außerhalb des sichtbaren Bereiches, der durch die Breite des oberen Textes, für dich sichtbar, definiert ist. Links kann ich auch Text eingeben, der dann bis zum Bild reicht. Sobald ich aber speichere und in die Vorschau gehe, wird das Bild korrekt am rechten Rand (in Flucht mit dem Text oben) angezeigt und der Text links dann umgebrochen, so dass der gesamte folgende Text sich auch entsprechend verschiebt.

Auch hier werde ich also, um ein definiertes Layout zu erreichen, für jeden dieser Fälle eine Tabelle mit zwei Spalten und einer Zeile einrichten müssen.

Die Probleme sind lösbar, aber von einem Texteditor erwarte ich heutzutage etwas anderes. Denn am Ende bedeutet es auf jeden Fall: Jede Änderung am Text bringt das gesamte Gefüge deiner Seite durcheinander und du musst ständig neue Tabellenkonstruktionen schaffen.

Mit einem Doppelklick auf ein Bild, kannst du übrigens die Einstellungen wie Ausrichtung und Größe ebenfalls vornehmen und einen Alternativtext festlegen.

Übrigens habe ich mich zu früh gefreut. Schon bei der nächsten Seite bin ich mit meiner Tabellen-Idee gescheitert. Trotz Tabelle einfügen und der Einstellung der richtigen Breite erfolgte kein Zeilenumbruch und das alte Problem war wieder da. Ein Blick in die Quellcodes der beiden Seite, brachte die Lösung. Auf der ersten Seite war die Tabelle in die „div“-Anweisung für die mobile Version eingebunden worden. Auf meiner zweiten Seite war die <table>-Anweisung außerhalb der <div>-Struktur. Einfach den Code verschoben und schon funktionierte es. Ich konnte mir helfen – aber der Normalanwender? Wohl kaum.

Um das Ganze etwas ansprechender zu gestalten, wollte ich natürlich etwas Farbe im Contentbereich haben – geht leider nicht mit normalen Mitteln, zum Glück kann ich etwas HTML und habe andere CMS zur Hilfe, so das ich auch relativ schnell einen passenden Farbwert finde. Das gilt allerdings auch wirklich nur für den direkten Contentbereich, denn alles andere über die CSS-Einstellungen anzupassen, werde ich mir nicht antun.

Übrigens war auch die Anpassung über den Code nicht so einfach und zum Teil mit viel nervigem Aufwand verbunden. Meist klappte es durch kopieren des Codes aus einer Seite und Einfügen und Anpassen in der nächsten.

weiter zu "Layout spezial"