MichaelS: Warum funktioniert es in einer Seite- und in einer anderen nicht?

Hallo, ich bin am Basteln und wollte folgenden Abschnitt bearbeiten:

<div id="spruch">
  <h3>jetzt kommt ein einzeiliger Spruch,
    <h6>bibelstelle</h6>
  </h3>
</div>

Ok, ich weiß das dies normalerweise viel sinnvoller mit "span" gemacht wird, aber warum sind die Ergebnisse so unterschiedlich?


#spruch h3 { color:maroon; font-size: 1.6em; text-align: center;}

#spruch h6 { color: black;  font-size: 1em; text-align: center;}  

Auf der einen Webseite ist zwischen beiden Texten kein vertikaler Abstand, dieser kann aber formatiert werden.

Auf der Anderen Seite ist ein gut 4em breiter vertikaler Abstand, der padding und margin nicht anspricht.

Weiß jemand, warum?

Die Umgebung ist vergleichbar.

Beides mit Firefox Vers. 97.01. getestet. In codepen bekomme ich beide Texte auch nicht direkt untereinander, aber zumindest mit wesentlich geringerem (ca. 1em) Abstand.

Für Aufklärung dankt Michael

  1. Hallo, auf Codepen funktionierte es jetzt plötzlich !

    .spruch
    {
        margin: 1em 2em 1em 2em;
        padding: 1em;
       border: 2px solid red;
      flex-basis: 70em;
    }
    .spruch h3 
    {
      color: red;
      font-size: 1.6em;
      text-align: center;
      margin-bottom: 0;
    }
    .spruch h6
    {
      color: green;
      font-size: 1em;
      text-align: center;
      margin-top: 0;
     }
    

    Aber- warum?

    Gruss Michael

    1. Hallo MichaelS,

      das spricht dafür, dass da noch weitere CSS Regeln hereinspielen. Das musst Du mit dem Inspektor der Entwicklerwerkzeuge analyisieren.

      Wenn Du Inspektionshilfe haben möchtest wäre eine URL hilfreich.

      Im übrigen: Falsches HTML. Wie Matthias schrieb.

      Rolf

      --
      sumpsi - posui - obstruxi
      1. Hallo,

        Im übrigen: Falsches HTML. Wie Matthias schrieb.

        und nicht nur technisch-syntaktisch, sondern auch semantisch falsch.

        Überschriften für etwas anderes als Überschriften missbrauchen, nur weil die Default-Formatierung des einen oder anderen Browsers zufällig so aussieht wie gewünscht? Bäh!

        Eine Überschrift 6. Ordnung, obwohl es nirgends eine Überschrift 5. und 4. Ordnung gibt? Bah!

        Möge die Übung gelingen
         Martin

        --
        Darmstadt? Ist das nicht da, wo immer der Urologen-Kongress tagt?
  2. Ich kann natürlich nicht wissen, warum dieses fehlerhafte HTML auf verschiedenen Seiten unterschiedlich dargestellt wird. Ich kenne die Seiten ja nicht.

    Ok, ich weiß das dies normalerweise viel sinnvoller mit "span" gemacht wird, aber warum sind die Ergebnisse so unterschiedlich?

    Was meinst du denn mit „dies“? Mit span kann man keine Überschriften erzeugen. Und Überschriften können keine Kindelemente von Überschriften sein. Wenn du kein valides HTML schreibst, ist es immer Glücksache, was dargestellt wird.

  3. Servus!

    Hallo, ich bin am Basteln und wollte folgenden Abschnitt bearbeiten:

    <div id="spruch">
      <h3>jetzt kommt ein einzeiliger Spruch,
        <h6>bibelstelle</h6>
      </h3>
    </div>
    

    Ich habe es nicht getestet, aber …

    h1, h2,h3, ... h6

    • werden zum Auszeichnen von Überschriften verwendet
    • dürfen nicht verschachtelt werden.

    Ok, ich weiß das dies normalerweise viel sinnvoller mit "span" gemacht wird, aber warum sind die Ergebnisse so unterschiedlich?

    span und div sind inhaltsleer, damit könntest du Text teilen und unterschiedlich formatieren.

    Für mich ist ein Bibelvers ein Zitat mit der Bibelstelle als Quellenangabe. Dafür gibt es das blockquote-Element.

    Im SELF-Wiki gibt es ein Artikel dazu: CSS/Tutorials/Zitate_interessant_gestalten

    Ich würde es ungefähr so machen:

    <blockquote class=Losung">
      <p> ...
      <p class="bibelstelle">...
    </blockquote>
    

    Das CSS würde dann so aussehen und anderswo vorhandene Überschriften nicht beeinflussen:

    .losung { 
      ...
    }
    .losung .bibelstelle {
      text-align: right;
      font-family: cursive;
    }
    .losung p:last-of-type {} /*nicht so gut, da evtl. die Bibelstelle fehlt und dann die letzte **Text**zeile anders formatiert wird. */
    }  
    

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. Moin Matthias,

      Ich habe es nicht getestet, aber …

      h1, h2,h3, ... h6

      • werden zum Auszeichnen von Überschriften verwendet
      • dürfen nicht verschachtelt werden.

      Im Wiki steht es ebenfalls:

      erlaubte Inhalte

      • Text
      • Stil-Elemente

      Ok, ich weiß das dies normalerweise viel sinnvoller mit "span" gemacht wird, aber warum sind die Ergebnisse so unterschiedlich?

      span und div sind inhaltsleer, damit könntest du Text teilen und unterschiedlich formatieren.

      span und div haben normalerweise auch keine Browser-CSS-Regeln für Abstände, Zeilenhöhen, …

      Für mich ist ein Bibelvers ein Zitat mit der Bibelstelle als Quellenangabe. Dafür gibt es das blockquote-Element.

      Im SELF-Wiki gibt es ein Artikel dazu: CSS/Tutorials/Zitate_interessant_gestalten

      Ich würde es ungefähr so machen:

      <blockquote class=Losung">
        <p> ...
        <p class="bibelstelle">...
      </blockquote>
      

      Ist das <p class"bibtelstelle"> nicht eigentlich ein <cite>?

      Viele Grüße
      Robert

      1. Hallo Robert,

        Ist das <p class"bibtelstelle"> nicht eigentlich ein <cite>?

        Doch, ganz bestimmt.

        Aber das cite gehört nicht ins Blockquote, wenn ich die Quellen richtig lese.

        <figure>
           <blockquote>...</blockquote>
           <figcaption><cite>...</cite></figcaption>
        </figure>
        

        Drittes Beispiel in der Spec

        Rolf

        --
        sumpsi - posui - obstruxi
        1. Moin Rolf,

          Ist das <p class"bibtelstelle"> nicht eigentlich ein <cite>?

          Doch, ganz bestimmt.

          Aber das cite gehört nicht ins Blockquote, wenn ich die Quellen richtig lese.

          Stimmt, da heißt es:

          Attribution for the quotation, if any, must be placed outside the blockquote element.

          Ironischerweise ist das dann folgende Codebeispiel ohne cite, sondern einfach ein zufällig (?) hinter dem blockquote notierter Absatz.

          <figure>
             <blockquote>...</blockquote>
             <figcaption><cite>...</cite></figcaption>
          </figure>
          

          Drittes Beispiel in der Spec

          Ist in diesem Fall eigentlich der semantische Bezug zwischen Zitat und Quelle gegeben? Ich nutze für solche Fälle immer zusätzlich das cite-Attribut (den Forenbeitrag, in dem ich das zuerst vorgeschlagen hatte, finde ich auf die Schnelle nicht mehr):

          <blockquote cite="#bibelstelle">
            <p>Du sollst semantisches Markup verwenden.</p>
          </blockquote>
          <p><cite id="bibelstelle">10 Gebote des Apostel Tim</cite></p>
          

          Viele Grüße
          Robert

          1. Hallo Robert,

            WhatWG schreibt in der Spec

            If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g., by server-side scripts collecting statistics about a site's use of quotations), not for readers.

            MDN formuliert es so:

            A URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.

            D.h. du kannst einen Hash-Link auf das cite-Element setzen, du kannst auch die URL der Quelle hinschreiben, aber für semantischen Zusammenhang würde ich eher dies hier empfehlen (siehe auch: CSS-Tricks: Quoting in HTML):

            <figure>
            <blockquote>
            Zur Freiheit hat uns Christus befreit! So steht nun fest und lasst euch 
            nicht wieder das Joch der Knechtschaft auflegen!
            </blockquote>
            <figcaption><cite><a href="https://www.die-bibel.de/bibeln/online-bibeln/lesen/LU17/GAL.5/Galater-5">Gal. 5, 1</a></cite></figcaption>
            </figure>
            

            wobei vermutlich diskutiert werden könnte, ob die exakte Bibelstelle ein korrekter <cite> Inhalt ist. <cite> soll das Werk nennen, aber <cite>Die Bibel</cite> ist ziemlich sinnfrei. Die Angabe "Gal. 5,1" ohne den Kontext "Die Bibel (Übersetzung Luther 2017)" ist eigentlich auch nicht perfekt, aber da das Zitat nicht frei in der Wildnis, sondern auf einer Kirchenseite steht, ist der Kontext automatisch gegeben, in den "Gal. 5,1" einzuordnen ist.

            Das cite-Attribut am blockquote habe ich weggelassen, das ist mit dem Link im cite-Element redundant (und weder Chrome noch Firefox machen einen Link draus). Ob das cite-Attribut von Assistenztechniken genutzt wird - keine Ahnung.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. Hallo,

              (Übersetzung Luther 2017)

              Ich dachte das wär länger her…

              Gruß
              Kalk

              1. Hallo Tabellenkalk,

                erstaunlicherweise gibt's Updates. Zu Luthers Zeiten gab's noch keine historisch-kritische Textanalyse der Bibel, und da kommen immer wieder neue Erkenntnisse zu Tage. Es reicht ja, wenn sich Kommentare ändern.

                Und Luther war auch nicht perfekt, er hat Dinge falsch übersetzt. Wobei richtige oder falsche Übersetzung durchaus subjektiv sein kann. Beispiel Psalm 104,18; Luther meinte dazu 1545 "Die hohen Berge sind der Gemsen zuflucht / Vnd die Steinklufft der Kaninchen.". Bei der Überarbeitung 1912 hatte Duden was zu meckern, und es wurde daraus "Die hohen Berge sind der Gemsen Zuflucht, und die Steinklüfte der Kaninchen." Später fiel auf, dass Gemsen und Karnickel im Gebirge der Levante[1] gar nicht zu finden sind. Text 1964: "Die hohen Berge geben dem Steinbock Zuflucht und die Felsklüfte dem Klippdachs.". Steinbock? Ok, kenn ich. Klippdachs? Hä?

                Aber auch sprachlich kann sich viel unterscheiden. Die Luther-Updates haben den Satz an sich beibehalten, die Einheitsübersetzung dagegen formuliert "Die hohen Berge gehören dem Steinbock, dem Klippdachs bieten die Felsen Zuflucht.", die "Hoffnung für alle" Übersetzung meint dazu "In den hohen Bergen hat der Steinbock sein Revier, und das Murmeltier findet in den Felsen Zuflucht.", und die englische Übersetzung meint "The high mountains are for the wild goats; the rocks are a refuge for the rock badgers." - Wild goat?! Ok, Steinböcke sind eine Ziegenart, aber Steinbock ist capricorn und Gämse ist chamois, Klippdachs ist (rock) hyrax oder dassie, Kaninchen ist rabbit oder coney. Offenbar wird hier die Metapher des Originaltexts an die lokalen Bedingungen angepasst, um dem lokalen Volk verständlicher zu sein. Was auch Luther tat - dem Volk auf's Maul schauen, sagte er. Weswegen er auch die Gämsen und Karnickel an den Start brachte, die man öfter sieht als Steinböcke und Klippdachse (für die die Levante der nördliche Rand des Lebensraums ist).

                Deswegen: wortgetreues Klauben an Bibelübersetzungen ist zumeist sinnlos. Selbst bei "Originalen" kann es sinnlos sein, weil die heutigen Bibeltexte aus Überlieferungen entstanden sind, die zum Teil erst nach längerer mündlicher Weitergabe verschriftlicht wurden. Wer mal "Stille Post" gespielt hat, weiß, was aus dem Wort, das am Anfang war und bei Gott war (Joh 1), nach mündlicher Weitergabe werden kann.

                Rolf

                --
                sumpsi - posui - obstruxi

                1. Levante: im engeren Sinn der Raum östlich des Mittelmeeres. Libanon, Israel, Syrien, Jordanien. ↩︎

                1. Text 1964: "Die hohen Berge geben dem Steinbock Zuflucht und die Felsklüfte dem Klippdachs.". Steinbock? Ok, kenn ich. Klippdachs? Hä?

                  Man muss bei diesen Übersetzung immer auch beachten, wer das wann veröffentlicht hat und wer es wann und wo übersetzt hat. Was da 1964 erschienen ist, stammt mit sehr großer Wahrscheinlichkeit aus einer der vielen Übersetzungen, die die Missionare der Rheinischen Mission Barmen am Anfang des 20 Jahrhunderts im südlichen Afrika gemacht haben. Die Texte wurden später vor der Verwendung meist überarbeitet, aber auch dafür braucht man Fachwissen. In den Texten einiger dieser Missionare ist die Spur deinen Zitates deutlich zu sehen. Um 1908 war da in Namibia bei den Übersetzern nach von Gemsbock und Klippschliefer die Rede. Aus dem Gemsbock wurde dann wohl der Steinbock, weil der Überarbeiter wusste, dass es in der Levante keine Gämsen gibt. Dass ein Gemsbock ein ganz anderes Tier ist (https://de.wikipedia.org/wiki/Spie%C3%9Fbock) hat der Übersetzer sicher gewusst. Der Überarbeiter wohl nicht. Aber den Gemsbock gibt es in der Levante auch nicht.

        2. @@Rolf B

          Aber das cite gehört nicht ins Blockquote, wenn ich die Quellen richtig lese.

          Ja, die WFTWG-Spec sagt sowas. Aber die sind ja auch informationsimprägniert.

          In der W3C-Spec hieß es mal: “Attribution for the quotation, may be be placed inside the blockquote element, but must be within a cite element for in-text attributions or within a footer element.”

          Und so habe ich auch Zitate bislang ausgezeichnet: Beispiel

          🖖 Живи довго і процвітай

          --
          When the power of love overcomes the love of power the world will know peace.
          — Jimi Hendrix