Baseline funktioniert nicht

Johann1949 · 26.02.2024

Wertes Forum
ich würde gerne einen zwei- oder dreizeiligen Text neben ein Bild stellen der an der Unterkante des Bildes stehen soll - kann jemand helfen?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>irgendetwas</title>
<meta name="description" content="irgendetwas - baseline.htm">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<meta http-equiv="expires" content="erstellt Mitte Feber 2024 - letzte &Auml;nderung: 25. Feber 2024">
<style type="text/css">
a:link { text-decoration:none; color:#0000ff; }
a:visited { color:#0000ff; }
a:hover { text-decoration:none; color:#ff0000; }
a:active { text-decoration:none; color:#00ff00; }
body { background-color:#eeeeee; }
.box { background-color:#ffffcc;
  border-color:#800000;
  border-width:1px;
  border-style:solid; }
.text1 {
  border-width:1px;
  border-style:solid;
  border-color:#800000;
  text-align:justify;
  background-color:#ccffcc;
  font-familiy:Times;
  font-size:14pt;
  font-color:#800000;
  font-weight:normal;
  padding-top:6pt;
  padding-left:6pt;
  padding-right:6pt;
  padding-bottomt:6pt;}
</style>
</head>
<body text="#800000" bgcolor="#eeeeee" link="#ff0000" alink="#0000ff" vlink="#ff0000">

<table style="width:100%; float:left" class="box">
<tr>
<td class="text1">
<img src="bild.png" alt="" style="float:left; width:150px; height:200px; border:0px">
<span style="float:right; font-size:12pt; text-valign:baseline">Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll. Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll. Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll.</span>
</td>
</tr>
</table>
<span style="font-size:6pt">&nbsp;</span><br>
<table style="width:100%; float:left" class="box">
<tr>
<td class="text1">
<img src="bild.png" width="150" height="200" style="text-align:justify" alt="">
<span style="vertical-align:text-bottom; font-size:12pt">Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll. Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll. Ein Text der über mehrere Zeilen geht und an der Grundlinie des Bildes stehen soll.</span>
</td>
</tr>
</table>

</body>
</html>

Für eure Hilfe sage ich besten Dank im Voraus

Sempervivum · 05.03.2024

Hallo und willkommen im Forum!
Man muss leider sagen, dass dein HTML und CSS sehr stark veraltet ist weil Du Float und Tabellen beim Layout verwendest. Stelle das Ganze auf Flexlayout um, dann kannst Du mit align-items: end; problemlos erreichen, dass der Text unten bündig mit der Unterkante des Bildes liegt. Siehe z. B. hier:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Johann1949 · 05.03.2024

vielen Dank für deinen guten Rat ich habe mir im Laufe der Jahre alles selbst aus dem Netz zusammengesucht und zudem kann ich leider kein englisch, für meine paar Spielereien reicht mir das Ergebnis allemal und mit 75 stellt man sich eben nicht mehr so leicht um - trotzdem VIELEN DANK

Sempervivum · 05.03.2024

ich habe mir im Laufe der Jahre alles selbst aus dem Netz zusammengesucht

Hier offenbart sich mal wieder, dass das Netz ein schlechter Ratgeber ist, wenn es um Layout mit HTML und CSS geht.
Hier ist eine gute deutsche Anleitung:
https://kulturbanause.de/blog/einfuhrung-in-das-flexbox-modell-von-css/

mit 75 stellt man sich eben nicht mehr so leicht um

Sei unbesorgt, ich habe ebenfalls die 70 überschritten. Kein Hinderungsgrund, offen für Neues zu sein. In dem Zusammenhang gebe ich manchmal gern diese Episode zum besten:
Ein Lagerarbeiter schleppt keuchend einen schweren Sack auf den Schultern durch das Lager. Sein Kollege empfiehlt: "Nimm doch lieber eine Sackkarre." Antwort: "Bist Du verrückt, ich soll mir zu dem schweren Sack auch noch eine Sackkarre auf die Schultern packen?!"-

scatello · 05.03.2024

Johann1949 schrieb:
zudem kann ich leider kein englisch

Tipp: https://www.deepl.com/translator
Ist zwar mühseelig, wenn man jeden Text übersetzen muss, aber vielleicht hilft es hier und da.
Es gibt für den Firefox auch einige Addons, mit denen man automatisch übersetzen kann, habe allerdings bisher keinen getestet.