Zeilenabstand

whippet

Prosit Neues!

Wie kann man in normalen Text (Fließtext) den Zeilenabstand bestimmen? Im Mobirise sieht es immer gut aus, aber online ist der Abstand fast immer zu gering. Für jegliche Tipps wäre ich wie immer sehr dankbar.

Beste Grüße Peter

Moin Peter und frohes neues Jahr,

das ist etwas merkwürdig, denn meist ist das eher anders herum - meist ist der Abstand zwischen den Zeilen - das ist die "Line-Height" (Linien-Höhe) - eher zu hoch.

Welche Mobirise-Version und welches Thema nutzt Du denn gerade - das könnte auch ein "Bug" (Fehler) von diesem Thema sein.

Das kann man aber selbst recht einfach anpassen.

Dazu geht man am besten in den globalen Style-Editor - also für die "globale" CSS, die über alle Seiten und Blöcke wirkt. Bitte aber sehr genau gucken was Du dort machst, denn da kann man auch schnell mal was verstellen.

> Klicke auf das Pinsel-Symbol (unten rechts) auf jeder Seite für die globalen Style-Einstellungen. Grundsätzlich sollte man globale Einstellungen auf der Startseite (index) vornehmen - also auch diese Style-Einstellungen - und nicht auf einer Unterseite.

> Klicke dort dann auf den grünen Button "EDIT IN CODE EDITOR"

> Es öffnet sich der globale Style-Editor für die CSS

... klicke dort irgendwo einmal in den ganz linken Bereich "Static Styles" zur Markierung dieses Bereichs und drücke dann die Tastenkombination:

Strg + F (auf englischer Tastatur "Ctrl + F")

... es öffnet sich oben ein Feld zum Suchen ("Search") - dort schreibe rein:

line-height

... und bestätige mit der Eingabetaste.

Nun werden alle Fundstellen für "line-height" markiert angezeigt.

Gleich die oberste Fundstelle ist die für den gesamten "body", also auch für das "p" Tag, das den Text darstellt und sollte eigentlich auf 1.5 stehen, also so:

line-height: 1.5;

Sollte dieser Eintrag bei dem Selektor "body" ganz fehlen, dann trage diesen dort nach:

body {
line-height: 1.5;
}

Probiere das erst einmal und bestätige die Änderung unten rechts am grünen Haken

vom Style-Editor. Du musst dann erneut, zumindest lokal, publizieren um die Änderung zu sehen.

Es gibt noch jede Menge anderer Stellen für diese Linien-Höhe - die sind aber meist nicht das Problem.

Tipp:

an dem

(Fragezeichen) oben rechts im globalen Style-Editor, kannst Du alle möglichen Tasten-Kombinationen, wie eben auch "Ctrl + F" (auf deutscher Tastatur ist das Ctrl = Strg) sehen, die man hier anwenden kann.

An dem gedrehten Pfeil

oben rechts im Style-Editor könntest Du den originalen Zustand im Style-Editor wiederherstellen.

@Whippet: hast Du zuvor im Styleditor was gemacht?
Wenn man irgendwas im Styleeditor macht, was auch nicht "ge-undo-t" werden kann, gibt es fast immer 2-3 Designfehler danach, weil diverse paddings anders sind und halt der Zeilenabstand.

Fehler wurde etwa 100 mal gemeldet.

Frank,

was meinst Du denn ganz genau - hast Du mal ein Beispiel.

Ich ändere ständig etwas in diesem Editor und kann das auch ohne weiteres wieder zurücknehmen. Ich hatte da noch keinen Fehler bei entdecken können.

Ich ändere dort z.B. bei fast jedem meiner Projekte den Bootstrap-Selektor <code> in der Größe und auch in der Farbe (weil ich ja fast immer auch HTML-Code in meine Tutorials schreibe), wie Du z.B. hier (gleich oben unter dem <body>) sehen kannst:

https://www.mobirise-tutorials.com/asse ... tional.css

Ich hatte allerdings schon etliche Templates gehabt, wo dort von Mobirise eine "line-height: 1" stand, was natürlich nicht geht, wenn die Schriftgröße schon per default auf 1.2 steht.

