[gelöst]CMS Textausrichtung oben

[Porter Ricks]

Hallo Coder,

 

ich habe ein paar Schwierigkeiten mit den CMS Seiten.

Ich möchte einen recht langen Pressetext mit einer CMS Seite darstellen. Dafür habe ich eine Tabelle mit 3 Spalten angelegt. Den Text entsprechend verteilt und im Editor sieht alles fein aus (siehe Bild). Im FO jedoch (siehe Bild), scheint er den align top befehl zu ignorieren.

 

Ich habe das gleiche nochmal mit Dreamweaver erstellt und den HTML-Code eingefügt, das Problem besteht jedoch weiterhin.

 

Auch andere Umwege führen immer zum gleichen Ergebnis, der Text wird innerhalb der Zelle vermittelt und nicht oben ausgerichtet;(

 

Hat jemand eine Lösung dafür, bzw. was mache ich falsch?

 

 

 

 

Edited October 3, 2014 by Porter Ricks (see edit history)

[Mutabor]

Das ist doch einfacher Fließsatz. Was willst Du da mit align: top? Das bezieht sich doch auf die Textausrichtung bei Grafiken.

Beim text-align bietet sich die Einstellung "justify' an. Du meinst ja wohl die Spaltenausrichtung sei vertikal zentriert , wenn Du auch von Zelle sprichst.

Der CSS3-Code muß aber noch ein paar browserspezifische Parameter haben, damit die Darstellung in Safari und Firefox/Chrome nicht unterschiedlich ausfällt. Beim IE bin ich sehr skeptisch, ob er momentan überhaupt Mehrspaltensatz unterstützt. Hast Du dir das mal im IE angeguckt?

 

Poste doch mal den CSS-Code.

Edited October 2, 2014 by Mutabor (see edit history)

[Porter Ricks]

Hallo Mutabor,

 

sorry, ich meinte natürlich >valign="top"<. Ich bin kein Coder Der Text ist justify ausgerichtet, allerdings wird dieser Block dann innerhalb der Zelle vermittelt, sprich "die Spaltenausrichtung ist vertikal zentriert".

Im IE sieht es genauso aus wie im Firefox. Mit den 3 Spalten kein Problem, also der Mehrspaltensatz funktioniert.

 

Der HTML-Code aus Dreamweaver sieht so aus:

(Diesen habe ich nur in den TinyMCE eingefügt)

<h1>Lorem ipsum dolor sit amet</h1>
<table border="0" width="870" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<table border="0" width="870" cellspacing="10">
<tbody>
<tr>
<td valign="top" width="275">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br /><br /><br /><br /></td>
<td valign="top" width="275">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br /><br />Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <br /><br />
<p align="justify"><br /><br /></p>
</td>
<td valign="top" width="275">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.<br />
<p align="justify"><br /><br /><br /></p>
</td>
</tr>
</tbody>
</table>

Danke für deine Hilfe und einen schönen Tag der deutschen Einheit für alle.

MfG Porter Ricks

[Mutabor]

Ach so, das hatte ich falsch verstanden. Ich dachte, Du wärst über den CSS -Style gegangen. Hier ist nur eine kleine Änderung nötig. Es muss heißen:

 

<tr valign="top";

Wenn's nur um Fließsatz geht, würde ich es vielleicht so machen:

<TABLE cellpadding="5">
 <TR valign="top">
  <TD width="33%">
Hier der Text der ersten Spalte: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </TD>
  <TD width="33%">
Hier steht der Text der zweiten Spalte ...
  </TD>
  <TD width="34%">
Hier steht der Text der dritten Spalte ...
  </TD>
 </TR>
</TABLE> 

Edited October 2, 2014 by Mutabor (see edit history)

[Porter Ricks]

Hallo Mutabor,

danke für deine Antwort, aber ich bekomm es einfach nicht hin, siehe Bild.

Mein derzeitiger Code sieht nun so aus. Trotzdem vermittelt er den Text innerhalb der Zelle.

<h1>Lorem ipsum dolor sit amet</h1>
<table border="0" width="870" cellspacing="10">
<tbody>
<tr valign="top">
<td width="275">
<p align="justify">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</td>
<td width="275">
<p align="justify">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br /><br />Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</td>
<td width="275">
<p align="justify">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
</td>
</tr>
</tbody>
</table>

Ratlosigkeit gepaart mit gefährlichem Halbwissen

 

[Mutabor]

Versuch es mal so:

<h1>Lorem ipsum dolor sit amet</h1>
<table style="width: 100%;" border="0" cellspacing="10">
<tbody>
<tr valign="top">
<td align="justify" width="33%">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
<td align="justify" width="33%">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br /><br />Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td>
<td align="justify" width="34%">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</td>
</tr>
</tbody>
</table>

[Porter Ricks]

Hallo Mutabor,

 

danke für deine Hilfe, doch, copy/paste des Snippets in den HTML-Editor,...und das Ergebnis bleibt leider das Gleiche.

Wie gehabt, im TinyMCE sieht alles gut aus,...Speichern und Vorschau und der als Blocksatz formatierte Textblock wird in der Zelle vermittelt;(

 

Mich wundert das nur ich versuche einen mehrspaltigen Text zu erstellen und das Problem noch keinem aufgefallen ist. Über die ganze Breite geht natürlich auch, aber lässt sich halt schlecht lesen. Ausserdem möchte ich nicht das der Charakter einer Zeitung (Pressetext) verloren geht. Hätte auch nie gedacht das diese Ausrichtung in der heutigen Zeit so ein Problem darstellt.

 

Hat noch jemand ne Idee?

[Whiley]

Hallo Porter Ricks,

 

mein Vorschlag:

 

du bleibst bei deiner ersten Variante und öffnest die Datei:

 

/themes/default-bootstrap/css/autoload/responsive-tables.css

 

in ca Zeile 18 findest du:

 

table td, table th { padding: 9px 10px; text-align: left; }

 

die änderst du in:

 

table td, table th { padding: 9px 10px; text-align: left; vertical-align: top;}

 

Dann natürlich noch im BO -->erweiterte Einstellungen -->Leistung den Cache löschen und smarty-kompilierung erzwingen.

 

Grüsse

Whiley

[Porter Ricks]

Hi Whiley,

 

das sieht schon sehr gut aus und scheint die Lösung zu sein.

Ich danke Mutabor und Whiley für ihre Bemühungen und wünsche allen ein schönes langes Wochenende.

 

Eine der großen Stärken von Prestashop ist seine Community.