Änderungen im visuellen Editor zerschießt HTML :-(

NeroPalme

Hallo Leute,
ich habe da ein ziemlich nerviges Problem:
fast jede Änderung in der visuellen Ansicht des Classic-Editors (in WP 5.2.2) zerschießt mir die Seitenansicht indem mehrere <u></u> <li></li> Tags eingefügt werden. Da ich mehrere Bilder nebeneinander darstellen möchte, nutze ich den Flexcontainer, welcher auch ganz prima funktioniert (bis ich wieder eine Änderung vorgenommen habe). Klar kann ich die Tags wieder rauslöschen, was aber mit der Zeit ziemlich nervt, deshalb die Frage hat da eine 'ne elegantere Lösung?
Danke!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

NeroPalme

Im Editor geschrieben, noch ist alles ok...
[FONT=Courier New]

HTML

<ul>
     <li style="list-style: square !important;"><a href="#"><strong>Link 1 </strong></a></li>
     <li style="list-style: square !important;"><a href="#"><strong>Link 2 </strong></a></li>
</ul>
</li>
<!-- Block 2 -->
     <li class="flex-item">
<h3>Überschrift 2</h3>
<img style="border: 1px solid #000;" src="#" alt="bild 2">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<ul>
     <li style="list-style: square !important;"><a href="#"><strong>Link 3 </strong></a></li>
     <li style="list-style: square !important;"><a href="#"><strong>Link 4 </strong></a></li>
</ul>
</li>
<!-- Block 3 -->
     <li class="flex-item">
<h3>Überschrift 3</h3>
<img style="border: 1px solid #000;" src="#" alt="bild 3">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<ul>
     <li style="list-style: square !important;"><a href="#"><strong>Link 5 </strong></a></li>
     <li style="list-style: square !important;"><a href="#"><strong>Link 6 </strong></a></li>
</ul>
</li>
<!-- Block 4 -->
     <li class="flex-item">
<h3>Überschrift 4</h3>
<img style="border: 1px solid #000;" src="#" alt="bild 4">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<ul>
     <li style="list-style: square !important;"><a href="#"><strong>Link 7 </strong></a></li>
     <li style="list-style: square !important;"><a href="#"><strong>Link 8 </strong></a></li>
</ul>
</li>
</ul>

Alles anzeigen

[/FONT]

Jetzt die Überschriften im visuellen Modus etwas ergänzt und so schaut es aus...
[FONT=Courier New]

HTML

<ul class="flex-container">
     <li style="list-style-type: none;">
<ul class="flex-container"><!-- Block 1 --></ul>
</li>
</ul>
<ul class="flex-container">
     <li style="list-style-type: none;">
<ul class="flex-container">
     <li class="flex-item">
<h3>Überschrift 1 aaa</h3>
<img style="border: 1px solid #000;" src="#" alt="bild 1">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<ul>
     <li style="list-style: square !important;"><a href="#"><strong>Link 1 </strong></a></li>
     <li style="list-style: square !important;"><a href="#"><strong>Link 2 </strong></a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- Block 2 -->
<ul class="flex-container">
     <li style="list-style-type: none;">
<ul class="flex-container">
     <li class="flex-item">
<h3>Überschrift 2 bbb</h3>
<img style="border: 1px solid #000;" src="#" alt="bild 2">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<ul>
     <li style="list-style: square !important;"><a href="#"><strong>Link 3 </strong></a></li>
     <li style="list-style: square !important;"><a href="#"><strong>Link 4 </strong></a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- Block 3 -->
<ul class="flex-container">
     <li style="list-style-type: none;">
<ul class="flex-container">
     <li class="flex-item">
<h3>Überschrift 3 ccc</h3>
<img style="border: 1px solid #000;" src="#" alt="bild 3">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<ul>
     <li style="list-style: square !important;"><a href="#"><strong>Link 5 </strong></a></li>
     <li style="list-style: square !important;"><a href="#"><strong>Link 6 </strong></a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- Block 4 -->
<ul class="flex-container">
     <li class="flex-item">
<h3>Überschrift 4 ddd</h3>
<img style="border: 1px solid #000;" src="#" alt="bild 4">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<ul>
     <li style="list-style: square !important;"><a href="#"><strong>Link 7 </strong></a></li>
     <li style="list-style: square !important;"><a href="#"><strong>Link 8 </strong></a></li>
</ul>
</li>
</ul>

Alles anzeigen

[/FONT]

b3317133

Du hast z.B. bei "Im Editor geschrieben" vor  ein closing </li>, das keinerlei sonstige Zuordnung hat, kein opening <li>, kein <ul>, abgesehen von weiteren ähnlichen Fehlern, evtl. liegt es daran... fehlt ggf. ganz am Anfang noch ein <ul><li> ?

Ergänzung: Für das Einfügen von Code-Blöcken nutze hier im Forum am besten das kleine [+] Symbol in der Menüleiste...

NeroPalme

das war leider ein Kopierfehler... Sorry!

HTML

<ul class="flex-container">
   <!-- Block 1 -->
    <li class="flex-item">
      <h3>Überschrift 1</h3>
      <img style="border: 1px solid #000;" src="#" alt="bild 1">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
      ut labore et dolore magna aliquyam erat, sed diam voluptua.
      <ul>
         <li style="list-style: square !important;"><a href="#"><strong>Link 1 </strong></a></li>
         <li style="list-style: square !important;"><a href="#"><strong>Link 2 </strong></a></li>
      </ul>
    </li>
... weiter mit Block 3-4
</ul>

Alles anzeigen

[FONT=Courier New][/FONT]

NeroPalme

Danke fü den Tipp.
Habe noch einmal alles durchgeschaut... ich denke, dass es soweit ok ist. Solange ich im HTML-Editor schreibe/ändere ist alles prima, wenn ich im visuellen Editor (egal ob Classic oder Gutenberg) eine Kleinigkeit ändere ist wieder alles dahin... siehe oben.

Raphael

Zitat von NeroPalme

wenn ich im visuellen Editor (egal ob Classic oder Gutenberg) eine Kleinigkeit ändere ist wieder alles dahin

Ich schreibe nie im Visuellen-Editor, weil er alles immer anders darstellt als ich es möchte, bzw. Müllcode ausgibt und ich ohnehin HTML/ CSS recht gut kann. Manchmal sehe ich was Kunden mit dem Teil so produzieren. Das dürfte wohl auch dein Problem sein, das der Visuelle - Editor halt "irgendwas" schreibt. Das liegt aber meist am Editor, ist meine Erfahrung.

NeroPalme

Danke für die Info. Gibt es einen guten alternativen Editor als Plugin oder sollte/kann man den Classic als solchen nutzen?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Änderungen im visuellen Editor zerschießt HTML :-(

Jetzt mitmachen!