Genau dann erscheint der Text viel zu dicht stehend - nach dem Publizieren (weil das erst dann wirkt) - denn zuvor wird die Default-CSS auf den Arbeitsseiten von Mobirise verwendet.

Das kann ich auch beliebig dort nachstellen und/oder wieder entfernen:

Line-Height: 1.5 (richtig):

Line-Height: 1 (falsch):

Hier z.B.
https://forums.mobirise.com/discussion/ ... roblems/p1
Da wurde automatisch ein Padding für cols eingefügt

Ja - das hatte ich schon mal gelesen (vergessen).

Ich kann das aber nicht nachvollziehen, so einen Fehler hatte ich noch nie in diesem Style-Editor.

Ich schreibe da ganz oft Sachen um und hatte dadurch noch nie ein verändertes Padding

Das muss noch an etwas anderem liegen, das der Geschichte dort bei Dir in die Suppe spuckt. Wahrscheinlich ein Bug in diesem Block.

... oder könnte es sein, dass Du da nicht ganz korrekte CSS-Angaben bei diesem "Hinterstrich" gemacht hast. Ich hatte das damals hier auch gemacht und keine Probleme:

https://www.mobirise-tutorials.com/Tutorials/#Tutorial

Code: Alles auswählen

h4.gradient span {
  background: linear-gradient(0deg, rgba(187, 187, 187, 0) 0%, rgba(187, 187, 187, 0) 16%, rgba(187, 187, 187, 1) 16%, rgba(187, 187, 187, 1) 41%, rgba(187, 187, 187, 0) 41%);
}
h4.padding span {
  padding: 0 0.5em 0 0.1em;
  box-decoration-break: clone;
}

Hatte ich schonmal an einem nackten Block in frischem Projekt getestet

whippet

Tommy Herrmann hat geschrieben: ↑Di 3. Jan 2023, 04:02 Welche Mobirise-Version und welches Thema nutzt Du denn gerade - das könnte auch ein "Bug" (Fehler) von diesem Thema sein.

Hallo Tommy,

Ich benutze Mobirise 5.5.5

Das Thema was ich genommen habe, kann ich nicht mehr feststellen. Da steht nur Mobirise 5 und alle Bestandteile des Thema sind nicht mehr vorhanden.

Ich habe den Wert des Zeilenabstandes bereits gestern probiert einzurichten, es hat nichts bewirkt. Ich habe jeden Schritt immer konsequent rückgängig gemacht. Dann habe ich die Frage im Forum gestellt und alles nochmals genau nach deiner Einleitung gemacht. Es bewirkt leider gar nichts. Ich lösche natürlich den cache immer komplett und schaue mir es in verschiedenen Browser an auch auf dem iPhone, da gibt es sogar ein Browser was überhaupt nichts speichert, dort erscheinen die Websiten immer 100 % original. Auch dort sieht man keinerlei Unterschied.

Bei dir funktioniert alles normal?

Beste Grüße Peter

Moin,

das Thema von Mobirise stellt man hier fest:

> Sites > an Projekt-Kachel auf das Zahnrad

klicken > Site Settings > es steht ganz oben unter "Common"

An meinem Screenshot ist das das Standard Thema "Mobirise 5":

Hast Du mal einen Link zu der betroffenen Seite, dann könnte man im Quellcode gucken wo die Einstellungen falsch sind.

Hier bei diesem Screenshot z.B. https://westudio.de/ ist die Line-Height nur 1.3rem anstatt 1.6rem, wie in anderen Textbereichen der gleichen Seite - das kann natürlich auch an bestimmten, einzelnen Blöcken liegen. Das sollte schon einheitlich sein, sonst sieht das doof aus. Vielleicht ist dieser Block mal aus einem anderen Thema genommen worden.

Dann muss man das dort im "CSS Editor" dieses Blocks ändern, denn das ist ja eine ganz spezielle CSS-Klasse, nämlich:

class="mbr-section-subtitle"

und dann wirkt die allgemeine Änderung auf das <body> Tag natürlich nicht.

... und nein - ich habe damit absolut gar keine Probleme.

whippet

bei mir steht da einfach "Mobirise 5".

die alte (noch online) website westudio.de ist sehr chaotisch aufgebaut und ich werde diese nicht mehr ändern oder versuchen zu verbessern. Ich arbeite jetzt an einer komplett neuer Seite: applewine.de

