Verschobene Tabelle

[Frank lappel]

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 />

[Julius]

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

[Malcolm Beck`s]

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

[Gunnar Bittersmann]

@@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 🖖

[Malcolm Beck`s]

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

[Gunnar Bittersmann]

@@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 🖖

[Malcolm Beck`s]

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

[Der Martin]

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

[Malcolm Beck`s]

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

[Gunnar Bittersmann]

@@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 🖖

[Gunnar Bittersmann]

@@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 🖖

[Frank lappel]

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!

[Frank lappel]

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?

[Der Martin]

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