Vertikale Ausrichtung in Tabellenzeilen

[Gerd der HTML-Neuling]

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)?

[beatovich]

hallo

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

[Gerd der HTML-Neuling]

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

[beatovich]

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.

[Rolf B]

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

[Gerd]

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>

[Jonathan Harker]

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

[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.

[Jonathan Harker]

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

[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)

[Gerd]

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

[Jonathan Harker]

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

[Gerd]

Hi, Dank an alle. Jetzt muss ich es erst verdauen (bzw. testen). Aber erst gönne ich Euch und mir ein Pfingstwochenende.

[Gerd]

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.

[Matthias Scharwies]

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:

• CSS/Eigenschaften/grid/Ausrichtung von Grid Items
  • justify-items

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

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

[Jonathan Harker]

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

[Gunnar Bittersmann]

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

[Gunnar Bittersmann]

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

[Gunnar Bittersmann]

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