Frank lappel: Verschobene Tabelle

problematische Seite

Hallo zusammen,

ich habe vor Urzeiten ein mal HTML programmieren gelernt, damals war DHTML noch angesagt.

Nun engagiere ich mich in einem gemeinnützigen Verein und kümmere mich um die Homepage. Ich habe eine Tabelle eingefügt die zur linken vier Bilder anzeigt und rechts davon, ebenfalls noch in der Tabelle ein iframe. In Chrome und Opera wird alles korrekt angezeigt, in Safari ist es nicht zentriert (halb so wild) aber in Firefox ist der linke Teil der Tabelle unterhalb des rechten.

<style>

    div.table {
      display: table;
      border-collapse:collapse;
    }
    div.tr {
      display:table-row;
    }
    div.td {
      display:table-cell;
      padding:5px;
    }
    section {
      display: flex;
    }
    .mittig {
  justify-content: center;
}
  </style>
<section class="mittig">
  <div class="table">
    <div class="tr">
      <div class="td"><img src=images/imago/bild1.jpg with="200px" height="100px" align="top"><br><br><br><br><img src=images/imago/bild2.jpg with="200px" height="100px" align="top"></div>
      <div class="td"><img src=images/imago/bild3.jpg with="200px" height="140px" align="top"><br><br><img src=images/imago/bild4.jpg with="200px" height="140px" align="top"></div>
      <div class="td"><iframe width="560" height="315" src="https://www.youtube.com/embed/qmN8sSC-yX8" frameborder="0" allowfullscreen></iframe></div>
    </div>
  </div>
</section>

Ich bin vollkommen ratlos wie ich dieses Problem beheben soll und würde mich sehr über Hilfe freuen.

Beste Grüße

P.S.: Warum schreibt man die breaks mittlerweile <br />

  1. Hallo Frank,

    P.S.: Warum schreibt man die breaks mittlerweile <br />

    Nur in XHTML (HTML XML-konform formuliert) ist das so, wenn du HTML schreibst, bleibt es bei <br>; siehe Wiki: Unterschiede XHTML-HTML

    Gruß
    Julius

  2. problematische Seite

    Hi Frank,

    Nun engagiere ich mich in einem gemeinnützigen Verein und kümmere mich um die Homepage.

    Finde ich gut!

    <style>
        div.td {
          display:table-cell;
          padding:5px;
        }
      </style>
    

    Da fehlt die vertikale ausrichtung nach top. vertical-align

    Bis bald

    --
    Hosen sind Blau
    1. problematische Seite

      @@Malcolm Beck`s

      <style>
          div.td {
            display:table-cell;
            padding:5px;
          }
        </style>
      

      Da fehlt die vertikale ausrichtung nach top. vertical-align

      Nein. Durch den Ausgangswert baseline für vertical-align sind die div oben bündig.

      Die Defaultdarstellung von td mit vertikal mittig zentrierter Ausrichtung kommt nicht von display: table-cell, sondern von einer Regel td { vertical-align: middle } im Browserstylesheet.

      Siehe http://codepen.io/gunnarbittersmann/pen/vGLqrR

      LLAP 🖖

      --
      „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
      „Hat auf dem Forum herumgelungert …“
      (Wachen in Asterix 36: Der Papyrus des Cäsar)
      1. problematische Seite

        Hi Gunnar,

        Die Defaultdarstellung von td mit vertikal mittig zentrierter Ausrichtung kommt nicht von display: table-cell, sondern von einer Regel td { vertical-align: middle } im Browserstylesheet.

        Ich sehe keine td, nur .td.

        Bis bald

        --
        Hosen sind Blau
        1. problematische Seite

          @@Malcolm Beck`s

          Die Defaultdarstellung von td mit vertikal mittig zentrierter Ausrichtung kommt nicht von display: table-cell, sondern von einer Regel td { vertical-align: middle } im Browserstylesheet.

          Ich sehe keine td, nur .td.

          Ich sprach von den td auf beliebigen Seiten, die per Browserstylesheet ihren Inhalt vertikal zentrieren.

          Du warst dem Irrtum unterlegen, die Zentrierung würde auch auf div.td zutreffen, wenn sie auf display: table-cell gesetzt werden. Dem ist aber nicht so, siehe mein Beispiel.

          LLAP 🖖

          --
          „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
          „Hat auf dem Forum herumgelungert …“
          (Wachen in Asterix 36: Der Papyrus des Cäsar)
          1. problematische Seite

            Hi Gunnar,

            Ich sprach von den td auf beliebigen Seiten, die per Browserstylesheet ihren Inhalt vertikal zentrieren.

            Meinst du mit td das Tabellenelement td, oder gibt es da noch was anderes? Wie kann ein Browserstylesheet auf Elemente wirken, die nicht im HTML sind?

            Du warst dem Irrtum unterlegen, die Zentrierung würde auch auf div.td zutreffen, wenn sie auf display: table-cell gesetzt werden. Dem ist aber nicht so, siehe mein Beispiel.

            Nö, ich hatte es auf der betroffenen Seite mit vertical-align ausprobiert ;)

            Ich brauche komischerweise immer ein vertical-align:top, wenn ich mit table-cell arbeite. Aber das liegt wohl eher daran, das ich irgendwas falsch mache.

            Bis bald

            --
            Hosen sind Blau
            1. problematische Seite

              Hallo,

              Ich sprach von den td auf beliebigen Seiten, die per Browserstylesheet ihren Inhalt vertikal zentrieren.

              Meinst du mit td das Tabellenelement td

              ja, genau das.

              Wie kann ein Browserstylesheet auf Elemente wirken, die nicht im HTML sind?

              Gar nicht. Deswegen wirkt es ja im vorliegenden Fall nicht.

              Allerdings frage ich mich, warum Frank hier mit viel Inbrunst eine Tabelle mit CSS nachbaut, anstatt so ehrlich zu sein und eine echte Tabelle zu nehmen. Nicht dass das hier der empfohlene Weg wäre - aber ich finde, eine Tabelle aus div-Containern und mit table-*-Eigenschaften nachzubauen, ist noch schlechterer Stil.

              So long,
               Martin

              1. problematische Seite

                Hi Der,

                Wie kann ein Browserstylesheet auf Elemente wirken, die nicht im HTML sind?

                Gar nicht. Deswegen wirkt es ja im vorliegenden Fall nicht.

                Ich hatte OP falsch verstanden. Ich dachte, er will die Linken Elemente mit dem rechten auf gleicher Höhe. Aber zentrieren funktioniert auch, vertical-align:middle.

                Allerdings frage ich mich, warum Frank hier mit viel Inbrunst eine Tabelle mit CSS nachbaut, anstatt so ehrlich zu sein und eine echte Tabelle zu nehmen.

                Die Wege eines Webmasters sind unergründlich :)

                Bis bald

                --
                Hosen sind Blau
              2. problematische Seite

                @@Der Martin

                Allerdings frage ich mich, warum Frank hier mit viel Inbrunst eine Tabelle mit CSS nachbaut, anstatt so ehrlich zu sein und eine echte Tabelle zu nehmen.

                Nö. Anstatt Flexbox zu nehmen.

                Nicht dass das hier der empfohlene Weg wäre - aber ich finde, eine Tabelle aus div-Containern und mit table-*-Eigenschaften nachzubauen, ist noch schlechterer Stil.

                Nö. Solange CSS-Grid nicht implementiert ist, ist table-* ein Workaround.

                Hab ich auch schon gemacht: Adressbuch. Tabellenmarkup geht hier nicht, da es kein td gruppierendes Element unterhalb von tr gibt.

                LLAP 🖖

                --
                „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                „Hat auf dem Forum herumgelungert …“
                (Wachen in Asterix 36: Der Papyrus des Cäsar)
                1. problematische Seite

                  @@Gunnar Bittersmann

                  anstatt so ehrlich zu sein und eine echte Tabelle zu nehmen.

                  Das mache ich gerade (aber wenn schon, denn richtig). Hat aber nichts mit Ehrlichkeit zu tun, sondern mit Blödheit (in dem Fall nicht meiner).

                  LLAP 🖖

                  --
                  „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                  „Hat auf dem Forum herumgelungert …“
                  (Wachen in Asterix 36: Der Papyrus des Cäsar)
              3. problematische Seite

                Hallo,

                Ich sprach von den td auf beliebigen Seiten, die per Browserstylesheet ihren Inhalt vertikal zentrieren.

                Meinst du mit td das Tabellenelement td

                ja, genau das.

                Wie kann ein Browserstylesheet auf Elemente wirken, die nicht im HTML sind?

                Gar nicht. Deswegen wirkt es ja im vorliegenden Fall nicht.

                Allerdings frage ich mich, warum Frank hier mit viel Inbrunst eine Tabelle mit CSS nachbaut, anstatt so ehrlich zu sein und eine echte Tabelle zu nehmen. Nicht dass das hier der empfohlene Weg wäre - aber ich finde, eine Tabelle aus div-Containern und mit table-*-Eigenschaften nachzubauen, ist noch schlechterer Stil.

                So long,
                 Martin

                Weil Frank gelesen hat das Tabellen zum Gruppieren von Elementen schlechter Stil wäre. Außerdem dachte ich das es ein guter Einstieg in CSS wäre.

                Vielen Dank für alle eure Hilfe!

                1. problematische Seite

                  Hallo noch mal,

                  dieser Code ist es jetzt letztendlich geworden :

                  section {
                        display: flex;
                      }
                      .mittig {
                    justify-content: center;
                    }
                  
                  <section class="mittig">
                    <div>
                      <table>
                        <colgroup>
                          <col width="200px">
                          <col width="200px">
                        </colgroup>
                        <tr>
                          <td>
                            <img src=images/imago/bild1.jpg with="200px" height="100px" align="top"><br><br><br><br><img src=images/imago/bild2.jpg with="200px" height="100px" align="top">
                          </td>
                          <td>
                            <img src=images/imago/bild3.jpg with="200px" height="140px" align="top"><br><br><img src=images/imago/bild4.jpg with="200px" height="140px" align="top">
                          </td>
                          <td>
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/qmN8sSC-yX8" frameborder="0" allowfullscreen></iframe>
                          </td>
                        </tr>
                      </table>
                      <div>
                    </section>
                  

                  Sollte ich dich die Zentrierung über CSS weg lassen oder kann man das so stehen lassen?

                  1. problematische Seite

                    Hallo Frank,

                    dieser Code ist es jetzt letztendlich geworden :

                    da solltest du nochmal sorgfältig drübergehen. Ich bin jetzt nicht ins Detail gegangen, aber die meisten deiner width- und height-Attribute haben ungültige Werte. Die Einheit 'px', die bei CSS-Längenangaben richtig wäre, hat in HTML-Attributen nichts verloren.

                    Ach ja, und Abstände durch rudelartig auftretende br-Elemente sind auch nicht gerade schön. Dafür gibt's CSS mit margin und/oder padding.

                    Sollte ich dich die Zentrierung über CSS weg lassen

                    Im Gegenteil. Idealerweise solltest du alles, was der Gestaltung dient, in CSS ausdrücken.

                    So long,
                     Martin