Abstände im div-Element mit wysiwyg

[StephanMuc]

Hallo miteinander,

vielleicht kann mir jemand erklären, wie/wo ich folgendes korrigieren kann:

einen im Backend (wysiwyg) erzeugter div-Container hat unnatürliche Abstände im Frontend (roter Pfeil im Bild)



weiss jemand, wie/wo ich das ändern kann?
Habe 2.13.5 r220 und nutze den Standard-Editor wysiwyg.
Freue mich über jeden freundlichen Hinweis.

Besten Dank & viele Grüße
Stephan

[Gast]

einen im Backend (wysiwyg) erzeugter div-Container hat unnatürliche Abstände im Frontend

schwer zu beurteilen, wenn man selbst die Quelle nicht sieht. Vielleicht ist es dir möglich, einen Link zum Problem zu posten. Falls nicht, müssen wir das mit Screenshots versuchen zu klären. Am besten wäre dann ein Screenshot vom Quelltext der Seite im Frontend, die eben diesen Abschitt zeigt.
Du selbst könntest über die gängigen Browsertools auf Ursachenforschung gehen. Solch Tool ist meist mit der F12-Taste am Desktop oder Laptop zu starten, es reicht auch ein Rechtsklick auf z.b. das Wort Content im Frontend und dort der Punkt "Untersuchen". Dann kann man Div für Div mit der Maus überfahren und sieht dabei auch gleich die jeweiligen CSS-Einstellungen zu jedem Abschnitt.

Vielleicht schaltest du auch mal den Editor um auf Quellcode (oben links) und kontrollierst, ob vor den Tags der Überschrift (bei dir hier "Content") noch ein weiterer Tag vorhanden ist, ggf ein <p></p>

Abhilfe schafft möglicherweise schon das Umstellen des Section- bzw Abschnitts-Anker-Textes in den erweiterten WB-Optionen, Section Serversettings, Feld: Abschnitts-Anker Text. Den vorhandenen Text (default wäre das Sec) ändern in none
Die Angabe eines Abschnitts-Anker Textes führt dazu, das um jeden Abschnitt, also jede Section im Frontend noch ein weiteres DIV mit einer CSS-Klasse = section angelegt wird. Eventuell führt das bei dir zu einem vergrößerten Abstand von oben, dein Quelltext-Schnipsel im Screenshot läßt vermuten, das dann die Klasse = section zweimal verwendet wird, einmal von der Definition der section aus dem Template und ein zweites Mal vom Section-Anker-Text-DIV-Block, der um den page_content()-Block liegt

[ruebenwurzel]

Hallo,

nutzt du eine editor.css?

In der editor.css wird das aussehren des contents im Backend gesteuert. Um im Backend dasselbe Design (auch div Abstände, zb.b margin, padding, ...) wie im Frontend zu haben kann man im einfachsten Fall eine Kopie der .css Datei für das Frontend als editor.css im Root des von dir verwendeten Templates speichern. Oft sind aber Anpassungen erforderlich. Wenn der Contentbereich in der .css des von dir verwendeten Templates eine eigene Klasse (z.b. div {class = "container" }) hat, dann müssen die in dieser Klasse definierten Einstellungen in der editor.css direkt in den html Bereich rein.

[StephanMuc]

Danke sternchen8875 & ruebenwurzel,

habe schon all diese Dinge versucht, sehe gerade leider kein Licht am Ende des tunnels. Vermutlich verenne ich mich hier in etwas und die Lösung ist viel einfacher als gedacht!?

Hier das Problem:
https://www.valdoclub.de/pages/testseite.php

...selsbtverständlich gehe ich auch nochmal Eure Tipps durch und hoffe, dass ich dem Übel auf die Schliche komme


Aus meiner Sicht liegt das Über innerhalb des div containers, welcher vom wysiwyg Editor erzeugt wird:


...keine Ahnung, wie dieser im WB erzeugt wird

Danke erstmal & beste Grüße
Stephan

[Gast]

habe schon all diese Dinge versucht, sehe gerade leider kein Licht am Ende des tunnels. Vermutlich verenne ich mich hier in etwas und die Lösung ist viel einfacher als gedacht!?

eine einfache Erklärung und ohne Streß für dich zu lösen
Es ist so wie vermutet, der WB-Abschnittsankertext erzeugt hier ein zweites DIV, für das lt. style.css in Zeile 185 für die CSS-Klass=section ein Abstand von oben (und unten) mit 80px eingestellt ist (siehe Markierungen der Pfeile im Bild)

Gehe zu OPTIONEN, klicke rechts am Rand auf ERWEITERTE OPTIONEN anzeigen, scroll runter zum Abschnitt Servereinstellungen und ändere den Feldinhalt bei Abschnitts-Anker Text: von Sec auf none - (Schreibweise ist wichtig - alles Kleinbuchstaben)
einmal Speichern, erledigt




WB-Optionen (ganz unten)

[Gast]

noch zwei Bilder zum besseren Verständnis

Bild 1 zeigt das padding (lila Bereich), das aus dieser Zeile deines Frontend-Templates kommt, speziell die Klasse "section"

<!-- section start -->
      <section class="section clearfix no-view secPadding" data-animation-effect="fadeIn">

nun deine Zeile mit dem eingefügten Text hierMARKER - danach beginnt im Template die Ausgabe des page_content()

Jetzt kommt der zusätzliche Section-Anker, der im Übrigen für One-Pager-Seiten benötigt wird, die nur über solche Anker funktionieren

<div id="Sec11" class="section m-wysiwyg " >

Dieser Sectionanker benutzt wiederum die CSS-Klasse "section" und erzeugt damit ein weiteres padding

[StephanMuc]

tatsächlich! So einfach war das
Ich hatte schon kurz vor dem Aufgeben gestanden.

VIELEN DANK!!!!!

Beste Grüße
Stephan

PS: Da muss man aber auch erstmal drauf kommen

[StephanMuc]

....was wäre denn, wenn ich doch wieder die div Elemente erzeugt haben möchte?
Wo sind die PADDING 80px genau definiert?

BG
Stephan

[Gast]

....was wäre denn, wenn ich doch wieder die div Elemente erzeugt haben möchte?
Wo sind die PADDING 80px genau definiert?

bitte immer alles lesen, Vieles wurde hier von mir schon doppelt beantwortet

die CSS-Klasse "section" ist in der style.css innerhalb deines Frontend-Templates definiert und zwar in Zeile 185

ICH würde dann in meinem Template in dieser Codezeile hier

<!-- section start -->
      <section class="section clearfix no-view secPadding" data-animation-effect="fadeIn">

die Klasse "section" umbenennen und diese neue Klasse dann genauso definieren wie es aktuell der Fall ist, also z.b. an dieser Stelle die vorhandene Klasse "section" umbenennen in "sections" und in der CSS-Datei eine neue Klasse "sections" hinzufügen mit dieser Definition

Code Select Expand

.sections {
/* background-color: #ffffff; */
padding: 80px 0;
}

Das gibt dir dann auch die Möglichkeit, unterschiedliche Werte zu setzen