Stundenplan Tabelle Spaltenbreite einstellen

[machuca]

Guten Abend,

erstmal danke an Tommy, dass du hier so tolle Arbeit leistest. Ohne dein Forum hätte ich als alter NOF-Bastler Mobirise nicht entdeckt. Bei allem Frust, den ich auch kenne, ist es einfach ein wunderbares Werkzeug, das - wenns denn klappt - großen Spass macht.
Aber ich melde mich natürlich wegen eines Problems.
Ich erstelle für einen Freund gerade eine Seite und habe extra das FitnessAMP gewählt, weil es dort einen Stundenübersicht gibt. Damit habe ich nun den Stundenplan gebastelt, aber die Spaltenbreite kann ich nicht verändern, bzw. die verändert sich immer selbstständig, je nach Textlänge.
Hier der Link: https://peonia.de/Niko2022/Kursplan.html
Der Freitag etwa ist nun was sehr schmal ausgefallen
Hat jemand eine Idee, wie ich das ändern könnte? Mit dem Editor habe ich schon versucht, was zu verändern, mangels Hintergrundwissen kam ich aber nicht weiter. Ich nutze Mobirise 5.5.2.

[Rancher]

Ich kann Dir zu AMP nicht helfen.

Tommy schreibt dazu:

AMP" solltest Du möglichst gar nicht verwenden - ich halte das für einen "Ausrutscher" von Mobirise. "AMP" ist eine Technologie von Google, die angeblich die Darstellung am Handy beschleunigen soll - keine Ahnung wozu das gut sein soll, wenn wir doch bald alle mit "5G" Handys arbeiten werden. Bei "AMP" kannst Du praktisch nichts ändern und man muss zwingend auf den AMP-Syntax achten, sonst wird eine Webseite schnell als "ungültige AMP" Seite abgestraft. "AMP" Themen sind auch nicht mit anderen "M4" oder freien Themen zu kombinieren, da diese technisch vollkommen anders arbeiten.

Vielleicht liegt es daran.

[Tommy Herrmann]

Moin,

willkommen im Forum

Gerade wollte ich schreiben - hmm - mal sehen, wie lange ich das mit dem Forum hier noch betreibe, denn ich hätte nicht gedacht, dass ich fast alles alleine beantworten muss.

Danke @Rancher

Leider kann ich Dir von allen "AMP" Themen nur dringend abraten. Hast Du Dich mal informiert, was AMP genau ist? Das ist eine ganz eigene Technologie, die von Google zur Beschleunigung von Seiten auf mobilen Geräten entwickelt wurde und die nur eine ganz eigene Programmierung (Syntax des Codes) zulässt. Normales CSS oder JavaScript ist dort nur sehr begrenzt anwendbar und als Dateien überhaupt nicht.

Wenn Du irgendwie kannst, solltest Du auf ein anderes Thema (alles außer "AMP") noch umstellen.

Das hat aber jetzt nicht unbedingt etwas mit Deiner Tabelle für den Stundenplan zu tun. Ohne besondere CSS sind Tabellen-Spalten immer so breit wie deren Inhalt.

Wolltest Du alle Spalten gleich breit haben, müsstest Du den Spalten eine Breite in Prozent geben, also z.B. 100% geteilt durch 7, wie bei diesem Kalender von unserem Werner.Zenk.de:

https://www.mobirise-tutorials.com/Even ... er-SQLite/

Vielleicht wäre der sogar für Deinen Stundenplan geeignet. Auch solche "externen" Skripte, wie jene vom Werner, kann man nicht in "AMP" einbinden, jedoch der gut in alle anderen Mobirise Themen.

Auf jeden Fall benötigst Du den kostenpflichtigen "Code Editor" von Mobirise um Tabellen selbst zu erstellen oder vorhandene Tabellen von Mobirise nach Deinen Ideen anzupassen.

Fast jedes Mobirise-Thema, also alle Standard-Themen "Mobirise 4" oder "Mobirise 5" und fast alle "M4" oder "M5" Themen haben auch Tabellen, die Du auch verwenden könntest. Hier ein Beispiel:

https://www.mobirise-tutorials.com/Tabellen/

[Rancher]

Nun, Tommy, ich habe gerade ein Zeitfenster erwischt, in dem Du noch nicht geantwortet hattest .

[machuca]

Hallo Tommy,

leider bin ich gnadenloser Anwender, mir war also die Bedeutung von AMP nicht klar, ich habe mich einfach durch die Themenvielfalt durchgesucht und fand das Thema optisch sehr ansprechend. Dann werde ich mal sehen, was ich machen kann. Ich habe ja das Gesamtpaket, dann werde ich mich nochmal mit dem Editor auf den Weg machen oder eben eine andere Tabelle versuchen. Ich werde berichten, ob es geklappt hat...

[Tommy Herrmann]

Moin,

wenn es lediglich um die Breite der Tabellen-Spalten geht, dann kannst Du auch z.B. mal dem "th" (Table Header) Element eine andere CSS geben wie:

Code: Alles auswählen

th {
  width: 14%;
}

Das schreibst Du dann in den Block mit der Tabelle in den rechten Bereich "CSS Editor" vom "Code Editor".

Das Tag <th> definiert eine Kopfzelle in einer HTML-Tabelle und stellt diese damit alle auf jeweils 14%, also bei 7 Spalten auf 98% der voreingestellten Breite des <div> insgesamt.

Das würde dann so aussehen. Man müsste aber prüfen was dann am Handy passiert, wahrscheinlich muss man dort dann auch die CSS ändern. Aus welchem AMP-Thema ist denn dieser Block mit dieser Tabelle? Wenn ich das wüsste, könnte ich das hier besser nachstellen.