Dort bräuchte ich diese Zeilenabstände zu verändern, was nicht geht. Soll ich screenshots anfertigen?

Ja - wenn dort nur "Mobirise 5" steht, dann ist das eben das Thema "Mobirise 5" - so wie bei mir auch. Es gibt nicht nur eine Software-Version "Mobirise 5" sondern eben auch das dazugehörige Standard-Thema "Mobirise 5". Das ist ein eigenständiges, in die Software integriertes, Design-Thema.

Das sollte auch eigentlich in Ordnung sein.

Allerdings ist die v5.5.5 schon sehr veraltet (Mai 2022), wir sind jetzt bei v5.7.4, die Du hier downloaden könntest (auch wenn dort immer noch v5.7.0 steht):

https://mobirise.com/history.html

... damit könnte sich Dein Problem auch von alleine lösen.

Nein, Screenshots nutzen da jetzt nichts - man müsste das schon direkt sehen, um in die CSS zu gucken.

Kannst Du das denn nicht mal in ein Test-Verzeichnis publizieren? Man sollte sowieso immer alles zuerst testen, bevor man eine Seite endgültig veröffentlicht.

Sonst ist es schwierig - eher unmöglich - so schon zu helfen.

whippet

Hallo Tommy, danke!

Die applewine.de Domain habe ich nur für Tests genommen. Sobald da alles perfekt läuft, werde ich alles auf einmal auf die Domain westudio.de kopieren. Oder muss es unbedingt ein Testverzeichnis sein?

Gruß Peter

whippet

Tommy Herrmann hat geschrieben: ↑Di 3. Jan 2023, 14:03
Allerdings ist die v5.5.5 schon sehr veraltet (Mai 2022), wir sind jetzt bei v5.7.4, die Du hier downloaden könntest (auch wenn dort immer noch v5.7.0 steht):

https://mobirise.com/history.html

... damit könnte sich Dein Problem auch von alleine lösen.

Habe ich soeben gemacht. Jetzt funktioniert gar nichts mehr richtig. Slider spielt verrückt, menu-urls sind alle weg etc. Ich bin jetzt schon wieder soweit zu wix oder anderen Misst zu wechseln ....

Ja - sorry - aber so kann ich Dir nicht helfen.

Ich hatte sehr lange v5.7.4 erfolgreich installiert und bin gerade bei v5.7.7 zum testen, so etwas wie Du gerade schreibst hatte ich in 5 Jahren bei keiner einzigen Version und bei keinem einzigen meiner ca. 80 Projekte, die mit allen nur denkbaren Themen von Mobirise "M3", "M4" und "M5" erstellt wurden.

Ich habe überhaupt noch nie die URLs meiner Menüleiste verloren - wie soll das denn gehen

Du kannst auch vollkommen problemlos jederzeit zu der v5.5.5 zurückkehren, indem Du diese Version einfach drüber installierst. Solltest Du diese .exe Datei nicht mehr haben, ich habe sie alle. Das ist aber mit Sicherheit nicht notwendig, denn v5.7.4 ist viel stabiler und besser als v5.5.5.

whippet hat geschrieben: ↑Di 3. Jan 2023, 18:04 Oder muss es unbedingt ein Testverzeichnis sein?

Wenn Du Dein Projekt hier zeigen willst und solltest, damit man helfen kann, dann ist mir das doch vollkommen egal in welches Verzeichnis welcher Domain Du das publizierst - Hauptsache es ist online, sodass man in den Quelltext gucken kann.

Das mit dem Test-Verzeichnis habe ich doch nur vorgeschlagen. Normalerweise publiziert man solche Versuche zunächst in ein extra Verzeichnis, das man z.B. auch mit einer Passwortschutz-Datei (.htaccess) versieht, sodass Google das noch nicht finden kann und man in Ruhe testen kann.

... also, dann schreibe doch mal genau was nun hier für Dich noch falsch ist, wenn das nun die aktuelle Seite ist um die es geht - dann schreibe das doch auch:

http://applewine.de/

Das ist jetzt mit v5.7.4 auf den Server publiziert worden.

