Wienerin: Liste mit Jahreszahlen

Hallo,

ich würde gerne die im Bild ersichtliche Liste umsetzen.
Das Listen div kennt nur diverse vorgegebene Aufzählungspunkte wie römische Zahlen oä. Wie erreiche ich, dass vorneweg die Jahreszahl kommt, dann ein beliebig einstellbarer Abstand (vergleichbar mit einem Tabulator in Textprogrammen) und die umbrechenden Zeilen auf gleichem einstellbaren Abstand beginnen?

Vielen Dank!

  1. Moin.

    Wie erreiche ich, dass vorneweg die Jahreszahl kommt, dann ein beliebig einstellbarer Abstand (vergleichbar mit einem Tabulator in Textprogrammen) und die umbrechenden Zeilen auf gleichem einstellbaren Abstand beginnen?

    Wie wär's mit einer Tabelle?

    Christoph

  2. Hallo,

    also ich hab da 3 Ideen:

    1. Als jpeg einsetzen
    2. Ein Div um alles machen. Die zahlen einzeln als div definieren und den text dahinter als fixed div machen.
    3. Eine Tabelle nutzen

    mfg Steffen

      1. Als jpeg einsetzen

      wuuuuuuuuuuuuuuuah![1]

      1. Ein Div um alles machen. Die zahlen einzeln als div definieren und den text dahinter als fixed div machen.

      wuuuuah![1]

      1. Eine Tabelle nutzen

      wuah![1]

      Bei allem Resepekt, aber die drei genannten Lösungen sind etwas bescheiden - die Tabelle ist noch vertretbar, aber die anderen beiden würde ich schon fast als gemeingefährlich bezeichnen.

      Wenn du[2] Vorschläge machst, kläre die Fragestellenden bitte über die Vor- und Nachteile deiner Vorschläge auf - es gibt immer wieder leute, die unreflektiert den ersten Vorschlag übernehmen, ihn als "gut" befinden und das Forum dann nicht mehr besuchen[3] um ggf. folgende bessere Vorschläge zu lesen.

      [1] die Anzahl des Buchstaben U drückt das Ausmaß des Erschauderns aus
      [2] dich hat's jetzt leider erwischt, das fällt mir in diesem Forum aber oft auf und ich wollts einfach mal loswerden - nimms nicht persönlich :)
      [3] hier nicht zutreffend

      1. @@suit:

        nuqneH

        1. Eine Tabelle nutzen
          wuah![1]
          […] die Tabelle ist noch vertretbar

        Durchaus (mit den (nicht angezeigten) Spaltenüberschriften „Jahr“ und „Ereignis“).

        Ein „wah!“ wäre hier angebracht gewesen. ;-)

        Qapla'

        --
        Bildung lässt sich nicht downloaden. (Günther Jauch)
  3. Hallo Wienerin,

    IMHO ist das eine Frage der Semantik. Nutze doch einfach eine <http://de.selfhtml.org/html/text/listen.htm#definition@title=andere Liste>:

    <dl>  
     <dt>2000</dt>  
     <dd>  
      <ul>  
       <li>Text 1</li>  
       <li>Text 2</li>  
      </ul>  
     </dd>  
     <!-- etc. -->  
    </dl>
    

    Gruß aus Berlin!
    eddi

    --
    ...obschon mit dem Zusatze, sich immer und ewig zu irren...
    ^^
    1. Hallo Eddi,
      vielen Dank, das klappt ganz gut.

      Das einzige was mich nun noch stört ist dass dt und dd, also Jahreszahl und die Beschreibung, nicht auf einer Zeile sind. Gibt es da per CSS eine Möglichkeit das nicht in die nächste Zeile wandern zu lassen?

      Ich bin begeistert, wie schnell ich hier Antwort bekomme.
      WOW! und danke! Sigrid

      (Vielen Dank auch an die anderen – eine Tabelle möchte ich als Notfalllösung verwenden, da für meinen Kunden nur kompliziert mit meinem CMS zu befüllen)

      1. Liebe Wienerin,

        Das einzige was mich nun noch stört ist dass dt und dd, also Jahreszahl und die Beschreibung, nicht auf einer Zeile sind. Gibt es da per CSS eine Möglichkeit das nicht in die nächste Zeile wandern zu lassen?

        http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float?

        dt { float: left; }

        Eventuell musst Du noch andere Parameter anpassen, wie z.B. margin und padding...

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
      2. (Vielen Dank auch an die anderen – eine Tabelle möchte ich als Notfalllösung verwenden, da für meinen Kunden nur kompliziert mit meinem CMS zu befüllen)

        Darf ich mir die Frage erlauben, in welchem CMS (bzw. mit welchem Editor) eine verschachtelte Defintionsliste einfacher für einen "normalen Menschen" zu warten ist, als eine Tabelle?

        1. Hi!

          Darf ich mir die Frage erlauben, in welchem CMS (bzw. mit welchem Editor) eine verschachtelte Defintionsliste einfacher für einen "normalen Menschen" zu warten ist, als eine Tabelle?

          Notepad

          --
          "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                - T. Pratchett
          1. Notepad

            "normale Menschen" bearbeiten idR. keinen HTML-Quelltext

            1. Notepad

              "normale Menschen" bearbeiten idR. keinen HTML-Quelltext

              Ist "normal sein" jetzt gut oder schlecht? Ich schwanke da noch bei der Entscheidung. Soll lich jetzt in Traenen ausbrechen, weil Du implizit behauptest, ich sei nciht normal? Soll ich mich freuen? Ach verschieben wir das und geben ein Statemant ab:

              "normale" Menschen koennen nichtmal ne Tabelle richtig ausfuellen. Dafuer kann man ein nettes kleines Tool in ein CMS implementieren, in das man Jahre und Unterpunkte eingibt.

              --
              "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                    - T. Pratchett
              1. Ist "normal sein" jetzt gut oder schlecht?

                Weder noch - wenn man in einem bestimmten Bereich normal ist, entspricht man einer Norm (siehe auch Normalverteilung). Der größte

                Ich schwanke da noch bei der Entscheidung. Soll lich jetzt in Traenen ausbrechen, weil Du implizit behauptest, ich sei nciht normal? Soll ich mich freuen?

                Mit anderen Worten: der Großteil der Bevölkerung liegt in der Mitte der Normalverteilungskurve wenns um HTML-Authoring geht - hier sind die mit "keine Ahnung was HTML überhaupt ist" angesiedelt. Du liegst vermutlich im Bereich "Ahnung was HTML ist und wie es benutzt wird" - ein andere Teil wäre vermutlich "Ahnung was HTML ist, aber keine Ahnung wie man es nutzt" :)

                "normale" Menschen koennen nichtmal ne Tabelle richtig ausfuellen.

                Das ist richtig - aber sie können zumindest eine Tabelle zum Formatieren missbrauchen :)

                1. Hola!

                  "normale" Menschen koennen nichtmal ne Tabelle richtig ausfuellen.

                  Das ist richtig - aber sie können zumindest eine Tabelle zum Formatieren missbrauchen :)

                  Ja. Sie fügen eine neue 'Zeile' z.B. mit nem Enter ein... Und weil das in nem ordentlichem CMS oft einen Absatz erstellt haben sie ein Problem  und nölen rum weil da ja plötzlich ne Leerzeile ist. Son Scheißprogramm, aber es gibt dann ja meist noch SHIFT+ENTER und so...

                  Und wenn sie mal ne neue Zelle benötigen, wird halt schnell ne neue Tabelle in die vorhandene Zelle eingefügt.

                  Aber: Tabellen machen ja nciht diese schönen kleinen Punkte und so vor jede Zeile. Die werden dann also improvisiert. Minuszeichen eignen sich hervorragend... Es gibt da ja noch sowas komisches wie ne Liste, aber das benimmt sich merkwürdig. Das benutzt man nicht.

                  Erwähnte ich bereits, daß sie zertifizierte Benutzer dieses CMS sind?

                  Die Tage an denen ich wirklich aufstehen möchte werden immer seltener...

                  --
                  "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                        - T. Pratchett
                  1. Ja. Sie fügen eine neue 'Zeile' z.B. mit nem Enter ein... Und weil das in nem ordentlichem CMS oft einen Absatz erstellt haben sie ein Problem  und nölen rum weil da ja plötzlich ne Leerzeile ist. Son Scheißprogramm, aber es gibt dann ja meist noch SHIFT+ENTER und so...

                    Das sollten viele, die keine Ahnung von HTML haben, aber dennoch wissen - zumindest gehört das zur Schulbildung in einer mittleren und höheren kaufmännischen Schule (zumindest in Österreich).

                    Ich bezweifle zwar, dass das den Weg in die Köpfe der Leute findet, aber theoretisch sollte das Wissen vorhanden sein.

                    Meinen Kunden kann ich das aber Problemlos erklären - TinyMCE oder htmlArea können das - und bis jetzt hats noch jeder begriffen.

                    Und wenn sie mal ne neue Zelle benötigen, wird halt schnell ne neue Tabelle in die vorhandene Zelle eingefügt.

                    Ja, auch das soll's geben.

                    Aber: Tabellen machen ja nciht diese schönen kleinen Punkte und so vor jede Zeile. Die werden dann also improvisiert. Minuszeichen eignen sich hervorragend... Es gibt da ja noch sowas komisches wie ne Liste, aber das benimmt sich merkwürdig. Das benutzt man nicht.

                    Ja, kenne ich auch - ist alles eine Sache der regelmäßigen Einschulung - so durschnittliche 1x im Monat sollte diese erfolgen :)

                    Erwähnte ich bereits, daß sie zertifizierte Benutzer dieses CMS sind?

                    Nein, das ist hart - solche Erfahrungen hab ich bisher nur mit "Laien" gemacht.

                    Die Tage an denen ich wirklich aufstehen möchte werden immer seltener...

                    :)

    2. @@Edgar Ehritt:

      nuqneH

      Hallo Wienerin,

      IMHO ist das eine Frage der Semantik. Nutze doch einfach eine <http://de.selfhtml.org/html/text/listen.htm#definition@title=andere Liste>:

      Ja. Aber warum schlägst du dann zwei verschachtelte Listen vor? Eine genügt doch:

      <dl>  
        <dt>2000</dt>  
        <dd>Text 1</dd>  
        <dd>Text 2</dd>  
        <dt>2001</dt>  
        <dd>Text 3</dd>  
        <!-- etc. -->  
      </dl>
      

      Qapla'

      --
      Bildung lässt sich nicht downloaden. (Günther Jauch)
      1. hi,

        Ja. Aber warum schlägst du dann zwei verschachtelte Listen vor? Eine genügt doch:

        <dl>

        <dt>2000</dt>
          <dd>Text 1</dd>
          <dd>Text 2</dd>
          <dt>2001</dt>
          <dd>Text 3</dd>
          <!-- etc. -->
        </dl>

          
        Mit der Aussicht darauf, dass ganze mit CSS ansehnlich und annähernd Browserübergreifend zu gestalten, würde ich mir deine Variante nicht antun.  
          
        mfg
        
        -- 
        マルコム ベック`秒 エイリアス エJ Ñ - ĜわたしÑ
        
        1. Hi,

          Ja. Aber warum schlägst du dann zwei verschachtelte Listen vor? Eine genügt doch:

          <dl>

          <dt>2000</dt>
            <dd>Text 1</dd>
            <dd>Text 2</dd>
            <dt>2001</dt>
            <dd>Text 3</dd>
            <!-- etc. -->
          </dl>

          
          >   
          > Mit der Aussicht darauf, dass ganze mit CSS ansehnlich und annähernd Browserübergreifend zu gestalten, würde ich mir deine Variante nicht antun.  
            
          Welche Probleme siehst bzw. erwartest du da?  
            
          Jahr nach links floaten, DD-Inhalt wird per margin-left auch über ggf. mehrere Zeilen auf Abstand gehalten.  
          Und den "Strich" vor den einzelnen DD kann man als Hintergrundbild unterbringen.  
            
          MfG ChrisB  
            
          
          -- 
          Light travels faster than sound - that's why most people appear bright until you hear them speak.
          
          1. Hallo ChrisB,

            Und den "Strich" vor den einzelnen DD kann man als Hintergrundbild unterbringen.

            schöner wäre es natürlich, wenn man dass mittels CSS hinbekäme. Streuben sich die verschiedenen Internet-Explorer-Versionen immer noch gegen eine Interpretation?

            Gruß aus Berlin!
            eddi

          2. hi,

            Welche Probleme siehst bzw. erwartest du da?

            Ich hätte keine Schwierigkeiten bei der umsetzung, nur finde ich die von Edgar vorgeschlagene Variante in vielerlei Hinsicht besser, nicht nur Styletechnisch.

            http://dj-tut.de/z_test/selfhtml/artikel/listen

            Und CSS deaktivieren -- Edgars Beispiel ist auch ohne CSS klarer strukturiert.

            Suits "nur" Listenvorschlag ist mir jetzt am frühen morgen zuuu anstrengend ;)

            mfg

            --
            マルコム ベック`秒 エイリアス エJ Ñ - ĜわたしÑ
            1. hi,

              http://dj-tut.de/z_test/selfhtml/artikel/listen

              Im IE < 7 sieht das ganze übrigens sehr interessant aus ;)

              I love this damn piece of shit!

              mfg

              --
              マルコム ベック`秒 エイリアス エJ Ñ - ĜわたしÑ
          3. Welche Probleme siehst bzw. erwartest du da?

            IE 6, IE 6 und, als wäre es noch nicht genug, zu allem Überfluss auch noch IE 6.

            Vielleicht postet mal einer eine browserübergreifende Lösung - also nicht nur ein HTML-Gerüst.

            Mathias

            1. Hi Mathias et al,

              Welche Probleme siehst bzw. erwartest du da?

              IE 6, IE 6 und, als wäre es noch nicht genug, zu allem Überfluss auch noch IE 6.

              Vielleicht postet mal einer eine browserübergreifende Lösung - also nicht nur ein HTML-Gerüst.

              Bitte: http://chrisb.bplaced.net/jahresliste_dl.htm

              Nach meinem Test im IETester sieht das auch im IE 6 & 5.5 annehmbar aus*.

              Den 3px Text Jog, der auch hier bei den DD auftritt, die auf einer Höhe mit einer gefloateten DT liegen, habe ich mit dem üblichen Fix allerdings nicht korrigieren können.
              Dafür habe ich den DT ein margin-right von -3px geben - damit liegt wenigstens der als Hintergrundbild eingesetzte Strich überall auf einer Linie, auch wenn der Text an den Stellen damit nach wie vor 3px Abstand hält. Das halte ich für die Darstellung im Uraltbrowser IE 6 und kleiner für vertretbar.

              * Da ich in den nicht zu viel Vertrauen setzen möchte, auch noch ein Screenshot aus einem hoffentlich nativen IE 6 unter XP per browsershots.org: http://browsershots.org/screenshots/52bb83e1642cd9e476620afefca54a02/

              MfG ChrisB

              --
              Light travels faster than sound - that's why most people appear bright until you hear them speak.
              1. Hello,

                Bitte: http://chrisb.bplaced.net/jahresliste_dl.htm

                sieht auch im IE 6.0 und FF 3.0.10 vernünftig aus.
                Ich hab's mir gelich gebunktert ;-)

                Liebe Grüße aus dem schönen Oberharz

                Tom vom Berg

                --
                Nur selber lernen macht schlau
                http://bergpost.annerschbarrich.de
              2. Bitte: http://chrisb.bplaced.net/jahresliste_dl.htm

                Danke sehr, das sieht gut aus.

                Ich habe sehr schlechte Erfahrung mit float und clear beim selben Element im IE 6 gemacht, sodass ich clear einem weiteren Container-Element pro Zeile geben musste - was die Verwendung von dl unmöglich machte. (Ich glaube, da musste aus irgendwelchen Gründen auch der Container rechts floaten. Habe aber auf die Schnelle keinen Testcase zur Hand.)
                Wenn es für diesen Anwendungsfall klappt: Wunderbar.

                Mathias

            2. @@molily:

              nuqneH

              Markup:

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
              <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
                  <head>  
                      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
                      <title>TEST</title>  
                      <link rel="stylesheet" type="text/css" href="test.css"/>  
                  </head>  
                  <body>  
                      <h1>Allgemeine Erklärung der Menschenrechte</h1>  
                      <dl>  
                          <dt>Artikel 1</dt>  
                          <dd>Alle Menschen sind frei und gleich an Würde und Rechten geboren. Sie sind mit Vernunft und Gewissen begabt und sollen einander im Geist der Brüderlichkeit begegnen.</dd>  
                          <dt>Artikel 2</dt>  
                          <dd>Jeder hat Anspruch auf die in dieser Erklärung verkündeten Rechte und Freiheiten ohne irgendeinen Unterschied, etwa nach Rasse, Hautfarbe, Geschlecht, Sprache, Religion, politischer oder sonstiger Überzeugung, nationaler oder sozialer Herkunft, Vermögen, Geburt oder sonstigem Stand.</dd>  
                          <dd>Des weiteren darf kein Unterschied gemacht werden auf Grund der politischen, rechtlichen oder internationalen Stellung des Landes oder Gebiets, dem eine Person angehört, gleichgültig ob dieses unabhängig ist, unter Treuhandschaft steht, keine Selbstregierung besitzt oder sonst in seiner Souveränität eingeschränkt ist.</dd>  
                          <dt>Artikel 3</dt>  
                          <dd>Jeder hat das Recht auf Leben, Freiheit und Sicherheit der Person.</dd>  
                      </dl>  
                  </body>  
              </html>
              

              Stylesheet (die Anstriche bei den 'dd' spar ich mir jetzt mal):

              dt  
              {  
                  float: left;  
              }  
                
              dd  
              {  
                  margin: 1em 0 1em 6em;  
              }
              

              Welche Probleme siehst bzw. erwartest du da?

              IE 6, IE 6 und, als wäre es noch nicht genug, zu allem Überfluss auch noch IE 6.

              *g*

              In der Tat, IE 6 rückt die erste Zeile des Texts im ersten 'dd' nach einem 'dt' etwas ein.

              Abhilfe: keine Floats, sondern 'dt' per absoluter Positionierung aus dem Fluss nehmen:

              dt  
              {  
                  position: absolute;  
                  left: 10px;  
              }  
                
              dd  
              {  
                  margin: 1em 0 1em 6em;  
              }
              

              Problem: Opera stellt die 'dt' ab dem zweiten zu hoch dar. Anstatt das für Opera hinzufrickeln, belassen wir’s bei den Floats und nehmen die Lösung mit absoluter Positionierung nur für IE < 7:

              dt  
              {  
                  float: left;  
              }  
                
              * html dt  
              {  
                  position: absolute;  
                  left: 10px;  
              }  
                
              dd  
              {  
                  margin: 1em 0 1em 6em;  
              }
              

              Vielleicht postet mal einer eine browserübergreifende Lösung - also nicht nur ein HTML-Gerüst.

              Naja, eher eine Doppellösung als EINE browserübergreifende – aber es funzt[tm].

              Qapla'

              --
              Bildung lässt sich nicht downloaden. (Günther Jauch)
      2. Hallo Gunnar,

        Aber warum schlägst du dann zwei verschachtelte Listen vor?

        IMHO ist das eine Frage der Semantik.

        Gruß aus Berlin!
        eddi

        1. @@Edgar Ehritt:

          nuqneH

          Aber warum schlägst du dann zwei verschachtelte Listen vor?

          IMHO ist das eine Frage der Semantik.

          Hm, HTML 4 [HTML401 §10.3] sagt nichts über multiple 'dd'-Elemente nach einem 'dt'-Element.

          HTML 5 [HTML5 §4.5.10] sagt: “Each group must consist of one or more names (dt elements) followed by one or more values (dd elements). […] The values within a group are alternatives; multiple paragraphs forming part of the same value must all be given within the same dd element.”

          Da die verschiedenen Ereignisse eines Jahres keine Alternativen sind, sondern Teile desselben Wertes (aller Ereignisse eines Jahres), dürften sie also nicht in verschiedenen 'dd'-Elementen stehen?

          Allerdings gibt dieselbe Spec etwas weiter unten [HTML5 §4.5.12] ein widersprüchliches Beispiel mit mehreren 'dd'-Elementen, die auch keine Alternativen darstellen.

          Mit sehr heißer Nadel gestrickt, dieses HTML 5.

          Qapla'

          --
          Bildung lässt sich nicht downloaden. (Günther Jauch)
          1. Mit sehr heißer Nadel gestrickt, dieses HTML 5.

            Nein, durch Browserhersteller mit wenig Hirn und Verstand gestrickt.

            Youtube gehört Google
            Google finanziert die Firefox-Entwicklung
            Firefox wird von der Mozilla-Foundation entwickelt
            Die Mozialla-Foundation hat einen Löwenanteil zu HTML 5 geleistet
            Die HTML-5-Version von Youtube funktionert mit Firefox 3.5 nicht

            Diese Kette lässt sich wohl in die Kategorie EPIC FAIL einsortieren.

            1. Hallo,

              Youtube gehört Google
              Google ...

              ... ist der Arbeitgeber des alleinigen Autors der Spezifikation. ;)

              Tim

          2. Re:

            Zunächst finde ich es schön, dass Du nunmehr Argumente nachhältst und wir uns nicht mehr kniehoch anpinkeln müssen. Ich finde es wichtig, sich auch um solche scheinbaren Banalitäten mal gemeinsam Gedanken zu machen, anstoß zu nehmen und Meinungen auszuprägen.

            Grundsätzlich halte ich die Umsetzung der Strukturierung von Dokumenten durch HTML in einigen Teilen für schlichtweg verpfuscht. Diese Ansicht ergibt sich aus dem Umgang mit Objekten/Instanzen/Funktionen als Programmierer. So hat HTML nach meinem Geschmack eigenwillig lineare (Un-)Möglichkeiten der Strukturierung:

            <h2>Titel</h2>  
            <p>Text</p>  
            <p>Text</p>  
            <hr>  
            <h2>Titel</h2>  
            <!-- etc. -->
            

            Hierbei ergibt sich der Zusammenhang (im Sinne einer Zugehörigkeit) von <h2> zu den folgenden Paragraphen <p> nur dadurch, dass diese nachstehen. Selbes lässt sich ja ebenso für das fragliche Beispiel feststellen:

            <dl>  
             <dt>Titel</dt>  
             <dd>Text</dd>  
             <dd>Text</dd>  
             <dt>Titel</dt>  
             <!-- etc. -->  
            </dl> 
            

            Hm, HTML 4 [HTML401 §10.3] sagt nichts über multiple 'dd'-Elemente nach einem 'dt'-Element.

            HTML 5 [HTML5 §4.5.10] sagt: “Each group must consist of one or more names (dt elements) followed by one or more values (dd elements). […] The values within a group are alternatives; multiple paragraphs forming part of the same value must all be given within the same dd element.”

            Als Programmierer habe ich es mit _einer_ Definition, sagen wir eine Funktion, bestehend aus _einer_ "Einleitung" und _einem_ "Funktionsrumpf" zutun:

            function titel(){  
              alert("Text");  
              alert("Text");  
            }
            

            Diese eindeutige Struktur der Zugehörigkeit ist in HTML eben nicht (immer) gegeben. Jedoch ist diese Struktur sehr nützlich. Dabei denke ich an DOM:

            <div>  
             <h2>Titel</h2>  
             <p>Text</p>  
             <p>Text</p>  
            </div>
            

            Einfach und performant kann ich durch document.getElementsByTagName('div')[0].childNodes auf alle zugehörigen - ja zusammenhängenden - Elemente zugreifen. In einer linearen Struktur fehlen mir diese Möglichkeiten, Bereiche, die eben für Performanz eine gewichtige Rolle spielen können, vorzudefinieren. Ich war angetan vom Konzept XHTML 2.0 mit seinem Element <section> hinsichtlich der div-ites. Jedoch krankte eben die Auszeichnung von Unterteilungen mittels <h> an den oben stehenden Problemen im DOM.

            Aus Blickwinkel eines Programmierers also bin ich der Auffassung, dass sich aus der Bedeutung "definition list" -> "definition term" -> "difinition discription" ergeben sollte, dass zu _einem_ Ausdruck _eine_ Beschreibung gehört. Unterteilt sie sich listenartig, bediene ich mich einer (weiteren) Liste, um aus dem vorgegebenen Gewurstel etwas zu machen. (Dir als Berliner sollte es vielleicht etwas sagen, wie ich es tatsächlich meine, wenn ich Dir schreibe: Wir werden das Kind schon schaukeln, auch wenn ihm schon tot ist.)

            Ich halte die Auszeichnung mittels <fieldset> und <legend> für eine sehr klare und gelungene Strukturierung. Bitte; es geht also auch in HTML. Dagegen ist für mich u. a. die Definitionsliste ein heilloses Durcheinander, was im DOM erst mühselig aufgeschlüsselt werden muss. Mir fehlt hier ein übergeordnetes Element, was die Zusammenhänge klar (okay ^,- klarer) herausstellt:

            <dl>  
             <dr><!-- definition range -->  
              <dt/>  
              <dd/>  
              <dd/>  
             </dr>  
             <dr>  
              <!-- etc. -->  
             </dr>  
            </dl>
            

            Gruß aus Berlin!
            eddi

            1. hi,

              <dl>

              <dr><!-- definition range -->
                <dt/>
                <dd/>
                <dd/>
              </dr>
              <dr>
                <!-- etc. -->
              </dr>
              </dl>

                
                
              <http://forum.de.selfhtml.org/archiv/2009/5/t186757/#m1240594>  
                
              Zitat: "Aber nicht ganz das, was du suchst"  
                
              Leider.  
                
              mfg
              
              -- 
              マルコム ベック`秒 エイリアス エJ Ñ - ĜわたしÑ
              
              1. マルコム ベック`秒 エイリアス エJ Ñ - ĜわたしÑ

                Dazu kann ich nur sagen:

                バスガス爆発ブスバスガイド

                Mathias

                1. Hello,

                  マルコム ベック`秒 エイリアス エJ Ñ - ĜわたしÑ

                  Dazu kann ich nur sagen:

                  バスガス爆発ブスバスガイド

                  Häh?

                  私は理解バーンホフ

                  美しいOberharz各位からの挨拶

                  トムバーグで

                  --
                  Nur selber lernen macht schlau
                  http://bergpost.annerschbarrich.de
              2. Hallo Malcolm Beck´s,

                </dr><!-- definition range -->
                i. V. m. zu verstehendem Text

                Zitat: "Aber nicht ganz das, was du suchst"

                Wahr! ^,-

                Gruß aus Berlin!
                eddi

            2. @@Edgar Ehritt:

              nuqneH

              Jedoch krankte eben die Auszeichnung von Unterteilungen mittels <h> an den oben stehenden Problemen im DOM.

              Wenn man so auszeichnet, dass die Überschrift außerhalb des zugehörigen 'section'-Elements steht:

              <h>1 Lorem ipsum</h>  
              <section>  
                <p>Lorem ipsum dolor sit amet</p>  
                <p>Consectetuer adipiscing elit.</p>  
              </section>  
              <h>2 Sed diam nonummy</h>  
              <section>  
                <p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
              </section>
              

              Besser wäre wohl die Auszeichnug, dass die Überschrift innerhalb des 'section'-Elements steht:

              <section>  
                <h>1 Lorem ipsum</h>  
                <p>Lorem ipsum dolor sit amet</p>  
                <p>Consectetuer adipiscing elit.</p>  
              </section>  
              <section>  
                <h>2 Sed diam nonummy</h>  
                <p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
              </section>
              

              Mir scheint, die Spec [XHTML2 §8.8] ließe beides zu.

              Dagegen ist für mich u. a. die Definitionsliste ein heilloses Durcheinander, was im DOM erst mühselig aufgeschlüsselt werden muss. Mir fehlt hier ein übergeordnetes Element, was die Zusammenhänge klar (okay ^,- klarer) herausstellt:

              Full ACK. (Das Archiv ist voll davon.)

              <dr><!-- definition range -->

              Das Ding heißt in XHTML 2 'di' (definition list item). [XHTML2 §11.1] Hätte geheißen.

              In einer früheren Version von HTML 5 war 'di' auch mal enthalten. Wurde wieder rausgenommen: “HTML5 should group <dt>s and <dd>s together in <di>s!
              This is a styling problem and should be fixed in CSS. There's no reason to add a grouping element to HTML, as the semantics are already unambiguous.” [HTML5-FAQ]

              Riesendummheit, IMHO.

              Qapla'

              --
              Bildung lässt sich nicht downloaden. (Günther Jauch)
              1. Re:

                [HTML5-FAQ] Riesendummheit, IMHO.

                lu' teH

                veSneS je HoS
                eddi

  4. Ungeachtet des bereits vorhandenen Vorschlag hätte ich noch einen:

    <ul class="chronik">  
      <li>  
       <h2>2001</h2>  
       <p>Text 1</p>  
       <p>text 2</p>  
      </li>  
      <li />  
      <li />  
    </ul>
    

    Die li-Elemente erhalten einen entsprechenden Aussenabstand auf der linken Seite (oder das ul-Element einen Innenabstand).

    Das h2-Element wird rauspositioniert.

    Alternativ kann das h2-Element gegen eine andere Überschriftenebene ersetzt werden.

    Vorteil dieser Lösung: imho einfacher per CSS gestaltbar als eine pure Defintionsliste (siehe auch Malcolms Einwand) und produziert auch weniger Markup.

    Haken: wenn der Abschnitt eines Jahres mehrere Absätze hat, versagt die Lösung - dann ist wieder eine Liste als Kind von Vorteil.

    Rein Semantisch gesehen ist eine pure Definitionsliste wie sie Gunnar vorschlägt aber die bessere Wahl - und schwierig zu formatieren ist sie (mit gezieltem Einsatz von float: left; und float: right;) eigentlich auch nicht.