Bild platziert sich nicht so wie ich will..

[Jana]

Hi, ich habe mit Html eine Tabelle erstellt und in die oberste Zeile kommen verschiedene Schriftbilder....
Nun ist es leider so, dass das Bild nicht am unteren Rand der Zelle beginnt, sondern in der Mitte, denke dass es daran liegt weil die Bilder der einzelnen Zellen unterschiedlich groß sind. wie bekomme ich es hin, dass sie unten (bottom) beginnen? Stell mal meinen Code mit rein, dann könnt ihr mir vielleicht besser helfen:
<table><tr><td align = bottom style=white-space:nowrap><font ><b><img src = "Wort1.png"></b></font></td>
<td align = bottom style=white-space:nowrap><font ><b><img src = "Wort2.png"></b></font></td>
<td align = bottom style=white-space:nowrap><font ><b><img src = "Wort3.png"></b></font></td></tr></table>
Als Ergebnis bekomme ich eine tabelle die als Zeilenüberschriften senkrechte Schriftzüge enthält die entweder in der Mitte der Zelle beginnen(kurzes Wort) oder am Rand der Zelle beginnen(langes Wort) und ich möchte dass alle am Rand der Zelle beginnen aber mit align = bottom haut es nicht hin...

[Susanne07]

Hi, ich habe mit Html eine Tabelle erstellt und in die oberste Zeile kommen verschiedene Schriftbilder....
Nun ist es leider so, dass das Bild nicht am unteren Rand der Zelle beginnt, sondern in der Mitte, denke dass es daran liegt weil die Bilder der einzelnen Zellen unterschiedlich groß sind. wie bekomme ich es hin, dass sie unten (bottom) beginnen? Stell mal meinen Code mit rein, dann könnt ihr mir vielleicht besser helfen:
<table><tr><td align = bottom style=white-space:nowrap><font ><b><img src = "Wort1.png"></b></font></td>
<td align = bottom style=white-space:nowrap><font ><b><img src = "Wort2.png"></b></font></td>
<td align = bottom style=white-space:nowrap><font ><b><img src = "Wort3.png"></b></font></td></tr></table>
Als Ergebnis bekomme ich eine tabelle die als Zeilenüberschriften senkrechte Schriftzüge enthält die entweder in der Mitte der Zelle beginnen(kurzes Wort) oder am Rand der Zelle beginnen(langes Wort) und ich möchte dass alle am Rand der Zelle beginnen aber mit align = bottom haut es nicht hin...

Hallo Jana,

formatiere die überschriftenzeile nicht mit td sondern mit th (th= table-head) und dann mit CSS

th       { height: in px oder % etwas größer als das längste bild; white-space:nowrap; alle anderen notwendigen Angaben }
.unten   { vertical-align:bottom; }

wenn, du noch andere Elemente hast, die am unteren Zelllenrand ausgerichtet sind, wenn es nur in der Überschrift der Fall ist, kannst du vertical-align auch  noch in die Formatierung von th übernehmen.

dein html sieht dann so aus:

<table>

<thead>
<tr>
<th img src="Wort1.png"></th>
<th img src="Wort2.png"></th>
<th img src="Wort3.png"></th>
</tr>
</thead>
<tbody> (hier kommen dann deine Tabelleninhalte hinein)
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Gruß, Susanne

[Jana]

Habe es jetzt so versucht wie du es beschrieben hast:
<table><thead><th height: 30%; style=white-space:nowrap; vertical-align:bottom;><img src = "Wort1.png" align = right></th> usw..
Aber leider hat sich nichts geändert, hab ich irgendwas vergessen oder falsch gemacht?

[planB]

moin moin

<table><thead><th height: 30%; style=white-space:nowrap; vertical-align:bottom;><img src = "Wort1.png" align = right></th> usw..
Aber leider hat sich nichts geändert, hab ich irgendwas vergessen oder falsch gemacht?

vielleicht mal wieder einen Blick in die Grundlagen werfen:
http://de.selfhtml.org/html/allgemein/textauszeichnung.htm#attribute

bevor du nun alle Fehler beseitigst, vielleicht doch noch überdenken, was Susanne07 geschrieben hat.

damits deutlicher wird, hier nochmal. Dein HTML sieht dann so aus:

<style type="text/css">  
[code lang=css]  
th {  
  height:48px;   /* max. Höhe eines Bildes */  
  vertical-align:bottom;  
  text-align:right;  
  }

</style>

...

<table>
<thead>
<tr>
<th><img src="Wort1.png"></th>
<th><img src="Wort2.png"></th>
<th><img src="Wort3.png"></th>
</tr>
...[/code]

Du wirst die max. Höhe der ÜberschriftenBilder kennen, dann würde ich die pixel-Angabe bevorzugen.
Wenn kein Text vorkommt, ist die nowrap-Angabe überflüssig.

Jetzt ist der Code so kurz, da kann man wohl keine Fehler mehr machen ...

Gruß planB

[planB]

...

<th><img src="Wort1.png"></th>
...

>   
> Jetzt ist der Code so kurz, da kann man wohl keine Fehler mehr machen ...  
  
~~~html
...  
<th><img src="Wort1.png" alt="Spalte1"></th>  
<th><img src="Wort2.png" alt=""></th>  
...

... aber das "alt"-Attribut vergessen

Gruß planB

[Susanne07]

Habe es jetzt so versucht wie du es beschrieben hast:
<table><thead><th height: 30%; style=white-space:nowrap; vertical-align:bottom;><img src = "Wort1.png" align = right></th> usw..
Aber leider hat sich nichts geändert, hab ich irgendwas vergessen oder falsch gemacht?

Hallo Jana,

ich habe nochmal geschaut, kann es sein, dass du dein Layout direkt in HTML implementierst, ohne CSS?

In diesem Fall mußt du es so schreiben:  <th align="right" valign="bottom">

ich würde dir aber raten, alle Layoutangaben in einem Stylesheet zusammzufassen. Hoffe, jetzt klappt alles.
Gruß, Susanne