whippet hat geschrieben: ↑Di 3. Jan 2023, 18:26 Habe ich soeben gemacht. Jetzt funktioniert gar nichts mehr richtig. Slider spielt verrückt, menu-urls sind alle weg etc. Ich bin jetzt schon wieder soweit zu wix oder anderen Misst zu wechseln ....

Du musst eine Software schon korrekt bedienen, das wäre bei "Wix" und anderen auch nicht anders

Der WOW-Slider geht (halbwegs, siehe meine Bemerkung unten), die Menüleiste funktioniert (sie hat aber falsche Links, siehe meine Bemerkung unten) und die "Line-Height" steht auf 1 und zwar für alle diese Selektoren und CSS-Klassen:

Code: Alles auswählen

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-4,
.display-5,
.display-7,
span,
p,
a {
  line-height: 1;
  word-break: break-word;
  word-wrap: break-word;
  font-weight: 400;
}

Wenn Du diese Linien-Höhe von jetzt 1 auf z.B. 1.5 setzt und zwar im globalen Style-Editor, wie schon zu Beginn beschrieben, dann sollte doch alles richtig sein. Dann würde das so aussehen, wie ich es jetzt online im Browser-Werkzeug geändert habe:

Dann sieht die geänderte CSS, entsprechend mit line-height: 1.5; so aus:

Code: Alles auswählen

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-4,
.display-5,
.display-7,
span,
p,
a {
  line-height: 1.5;
  word-break: break-word;
  word-wrap: break-word;
  font-weight: 400;
}

Vielleicht wurde bei Dir diese falsche Linien-Höhe schon aus der v5.5.5 mit der Projekt-Datei auch falsch übernommen. Mobirise ist angehalten solche Style-Anweisungen bei einem Update möglichst gleich zu belassen, sonst müssen die User zu viel ändern.

> Den WOW-Slider solltest Du mit Mobirise Software Version 5 eigentlich gar nicht mehr verwenden, denn da gibt es einige Darstellungsprobleme (nur wenige Designs funktionieren), seit es kein "jQuery" mehr in "Bootstrap 5" gibt. Verwende anstelle dessen einen Mobirise-Slider.

> Bitte schreibe doch mal einen Link, den Mobirise verändert haben soll, oder erstelle einen Screenshot davon. Die einzigen Links, die Mobirise ab Software Version 4 ändert, sind jene die das Wort "Mobirise" beinhalten, denn so verhindert Mobirise die eigene Werbung ("Branding") wenn man das über den Schalter in den App-Einstellungen nach dem Erwerb des "Code Editors" so angibt.

> Account > App-Settings

Remove "Mobirise" from HTML

> Bei Deiner Menüleiste hast Du immer an den Links ein Raute-Zeichen #, das bedeutet Top (ganz oben) auf der Seite, wie z.B.:

page4.html#

Man kann nicht auf eine andere Seite nach "Top" # verlinken. Entferne diese # (Raute). Eine neue aufgerufene Seite wird immer automatisch ganz oben angezeigt.

