Tilo Baumann: Frage zum Wiki (Tabelle)

problematische Seite

Ich habe Probleme mit Tabellen: <tab>, <tr>, <td> und den <td>-Attributen valign="top" und align="left". Andere Elemente kenne ich dazu nicht.

Mir gelingt es nicht (zuverlässig), die Datumsangabe darin wie

2011-2017

bei in einer Zeile darzustellen. Stattdessen erhalte ich eine zweizeilige Angabe wie

2011− 2017

Das hat nach meiner Meinung damit zu tun, daß der html-Interpreter nicht weiß, wie lang das Feld sein soll. Bei Feldern wie 2011+2017 geht es.

Ich benutze nur eine ältere Version von Chrome, nämlich Version 48.0.2564.116 . Das Ganze läuft unter einem Linux, dessen Upgrade ich bisher hinausschiebe.

Beim Iceweasel alias FireFox habe ich keine Schwierigkeiten.

Antworten bitte (auch) an meine eMail-Adresse, da ich in diesem Forum nicht zuhause bin.

  1. problematische Seite

    Moin,

    CSS white-space: nowrap; würde den Umbruch verhindern.

    Gruß Bobby

    --
    -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
    1. problematische Seite

      CSS white-space: nowrap; würde den Umbruch verhindern.

      Das erbringt bei mir keine Änderung. Ich verstehe auch nicht, von welchem Blank du redest:

      Wenn ich kodiere 2016+2017, wird 2016+2017 geschrieben. Wenn ich aber 2016-2017 kodiere, bricht der Interpreter nach dem — oder − um und schreibt die 2017 in die nächste Zeile.

      -> Für jedes Problem gibt es eine Lösung,

      Die suche ich.

      1. problematische Seite

        Moin,

        <td style="white-space: nowrap">2016-2017 </td>
        

        Damit wird der Umbruch verhindert und in einer Zeile dargestellt. Hab es über das Dev-Tool diverser Browser direkt bei deiner Webseite getestet.

        Gruß Bobby

        --
        -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
        1. problematische Seite

          Besser wäre es natürlich, diese Dinge im Style Sheet zu notieren.

          <table class="jahresuebersicht">
            <tr>
              <td>2019-2023</td>
              <td>Die Revolution der (insert your group name here)</td>
            </tr>
          </table>
          
          .jahresuebersicht{
             border-collapse: separate;
             border-spacing: 1px;
          }
          .jahresuebersicht td {
             padding: 8px;
             text-align:left;
             vertical-align: top;
          }
          .jahresuebersicht td:nth-of-type(1) {
             white-space:nowrap
          }
          

          Auf diese Weise wird auch die links- und top-bündige Ausrichtung ins Stylesheet verlegt, sowie das cellspacing und cellpadding Attribut der table. Im HTML steht dann nichts mehr, was die Formatierung festlegt, nur noch die Struktur.

          Man könnte auch statt einer Table eine Definitionsliste verwenden, das wäre semantisch möglicherweise sinnvoller.

          By the way, bist Du sicher, dass deine Frame-Struktur so sinnvoll ist? Du musst alles doppelt notieren; einmal im Frame und einmal im Frameset. Ein Menü neben den Inhalt zu platzieren geht auch anders - ein Tipp dazu wäre das Flexbox-Modell.

          Rolf

        2. problematische Seite

          Hallo, bobby,

          <td style="white-space: nowrap">2016-2017 </td> Damit wird der Umbruch verhindert und in einer Zeile dargestellt. Hab es über das Dev-Tool > > diverser Browser direkt bei deiner Webseite getestet.

          diese Antwort liegt meinem Kenntnisstand am nächsten und scheint das Problem zu lösen! Deine frühere Antwort

          CSS white-space: nowrap; würde den Umbruch verhindern.

          war auch richtig und meine Reaktion 'Das erbringt bei mir keine Änderung' falsch:

          Und ob der Hinweis etwas änderte! Ich merkte es erst später: Alle (betroffenen) Webseiten hatten plötzlich 'unendliche' Zeilenlänge, so daß ich zum Lesen dauernd waagerecht scrollen mußte. Aus Unverständinis hatte ich nämlich deinen Hinweis in meiner css-Datei GLOBAL gesetzt.

          Du hast daher jetzt denselben Hinweis zur Verdeutlichung explizit lokal gesetzt und meinem Verständnis damit einen Schub gegeben. Vielen Dank!

          Auch den anderen Helfern (Rolf und Gunnar) danke ich. Den lokal gesetzten Stil in die css-Datei aufzunehmen, ist sicherlich sinnvoll, ebenso der Vorschlag, vom System der Frames abzugehen. Das wird allerdings lange dauern, denn der Content frißt mich auf.

          Tilo

  2. problematische Seite

    @@Tilo Baumann

    2011-2017

    Da steht ein falsches Zeichen zwischen den Jahren. Der Bis-Strich ist ein '–' U+2013 Halbgeviertstrich (bei Jahresangaben ohne Leerzeichen davor und danach).

    In HTML kannst dafür auch &ndash; verwenden: 2011&ndash;2017

    Stattdessen erhalte ich eine zweizeilige Angabe […] Bei Feldern wie 2011+2017 geht es.

    Browserabhängig: Firefox umbricht weder bei '–' noch bei '-' noch bei '+'; Safari und Chrome machen bei '–' und '-' einen Umbruch, bei '+' nicht.

    Antworten bitte (auch) an meine eMail-Adresse, da ich in diesem Forum nicht zuhause bin.

    Nein. Fragen werden grundsätzlich hier im Forum beantwortet. Von den Antworten sollen alle etwas haben.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. problematische Seite

      Hallo,

      bei Jahresangaben ohne Leerzeichen davor und danach

      Das ist mir neu. Seit wann und warum ist das so?

      Gruß
      Kalk

      1. problematische Seite

        @@Tabellenkalk

        bei Jahresangaben ohne Leerzeichen davor und danach

        Das ist mir neu. Seit wann und warum ist das so?

        Ah ja, da scheiden sich die Geister. Duden sagt so, DIN sagt so.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. problematische Seite

          Hallo,

          Ah ja, da scheiden sich die Geister. Duden sagt so, DIN sagt so.

          Soso!

          Gruß
          Kalk

    2. problematische Seite

      Da steht ein falsches Zeichen zwischen den Jahren. Der Bis-Strich ist ein '–' U+2013 Halbgeviertstrich > (bei Jahresangaben ohne Leerzeichen davor und danach). In HTML kannst dafür auch &ndash; verwenden: 2011&ndash;2017

      Auch bei 2011&ndash;2017 erhalte ich einen unerwünschten Zeilenumbruch.

      Browserabhängig: Firefox umbricht weder bei '–' noch bei '-' noch bei '+'; Safari und Chrome machen bei > '–' und '-' einen Umbruch, bei '+' nicht.

      Das ist auch meine Erfahrung bei Chrome und Firefox.

      2016-2017 kann ich, semantisch verständlich, durch 2016+2017 kodieren. Aber was sollte ich tun bei 2012-2017 tun?

      1. problematische Seite

        Hello,

        Das ist auch meine Erfahrung bei Chrome und Firefox.

        2016-2017 kann ich, semantisch verständlich, durch 2016+2017 kodieren. Aber was sollte ich tun bei 2012-2017 tun?

        Ich habe da bisher immer dieses Beispiel benutzt:
        <time id="period1" datetime="2011-04-02/2011-04-04">2nd&ndash;4th April 2011</time>
        und für #period1 dann white-space: nowrap; gesetzt.

        Liebe Grüße
        Tom S.

        --
        Es gibt nichts Gutes, außer man tut es
        Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
        1. problematische Seite

          @@TS

          Ich habe da bisher immer dieses Beispiel benutzt:
          <time id="period1" datetime="2011-04-02/2011-04-04">2nd&ndash;4th April 2011</time>

          Das solltest du zukünftig nicht mehr tun; das sieht nicht nach einer gültigen Zeitangabe aus.

          Das berichtigte Markup:

          <span id="period1">
            <time class="startDate" datetime="2011-04-02">2nd</time>&ndash;<time class="endDate" datetime="2011-04-04">24th April 2011</time>
          </span>
          

          Statt class auch gerne property, wenn du RDFa verwendest. Bzw. itemprop, wenn es denn Microdata sein soll.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. problematische Seite

            Hello,

            mmmh, danke.

            Der Nutztextanteil von HTML geht wohl allmählich gegen Null :-O

            Liebe Grüße
            Tom S.

            --
            Es gibt nichts Gutes, außer man tut es
            Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
            1. problematische Seite

              Moin,

              Nein. Es wird nur endlich relativ strikt zwischen Struktur und Aussehen getrennt. HTML beschreibt lediglich eine Struktur.

              Gruß Bobby

              --
              -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
              1. problematische Seite

                Hello,

                Nein. Es wird nur endlich relativ strikt zwischen Struktur und Aussehen getrennt. HTML beschreibt lediglich eine Struktur.

                Und was hat das damit zu tun, dass die Strukturangaben gegenüber dem damit strukturierten Content immet mehr werden?

                Liebe Grüße
                Tom S.

                --
                Es gibt nichts Gutes, außer man tut es
                Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                1. problematische Seite

                  Moin,

                  Diese werden nicht unbedingt mehr, sondern semantischer!

                  Gruß Bobby

                  --
                  -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                  1. problematische Seite

                    @@bobby

                    Diese werden nicht unbedingt mehr, sondern semantischer!

                    Bei semantischer Auszeichnung kann aber schon mehr Markup dazukommen:

                    <cite property="citation" typeof="MusicComposition"><span property="name"><a property="url" href="http://www.youtube.com/watch?v=oGZ9tVu4Ahs">Like a Rounded Corner</a></span>”
                    	lyrics by
                    	<span property="lyricist" typeof="Person">
                    		<span property="name">Bruce Lawson</span>
                    	</span>
                    	to the tune of
                    	<cite property="citation" typeof="MusicComposition"><span property="name">Rhinestone Cowboy</span>”
                    		by
                    		<span property="lyricist composer" typeof="Person">
                    			<span property="name">Larry Weiss</span>
                    		</span>
                    	</cite>
                    </cite>
                    

                    (Quelle)

                    Wobei ich gerade sehe, dass sich ein span wohl sparen lässt:

                    <cite property="citation" typeof="MusicComposition"><a property="name url" href="http://www.youtube.com/watch?v=oGZ9tVu4Ahs">Like a Rounded Corner</a>

                    LLAP 🖖

                    --
                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                    1. problematische Seite

                      Hello,

                      unter welchen Suchbegriffen finde ich wo etwas über diese Art der Auszeichnung?
                      Ist das nun für die maschinelle Auswertung gedacht, odet wozu taugt die feiner granulare Auszeichnung noch?

                      Liebe Grüße
                      Tom S.

                      --
                      Es gibt nichts Gutes, außer man tut es
                      Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                      1. problematische Seite

                        @@TS

                        unter welchen Suchbegriffen finde ich wo etwas über diese Art der Auszeichnung?

                        Unter nuqjatlh. ;-) Ansonsten: RDFa, schema.org.

                        Ist das nun für die maschinelle Auswertung gedacht, odet wozu taugt die feiner granulare Auszeichnung noch?

                        Ja. Suchmaschinen, aber auch andere Dienste. Bspw. wie ab 27:37 gezeigt (Folien 124—127). Oder Abfragen mit SPARQL.

                        LLAP 🖖

                        --
                        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                        1. problematische Seite

                          @@Gunnar Bittersmann

                          Ja. Suchmaschinen

                          Wobei Google AFAIK nur Microdata und JSON-LD liest, nicht aber RDFa. WTF???

                          LLAP 🖖

                          --
                          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                          1. problematische Seite

                            Hallo Gunnar,

                            Ja. Suchmaschinen

                            Wobei Google AFAIK nur Microdata und JSON-LD liest, nicht aber RDFa. WTF???

                            Nö.

                            LG,
                            CK

                            1. problematische Seite

                              @@Christian Kruse

                              Wobei Google AFAIK nur Microdata und JSON-LD liest, nicht aber RDFa. WTF???

                              Nö.

                              Oh, da haben sie die RDFa-Unterstützung wohl kürzlich endlich hinzugefügt.

                              LLAP 🖖

                              --
                              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          2. problematische Seite

            @@Gunnar Bittersmann

            Das berichtigte Markup:

            <span id="period1">
              <time class="startDate" datetime="2011-04-02">2nd</time>&ndash;<time class="endDate" datetime="2011-04-04">24th April 2011</time>
            </span>
            

            Statt class auch gerne property, wenn du RDFa verwendest. Bzw. itemprop, wenn es denn Microdata sein soll.

            Bzw. class="dt-start" / "dt-end" in Microformats2. ("dtstart" / "dtend" im alten Format.)

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory