Gerd der HTML-Neuling: Vertikale Ausrichtung in Tabellenzeilen

Hallo, ich habe eine Tabelle definiert mit drei Spalten und x Zeilen. In der linken Spalte soll heweils ein Bild stehen, in der mittleren ein mehhrzeiliger Text und in der rechten Spalte ein Kontaktbutton. Bei mir sind dies nun so aus:

Bild

Bild

   Text
   Text
           Button

Wie erreiche ich, dass die drei Blöcke auf gleicher Höhe stehen (also vertikal zentriert)?

  1. hallo

    Hast du dir in der Browserkonsole das DOM angeschaut? Zentrierte Darstellung ist der Default für Tabellenzellen.

    --
    Neu im Forum! Signaturen kann man ausblenden!
    1. Browserkonsole, Dom? Wenn die Zentrierung Standard ist, warum dann nicht bei mir. Ich habe keinerlei Attribute angegeben.

      1. hallo

        Browserkonsole, Dom? Wenn die Zentrierung Standard ist, warum dann nicht bei mir. Ich habe keinerlei Attribute angegeben.

        Wie rendert der Browser dein HTML? Browser haben dafür Instrumente, die man erforschen kann und soll.

        Ich vermute einfach mal dass dein HTML Code kaputt ist.

        --
        Neu im Forum! Signaturen kann man ausblenden!
      2. Hallo Gerd,

        Computer tun immer das was man ihnen sagt, nicht das, was du von ihnen willst.

        Im DOM Inspektor der Browser Entwicklertools kannst du sehen, wie der Browser dein HTML versteht. Das kann wegen Tippfehlern was anderes sein, als du meinst.

        Wenn das nicht hilft, dann zeig mal, was du deinem Browser gesagt hast.

        Rolf

        --
        sumpsi - posui - clusi
        1. Hallo, ich habe ihm gesagt:

          <table>
            <tr>
            <td>
          	  <img src="/bilder/xxxxx.PNG" alt="Mitglied xxxxx" />
          	</td>
          
            <td>
          	             <strong>xxxxxxxxx</strong><br />
                           Vorstand
          	</td>
          
          	<td>
                           <form action="/phplib/nachricht.php" method="post">
                           .......
                           <button ype="submit">Nachricht senden</button><br />
                           </form>
          	</td>
            </tr>
          
            <tr>
            <td>
              ..... wie oben
          	</td>
            </tr>
          ...…
          </table>
          
          1. Hallo Gerd,

                             <button ype="submit">Nachricht senden</button><br />
            

            Hier fehlt ein t bei type.

            Dein Beispiel ist aber nicht responsiv, d.h auf Handys wird trotzdem alles nebeneinander angezeigt.

            Ich würde dir etwas anderes vorschlagen:

            <figure> 
            	<img src="http://placekitten.com/75/75" alt="Mitglied xxxxx" >
            	<figcaption>
                	<p><strong>xxxxxxxxx</strong><br>
                        Vorstand
            		</p>
            		<form action="/phplib/nachricht.php" method="post">
            			<button type="submit">Nachricht senden</button>
            		</form>
            	</figcaption>
            </figure>  
            

            Das figure-Element ist für Bilder und Bilderklärungen (figcaption) gemacht.

            Normal (Standardeinstellung der Browser) ist die figcaption über oder unterhalb des Bilds - du kannst da aber mit CSS gestalten - z.B. so:

            figure {
            	border: 1px solid blue;
            	display: table;
            }
            
            @media (min-width: 50em) {
            figure > *  {
            	width: 50%;
            	display: table-cell;
            }
            }
            

            Das ist nicht 3 Spalten nebeneinander, aber besseres HTML und responsiv.

            Bis bald!

            Jonathan

            --
            "Es gibt Besserwisser, die niemals begreifen, dass man recht haben kann und trotzdem ein Idiot ist."
            1. hallo

              Das figure-Element ist für Bilder und Bilderklärungen (figcaption) gemacht.

              Hier ist aber das Bild ein Element von etwas anderem, und zudem ein wahrscheinlich verzichtbares.

              --
              Neu im Forum! Signaturen kann man ausblenden!
              1. Hallo beatovich,

                hallo

                Das figure-Element ist für Bilder und Bilderklärungen (figcaption) gemacht.

                Hier ist aber das Bild ein Element von etwas anderem, und zudem ein wahrscheinlich verzichtbares.

                Dann tu den Namen ins figure und das Bild als Erklärung des Namens in die figcaption.

                Wenn ein Bild keine Dekoration ist, ist es doch die Hauptsache und gehört ins Markup - der Name und die Funktion im Vorstand erklärt es dann - oder nicht?

                -- Neu im Forum! Signaturen kann man ausblenden!

                Bis bald!

                Jonathan

                --
                "Es gibt Besserwisser, die niemals begreifen, dass man recht haben kann und trotzdem ein Idiot ist."
                1. Die Idee mit figcaption ist in meinem Falle nicht machbar, da der Text zu dem Bild rechts vom Bild stehen soll (der Text kann auch mehrzeilig sein bis zur Höhe des Bildes oder länger als die Bildhöhe)

            2. Es soll aber auf entsprechend großen Medien 3-spaltig sein (Aufgabenstellung).

              1. Hallo Gerd,

                Die Idee mit figcaption ist in meinem Falle nicht machbar, da der Text zu dem Bild rechts vom Bild stehen soll (der Text kann auch mehrzeilig sein bis zur Höhe des Bildes oder länger als die Bildhöhe)

                Hast Du das ausprobiert? Das Beispiel stellt die beiden Kindelemente mit display:table-cell nebeneinander dar.

                Es soll aber auf entsprechend großen Medien 3-spaltig sein (Aufgabenstellung).

                Dann änder' bei entsprechender Breite den Wert für figure img auf 33% und für figcaption auf 67%.

                Noch einfacher wäre ein div mit 3 Kindelementen img, p und form, die mit nebeneinander positioniert werden.

                div {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                }
                

                Bis bald!

                Jonathan

                --
                "Es gibt Besserwisser, die niemals begreifen, dass man recht haben kann und trotzdem ein Idiot ist."
                1. Hi, Dank an alle. Jetzt muss ich es erst verdauen (bzw. testen). Aber erst gönne ich Euch und mir ein Pfingstwochenende.

                2. Hi,

                  div {
                  display: grid;
                  grid-template-columns: repeat(3, 1fr);
                  }
                  

                  damit gibt es zwar 3 Spalten, aber die Inhalte sind auch nicht auf gleicher Höhe sondern von links nach rechts jeweils weiter unten.

                  1. Servus!

                    Hi,

                    div {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    }
                    

                    damit gibt es zwar 3 Spalten, aber die Inhalte sind auch nicht auf gleicher Höhe sondern von links nach rechts jeweils weiter unten.

                    Im Wiki:

                    Herzliche Grüße

                    Matthias Scharwies

                    --
                    Es gibt viel zu tun: ToDo-Liste
            3. @@Jonathan Harker

              <figure> 
              	<img src="http://placekitten.com/75/75" alt="Mitglied xxxxx" >
              	<figcaption>
                  	<p><strong>xxxxxxxxx</strong><br>
                          Vorstand
              		</p>
              		<form action="/phplib/nachricht.php" method="post">
              			<button type="submit">Nachricht senden</button>
              		</form>
              	</figcaption>
              </figure>  
              

              Das figure-Element ist für Bilder und Bilderklärungen (figcaption) gemacht.

              Nein. Nicht nur für Bilder. Der Inhalt von figure kann alles mögliche sein. [Spec]

              Und „xxxxxxxxx – Vorstand – Nachricht senden“ ist keine Bildunterschrift. Zumindest der button gehört nicht in figcaption.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. Hallo Gunnar,

                Das figure-Element ist für Bilder und Bilderklärungen (figcaption) gemacht.

                Nein. Nicht nur für Bilder. Der Inhalt von figure kann alles mögliche sein. [Spec]

                dann füg mal "und ähnliches wie Statistiken, Tabellen oder sogar Code-Schnipsel" mit ein.

                Und „xxxxxxxxx – Vorstand – Nachricht senden“ ist keine Bildunterschrift. Zumindest der button gehört nicht in figcaption.

                Ok, dann würdest du also auch eine Tabelle nehmen. Was schlägst Du vor?

                Bis bald! Jonathan

                --
                "Es gibt Besserwisser, die niemals begreifen, dass man recht haben kann und trotzdem ein Idiot ist."
                1. @@Jonathan Harker

                  Ok, dann würdest du also auch eine Tabelle nehmen.

                  Oder eine Liste.

                  Was schlägst Du vor?

                  Vielleicht auch gar keine tabellarische Darstellung, sondern als Grid.

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          2. @@Gerd

            ich habe ihm gesagt:

            Und damit sind die Inhalte der Tabellenzellen ohne weiteres Zutun vertikal zentriert. Guckst du.

            Es sei denn, du hast irgendwo im Stylesheet noch was Gegenteiliges zu stehen. Sowas wie td { vertical-align: top }; das müsstest du ggfs. für diese Tabelle wieder überschreiben.

            Ich hab das Markup mal screenreader-freundlicher gemacht:

            • Alternativtext fürs Bild weg (alt="") – Es macht keinen Sinn, wenn „Mona Lisa Mona Lisa Vorstand“ vorgelesen wird

            • den Button mit „Nachricht an Mona Lisa senden“ beschriftet – wenn beim Springen von Button zu Button nur jeweils „Nachricht senden“ angesagt würde, wüsste der Nutzer ja nicht, wem eine Nachricht gesendet werden würde. Visuell wird weiterhin „Nachricht senden“ angezeigt.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      3. @@Gerd der HTML-Neuling

        Browserkonsole, Dom?

        [F12] öffnet das Entwicklungswerkzeug deines Browsers. Damit kannst du untersuchen, welche CSS-Angaben für ein Element gelten u.v.a.m.

        Das DOM ist die Repräsentation einer Webseite im Speicher.

        Wenn die Zentrierung Standard ist, warum dann nicht bei mir. Ich habe keinerlei Attribute angegeben.

        Dann vielleicht jemand anderes. Verwendest du Bootstrap oder noch Schlimmeres?

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann