Centrino: Problem mit Textknoten

Ich habe das Problem das bei der Formatierung einer Seite 4 Wörter auf einer Zeile stehen sollen (als Navigationsleiste). Ich habe jeden Wort 25% zugewiesen. Jedoch entstehen aus unerklärlichen gründen sagenannte Textknoten. Diese beinhalten nix und zerstören die ganze Formatierung. Kann ich diese Textknoten irgendwie dauerhaft entfernen?

Ich würde mich über eine schnelle Antwort freuen.

Hinweis: Ich sehe die Textknoten nur im Firefox Inspektor (kleines Viereck mit Punkt) Foramtierung der HTML Seite ist in CSS

akzeptierte Antworten

  1. Hallo Centrino,

    Kann ich diese Textknoten irgendwie dauerhaft entfernen?

    Ich würde mich über eine schnelle Antwort freuen.

    Mach keine Leerzeichen oder Zeilenumbrüche zwischen den Elementen - schnell und schmutzig.

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. Danke funktioniert. Wer hat sich denn den Mist ausgedacht

      1. Hallo Centrino,

        da muss ich doch schnell mal ein - an diese „akzeptierte Lösung“ machen. Der Haken würde wohl eher an Matthias' Antwort gehören. (Äh, während ich das tue hagelt es gerade Minusse, offenbar für die Idee an sich. Meins ist nur an der Antwort von Centrino und gilt für die Mist-Deklaration)

        Es ist jedenfalls kein Mist, sondern einfach der Unterschied zwischen Inline- und Block-Inhalten. Bei Inline-Inhalten werden Zeilenumbrüche als Whitespace formatiert, bei Block-Inhalten nicht. In HTML-sprech heißen die irgendwie anders, bin nur grad zu faul zum nachgucken.

        Aber reingefallen bin ich auch schon oft genug darauf...

        Rolf

        --
        sumpsi - posui - clusi
  2. Tach!

    Jedoch entstehen aus unerklärlichen gründen sagenannte Textknoten. Diese beinhalten nix und zerstören die ganze Formatierung. Kann ich diese Textknoten irgendwie dauerhaft entfernen?

    Ja, einfach löschen. Ich vermute, es handelt sich bei dir um Whitespace zwischen den Elementen, zum Beispiel ein Zeilenumbruch.

    dedlfix.

  3. @@Centrino

    Ich habe jeden Wort 25% zugewiesen.

    Du kannst Wörtern keine Breiten zuweisen. Du kannst Elementen Breiten zuweisen. In einer Navigation den a-Elementen bzw. – wenn als Liste ausgezeichnet – den li-Elementen.

    Du hast vermutlich sowas getan: display: inline-block; width: 25%. Dann passen nicht 4 Elemente nebeneinander, weil – wie schon gesagt wurde – Whitespace (Leerzeichen, Tabs, Zeilenumbrüche) als Leerzeichen gerendert werden.

    Keine gute Idee wäre, die Breite des Leerzeichens auf seinem eigenen System auszumessen und als magic number abzuziehen und zu denken, das würde bei anderen dann auch passen.

    Ebenfalls keine gute Idee ist – auch wenn das hier zweimal geraten wurde –, den Whitespace im Code zu entfernen und den Code dadurch schlecht lesbar zu machen.

    Eine gute Idee ist, Flexbox oder Grid zu verwenden.

    LLAP 🖖

    PS: Bin gerade mit der Bahn unterwegs. Also wenn überhaupt, dann EDGE. Deutschland, 2018.

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hallo Gunnar,

      PS: Bin gerade mit der Bahn unterwegs. Also wenn überhaupt, dann EDGE. Deutschland, 2018.

      aber Angela hat uns ja flächendeckendes High-Speed-Netz versprochen …

      Wenn ich mit dem Bus zur Arbeit fahre (Bundesstraße und Autobahn), muss ich genau planen, wann (wo) ich eine Seite weiterschalte. Ich habe streckenweise „Kein Netz“.

      Gruß
      Jürgen

    2. @@Gunnar Bittersmann

      Eine gute Idee ist, Flexbox oder Grid zu verwenden.

      Oh, gerade mal Netz! Dann aber fix:

      Codepen

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    3. Danke, ich verwende jetzt ein Grid funktioniert mäßig gut, aber es Funktioniert. Das Problem ist nur das die Zentrierung merkwürdig aussieht.

    4. Ich hab noch eine Frage dazu: Wie kann ich jetzt dafür noch ein Overlay drüber legen? Also so das wenn man mit der Maus drüber fährt sich die Farbe ändert und eine Schrift angezeigt wird.

      1. hallo

        Ich hab noch eine Frage dazu: Wie kann ich jetzt dafür noch ein Overlay drüber legen? Also so das wenn man mit der Maus drüber fährt sich die Farbe ändert und eine Schrift angezeigt wird.

        Ich erteile heutzutage ungern Hilfe für :hover Styling. Viele Geräte erzeugen diesen Event nicht.

        1. @@beatovich

          Ich erteile heutzutage ungern Hilfe für :hover Styling. Viele Geräte erzeugen diesen Event nicht.

          Was aber kein Grund ist, für Geräte, die :hover unterstützen, keinen Stil dafür anzugeben.

          Wichtiger ist allerdings, einen Stil für :focus anzugeben.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      2. Hallo Centrino,

        prinzipiell ist es so, dass man in einer CSS Regel über das :hover Suffix festlegt, dass diese Regel für das Hovering gilt.

        Beispiel:

        HTML

        <p class="suchtext">Ein Ring, sie zu <span class="verb">knechten</span>, sie alle zu <span class="verb">finden</span>,<br>
        ins Dunkel zu <span class="verb">treiben</span> und ewig zu <span class="verb">binden</span><br>
        im Lande Mordor, wo die Schatten <span class="verb">droh'n</span></p>
        

        Im Style (<style>-Element oder CSS Datei)

        .suchtext .verb:hover {
           background-color:red;
        }
        

        So würden alle Elemente mit Klasse verb in einem suchtext-Container rot hinterlegt, wenn die Maus drüberfährt.

        Wie Du das bei Dir anwendest, musst Du selbst rausfinden, oder uns dein HTML zeigen (posten oder verlinken).

        Rolf

        --
        sumpsi - posui - clusi
        1. Hi,

          <p class="suchtext">Ein Ring, sie zu <span class="verb">knechten</span>, sie alle zu <span class="verb">finden</span>,<br>
          ins Dunkel zu <span class="verb">treiben</span> und ewig zu <span class="verb">binden</span><br>
          im Lande Mordor, wo die Schatten <span class="verb">droh'n</span></p>
          

          Im Style (<style>-Element oder CSS Datei)

          .suchtext .verb:hover {
             background-color:red;
          }
          

          So würden alle Elemente mit Klasse verb in einem suchtext-Container rot hinterlegt, wenn die Maus drüberfährt.

          nein, dazu müßte das :hover beim .suchtext stehen (also .suchtext:hover .verb).

          So wie Du es gemacht hast, färbt sich genau das eine .verb, über dem die Maus ist.

          cu,
          Andreas a/k/a MudGuard

          1. Hallo MudGuard,

            So wie Du es gemacht hast, färbt sich genau das eine .verb, über dem die Maus ist.

            Ja. Und genau so wollte ich es auch haben; das passt zum Anliegen des OP.

            So würden alle Elemente mit Klasse verb in einem suchtext-Container rot hinterlegt, wenn die Maus drüberfährt.

            Das war blöd formuliert. Sorry.

            Rolf

            --
            sumpsi - posui - clusi
  4. Foramtierung

    Voramtierung