Dieser Anker "Top of Page" (Raute #) kann nur auf der gleichen Seite angewendet werden, also wenn man z.B. unten auf einer Seite nach ganz oben auf der gleichen Seite einen Link setzen will, sodass nach oben gescrollt wird:

... mal ganz abgesehen davon, dass Du diese Menüleiste sowieso komplett neu verlinken müsstest.

Du musst den Seiten zwingend vernünftige und aussagekräftige Namen geben und nicht "page2.html", "page3.html" usw. Das sind doch nur automatisch generierte Dateinamen. Die Dateinamen (Namen der Seiten) sind eines der wichtigsten Kriterien für die SEO (Suchmaschinen-Optimierung), mit einem Namen wie "page2.html" kann eine Suchmaschine wie Google überhaupt nichts anfangen. Achte darauf, dass die neuen Namen weder Sonderzeichen (auch keine Umlaute) noch Leerzeichen beinhalten. Der Name einer Seite sollte auf den Inhalt dieser Seite hindeuten. Das ist ganz wichtig.

whippet

Hallo Tommy,

danke für deine Tipps, aber es sind einfach zu viele Dinge die nicht funktionieren, ich habe dafür weder Zeit noch Energie und nach wie vor keine Programmierkenntnisse um bei jedem Schritt etwas speziell einrichten zu müssen. Ich muss eine Alternative finden oder das ganze komplett abgeben.

Gruß Peter

Ich antworte mal ganz salopp:
Mobirise hat so viele Textblöcke, warum wählst Du nicht einen, der besser passt? Man kann das doch alles mühelos zusammensetzen.

Ginge es nicht schneller, die verwendeten Blöcke herauszunehmen und neue einzusetzen?

Entschuldige, wenn der Vorschlag zu einfach war.

whippet

Hallo Rancher,

danke, ich bin für einfache Antworten immer sehr dankbar. Es geht da aber nicht nur um Textblöcke. Es funktioniert nichts wie vorher. Es hat alles irgendwelche Haken, entweder ist dies oder jenes mit was anderes nicht kompatibel und man muss in den code fast immer reingreifen und sobald was funktioniert, bei irgendeiner neuer Version funktioniert es wieder nicht, ich trete seit Monaten auf der Stelle und es kommen immer wieder neue Probleme dazu. Bei mir ist das Pferd tot und ich steige ab.

Beste Grüße Peter

Schneller - finde ich gut

Die von mir vorgeschlagene Änderung die "Line-Heigth" auf 1.5 zu setzen, dauert maximal 10 Sekunden.

Einen neuen Slider einzubauen vielleicht 10 Minuten und die Navi hat ja nicht Mobirise sondern Peter selbst falsch erstellt. Auch die Navi wäre bei den paar Seiten ja blitzschnell angepasst oder auch neu aufgezogen.

Ich weiß überhaupt nicht, wo das Problem liegt.

Es gibt kein Programm bei dem man gar nichts beachten muss, gewisse Regeln gehören immer zu den Grund-Kenntnissen und die muss man bei jeder Software einhalten.

Die Tatsache, dass sich durch Updates meistens Dinge verändern, ist auch eine Selbstverständlichkeit. Das liegt in erster Linie an Verbesserungen, die nicht immer kompatibel zu älteren Versionen sein können und nicht zuletzt auch an Gründen der Sicherheit.

Man kann von keiner Software erwarten, dass immer alles gleich bleibt. Das liegt schon daran, dass sich Skript-Sprachen wie CSS und JavaScript oder PHP ändern und so auch das Framework Bootstrap, das Mobirise verwendet.

Wer sich an so etwas nicht anpassen kann oder will, der sollte eigentlich die Erstellung von Webseiten lieber nicht selbst machen.

Es gibt keine Software, bei der das anders wäre, denn jede Software muss immer mit der Zeit gehen und sich an solche Dinge anpassen.

Ich habe mehr als 80 Projekte mit fast 1.000 Seiten - nur als Hobby - mit Mobirise erstellt. Da ist alles dabei - von Mobirise3 bis Mobirise5.

Ich verwende dabei fast alle Themen und Blöcke die Mobirise anbietet und musste fast noch nirgendwo händisch eingreifen, außer ich wollte es anders als von Mobirise gedacht.

Gibt es mal einen wirklichen Fehler (Bug) dann melde ich diesen an Mobirise und man ist dort sehr dankbar, denn bei Tausenden von Blöcken kann auch Mobirise nicht alles prüfen. In so einem Fall kann man aber auch immer auf einen anderen Block zurückgreifen und schon hat man sich des Fehlers entledigt.

Das größte Problem bei Mobirise liegt zwischen den Software-Versionen 4 und 5, denn beide verwenden eine andere Bootstrap-Version und auch anderes JavaScript. Das Framework jQuery wurde ganz abgeschafft und dadurch ergeben sich erhebliche Probleme bei der Kompatibilität älterer M4-Blöcke bei Version 5.

Ich habe mich nur auf das Problem des Themas mit dem Zeilenabstand bezogen.
Whippet schreibt doch, dass er es mit dem Ändern nicht hinbekommt. Und da er noch nicht viel auf der Homepage hat, wäre es mit einem anderen Block oder vielleicht einem kompletten sauberen Neuanfang besser gegangen. Dann erledigen sich vielleicht auch die anderen Probleme.
Neu anfangen müsste er mit einem anderen Programm auch.

Mobirise-Tutorials.com

Zeilenabstand

Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Re: Zeilenabstand

Wer ist online?