poisondwarf: Absatzstil via css als Liste darstellen?

Kann ich einen beliebigen Absatzstil mit Hilfe einer css-Definition als Liste anzeigen lassen? Geht das und wenn ja, wie muss ich das in der css schreiben?

Hintergrund:

Ich habe in einer xml-Datei eine Absatz-Formatvorlage "meineListe" definiert. Das Format "meineListe" ist nicht großartig definiert, ist eigentlich nur "Normal" unter anderem Namen. Im xml-Code sieht das so aus:

<para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt1</text></para>

<para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt2</text></para>

Diese xml-Datei wird in html umgewandelt und auf einer Website angezeigt. Hier soll aber dieses Absatzformat als unsortierte Liste erscheinen, also mit <ul> und <li>.

Ich finde nur Sachen, über die ich vorhandene <ul>s und <li>s anpassen kann. Wenn es wirklich nicht geht, dann ändere ich die xml, aber ich hätte gedacht, dass das funktioniert.

Danke :)

akzeptierte Antworten

  1. Servus!

    Kann ich einen beliebigen Absatzstil mit Hilfe einer css-Definition als Liste anzeigen lassen?

    Anzeigen nicht, aber aussehen lassen; z.B. durch ein Pseudoelement:

    p::before {
     content:;
    }
    

    Danke :)

    Herzliche Grüße

    Matthias Scharwies

    --
    "An alle, die nie an mich geglaubt haben und gesagt haben, aus mir werde nie was. Ich bin jetzt Admin bei einer WhatsApp Gruppe!"
  2. @@poisondwarf

    Kann ich einen beliebigen Absatzstil mit Hilfe einer css-Definition als Liste anzeigen lassen? Geht das und wenn ja, wie muss ich das in der css schreiben?

    Klar geht das. Die kannst mit CSS prinzipiell jeden Elementtypen wie einen anderen aussehen lassen. (Die Browser spielen bloß nicht bei allen Elementtypen mit.) Auch einen Absatz als Listenelement.

    #Aber:

    Im xml-Code sieht das so aus:

    <para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt1</text></para>
    
    <para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt2</text></para>
    

    Kein Element, das die ganze Liste auszeichnet?

    Diese xml-Datei wird in html umgewandelt

    Das geschieht wie? XSLT?

    Und wie sieht das generierte HTML aus? So in der Art?

    <p class="faux-li">Listenpunkt 1</p>
    <p class="faux-li">Listenpunkt 2</p>
    
    

    Wenn es wirklich nicht geht, dann ändere ich die xml,

    Die Transformation wäre zu ändern, so dass im HTML tatsächlich eine Liste ist.

    aber ich hätte gedacht, dass das funktioniert.

    Selbst wenn das so aussieht wie eine Liste, funktioniert es nicht so.

    LLAP 🖖

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

      Selbst wenn das so aussieht wie eine Liste, funktioniert es nicht so.

      Willst du damit sagen, dass ich, wenn ich mein Pferd schwarzweiß anmale, es trotzdem nicht melken kann?

      Gruß
      Kalk

      1. @@Tabellenkalk

        Selbst wenn das so aussieht wie eine Liste, funktioniert es nicht so.

        Willst du damit sagen, dass ich, wenn ich mein Pferd schwarzweiß anmale, es trotzdem nicht melken kann?

        Ich will damit sagen, dass es bei Hengst oder Wallach ziemlich egal ist, ob 🐴 Pferd oder 🦄 Einhorn.

        LLAP 🖖

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

          Ich will damit sagen, dass es bei Hengst oder Wallach ziemlich egal ist, ob 🐴 Pferd oder 🦄 Einhorn.

          Lass mal beide pupsen. Dann wirst du anderer Meinung sein.

          Bis demnächst
          Matthias

          --
          Rosen sind rot.
          1. Hallo Matthias Apsel,

            Ich will damit sagen, dass es bei Hengst oder Wallach ziemlich egal ist, ob 🐴 Pferd oder 🦄 Einhorn.

            Lass mal beide pupsen. Dann wirst du anderer Meinung sein.

            Zur Info für diejenigen, die mit Mädchen im Grundschulalter eher weniger zu tun haben: Einhörner pupsen Regenbogen (wissenschaftliche Erklärung).

            Bis demnächst
            Matthias

            --
            Rosen sind rot.
            1. Hallo Matthias,

              Zur Info für diejenigen, die mit Mädchen im Grundschulalter eher weniger zu tun haben: Einhörner pupsen Regenbogen (wissenschaftliche Erklärung).

              Hihi, ziemlich witzig. Danke 😀

              LG,
              CK

      2. @@Tabellenkalk

        Willst du damit sagen, dass ich, wenn ich mein Pferd schwarzweiß anmale, es trotzdem nicht melken kann?

        Wie jetzt, Pferd schwarzweiß anmalen?

        Zebras
        (Foto: Muhammad Mahdi Karim, GFDL. Quelle: Wikimedia Commons)

        LLAP 🖖

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

    wenn das XML-Dokument direkt formatiert werden soll, dann in dieser Art:

    <?xml version="1.0" encoding="UTF-8"?>
    <?xml-stylesheet href="test.css" type="text/css"?>
    <root>
      <para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt1</text></para>
      <para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt2</text></para>
    </root>
    
    

    mit test.css:

    root
    {
      display: block;
      margin: 1em;
    }
    
    para > text
    {
      display: list-item;
      list-style-position: inside;
    }
    

    Eine XSL-Transformation nach HTML könnte so aussehen:

    <?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    
      <xsl:output method="html" version="5" encoding="UTF-8"/>
    
      <xsl:template match="root">
        <html>
          <head>
            <meta charset="UTF-8"/>
            <title>Test</title>
          </head>
          <body>
            <ul>
              <xsl:apply-templates select="para"/>
            </ul>
          </body>
        </html>
      </xsl:template>
    
      <xsl:template match="para">
        <li class="{@styleclass}">
          <xsl:value-of select="text"/>
        </li>
      </xsl:template>
    
    </xsl:stylesheet>
    

    Wesentliche HTML-Ausgabe:

    <ul>
      <li class="meineListe">Listenpunkt1</li>
      <li class="meineListe">Listenpunkt2</li>
    </ul>
    
    

    Grüße,
    Thomas

    1. @@ThomasM

      Eine XSL-Transformation nach HTML könnte so aussehen:

              <ul>
                <xsl:apply-templates select="para"/>
              </ul><xsl:template match="para">
      

      Nicht wirklich, glaube ich.

      Es könnte sicher auch andere para-Elemente geben, die nicht in die Liste zu packen wären. Diese sollen sicherlich p-Elemente im HTML sein.

      Nur die para-Elemente mit Attribut styleclass="meineListe" sollen zu li werden, und das mit ul außenrum. Geht das mit XSLT überhaupt? Aus

      <para><text>Absatz vor der Liste</text></para>
      <para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt 1</text></para>
      <para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt 2</text></para>
      <para><text>Absatz nach der Liste</text></para>
      

      soll werden:

      <p>Absatz vor der Liste</p>
      <ul>
      	<li>Listenpunkt 1</li>
      	<li>Listenpunkt 2</li>
      </ul>
      <p>Absatz nach der Liste</p>
      

      Wesentliche HTML-Ausgabe:

      <ul>
        <li class="meineListe">Listenpunkt1</li>
        <li class="meineListe">Listenpunkt2</li>
      </ul>
      
      

      Das ist nicht besonders sinnvoll. Wenn Klasse, dann so:

      <ul class="meineListe">
      	<li>Listenpunkt 1</li>
      	<li>Listenpunkt 2</li>
      </ul>
      

      LLAP 🖖

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

        Nur die para-Elemente mit Attribut styleclass="meineListe" sollen zu li werden, und das mit ul außenrum. Geht das mit XSLT überhaupt? Aus

        <para><text>Absatz vor der Liste</text></para>
        <para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt 1</text></para>
        <para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt 2</text></para>
        <para><text>Absatz nach der Liste</text></para>
        

        soll werden:

        <p>Absatz vor der Liste</p>
        <ul>
        	<li>Listenpunkt 1</li>
        	<li>Listenpunkt 2</li>
        </ul>
        <p>Absatz nach der Liste</p>
        

        Ein Ansatz in XSLT 2.0:

        <?xml version="1.0" encoding="UTF-8"?>
        <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
        
          <xsl:output method="html" version="5" encoding="UTF-8"/>
        
          <xsl:template match="root">
            <html>
              <head>
                <meta charset="UTF-8"/>
                <title>Test</title>
              </head>
              <body>
                <xsl:for-each-group select="para" group-starting-with="para[not(@styleclass)]">
        
                  <xsl:if test="current-group()[not(@styleclass)]">
                    <p>
                      <xsl:value-of select="text"/>
                    </p>
                  </xsl:if>
        
                  <xsl:if test="count(current-group()[@styleclass]) > 0">
                    <ul class="{distinct-values(current-group()/@styleclass)}">
                      <xsl:for-each select="current-group()[@styleclass]">
                        <li>
                          <xsl:value-of select="text"/>
                        </li>
                      </xsl:for-each>
                    </ul>
                  </xsl:if>
        
                </xsl:for-each-group>
              </body>
            </html>
          </xsl:template>
        </xsl:stylesheet>
        
        

        Ergebnis:

        <p>Absatz vor der Liste</p>
        <ul class="meineListe">
          <li>Listenpunkt 1</li>
          <li>Listenpunkt 2</li>
        </ul>
        <p>Absatz nach der Liste</p>

        Grüße,
        Thomas