Man kann also auch bei "AMP" solche Kleinigkeiten anpassen, nur muss man sich über die Tatsache was "AMP" ist und wie es funktioniert zunächst auch grundsätzlich einmal ganz klar sein. Sobald man da etwas falsch macht, wird die Seite nicht mehr als "AMP" kompatibel angesehen und kann dann eher schädlich von Google bewertet werden und somit eine sehr schlechte Platzierung erhalten. Ob eine Seite noch "AMP" kompatibel ist (Deine Seite ist es), kann man hier prüfen:

https://search.google.com/test/amp



... denke aber daran, dass eben "AMP" ein andere Technologie ist als das Framework "Bootstrap", welches in allen anderen Themen mit seinen CSS3-Stil angewendet wird. Bei den anderen Themen, die "Bootstrap" verwenden, kann man dann auch selbst alles viel besser und uneingeschränkt ändern und anpassen.

Du kannst alle Blöcke der "Bootstrap" Themen untereinander mischen, bis auf wenige, die immer noch nicht zwischen "Mobirise 4" und "Mobirise 5" kompatibel sind. "AMP" Blöcke kannst Du aber grundsätzlich nicht mit "Bootstrap" Blöcken mischen. "AMP" ist mit "Bootstrap" nicht kompatibel.

Du müsstest also nicht nur nach einem anderen Tabellen-Block suchen, sondern Dich zunächst für ein ganz anderes Thema entscheiden und nochmals neu beginnen.

Lies auch mal über "AMP" bei Wikipedia:

https://de.wikipedia.org/wiki/Accelerated_Mobile_Pages

Du musst also zunächst grundsätzlich entscheiden, ob Du bei "AMP" bleiben willst und auch kannst (es schränkt Deine Möglichkeiten ganz gewaltig ein) oder ob Du neu mit einem "Bootstrap" Thema von Mobirise beginnen willst.

[Werner-Zenk.de]

Das gleiche Problem hatte ich bei meinem Kalender, wie Tommy schon schrieb th width: 14%; einstellen.
Moderne Browser bieten oft eine automatische Silbentrennung an, damit werden halt lange Wörter mit einem Bindestrich umgebrochen damit diese in die Tabellenspalte passen, ohne dass die Spalte verbreitet wird.
Es ist auch möglich, lange Wörter mit &shy; umzubrechen (zb.: Produktions&shy;firma) der Browser entscheidet dann selbstständig, ob dieses Wort dann umgebrochen werden soll.

Gerade die deutsche Sprache hat doch oft lange Wörter, da wäre die automatische Silbentrennung ideal dafür geeignet. Bis dies jedoch in allen Browsern funktioniert, setze ich die Wörter in der Tabelle auf: word-break: break-all;, aber das muss dan jeder selbst entscheiden, ob diese Einstellung einem gefällt oder nicht.

[Tommy Herrmann]

@Werner,

sage mal - eigentlich finde ich das was Mobirise da macht gar nicht so schlecht. Beispiel auf der Seite vom "machuca" oder hier auf einer meiner Tutorial-Seiten:

https://www.mobirise-tutorials.com/Tabellen/

... wenn man diese Seite am Handy aufruft, bleibt die Tabelle im Original, nur man kann sie horizontal scrollen. Die Größe des Displays bleibt aber korrekt und ohne Querscroller.

Irgendwie auch keine schlechte Lösung

[Werner-Zenk.de]

Keine Ahnung, warum es in einer Tabelle keine Querscroller geben darf.
Natürlich kenne ich auch die Lösung vom Mobirise (Mit Kanonen auf Spatzen schießen)

Vertikale Bildlaufleisten sind erwünscht, horizontale Bildlaufleisten jedoch verpönt! Ich habe nichts gegen horizontale Bildlaufleisten solange sich diese in einem begrenzten Bereich auf der Seite befinden.

[machuca]

Hallo lieber Tommy, lieber Werner,

nun habe ich mich endlich ans Umsetzen eurer Ratschläge gewagt und fand auch den richtigen th-Eintrag und mit deinen 14 % Tommy war mein Problem schon gelöst.
Es ist halt immer gut, wenn sich jemand auskennt.
Auf dem Handy bekomme ich nun natürlich einen Querscroller, damit kann ich aber leben.

Was die AMP-Technology angeht bin ich leider unwissend gewesen, aber alles noch mal von vorne anzugehen, wird erstmal nix werden fürchte ich. Im Moment habe ich dazu einfach keine Zeit. Für die Zukunft, weiß ich aber nun mehr bzw. muss mich da mal reinfuchsen. Ein ganz herzliches DANKESCHÖN für die Hinweise und Links. Es ist wunderbar, wie mir hier geholfen wird!!!

[Tommy Herrmann]

Moin,

na einen Querscroller hattest Du am Handy aber vorher ganz genauso.

So ist diese Tabelle (ganz bewusst) von Mobirise aufgebaut, damit eben die Spalten nicht zu schmal werden, was ja dann wieder ganz andere Probleme mit sich bringt.

... und verstehe meine Bemerkungen zu "AMP" bitte nicht falsch. Natürlich kannst Du auch bei "AMP" bleiben, wenn Dir das ausreicht, was Du damit bewerkstelligen kannst. Du kannst eben nur keine fremden Skripte einbauen und Du musst auch aufpassen, dass die Seiten immer einer Prüfung durch Google standhalten, ansonsten hat das Auswirkungen auf das Ranking.