[CSS] Zellengröße

[kasimir83]

So, gesucht hab ich, da ich aber irgendwie grad nicht weiß wonach ich suchen soll, hab ich natürlich nichts gefunden.

<td width="120" height="20" align="left" valign="top">
      <img src="./images/bar.gif" width="70" height="20">
      <div style="position:relative;left:2px;top:-20px;width:120px;height:20px;">
            text der drüber soll
      </div>
</td>

Diese Zelle wird mir durch das div auf 40px Größe aufgezerrt, die Grafik als Hintergrundbild geht nicht, da sie aus mehreren zusammengesetzt ist, hab das hier nur vereinfacht. Wie umgehe ich, dass die Zelle zu groß wird?

 

[HsF_Hellsing]

hmm.. du könntest doch einfach, die Bilder zusammenschneiden und dann als hintergrundbild setzen..
oder willste das net??

<img src="./images/bar.gif">

kenn mich zwar mit bildern net sogut aus aber für was steht der . vor dem /images?

MfG Hellsing

 

[HsF_Hellsing]

mir fällt gerade noch ein..
du könntest doch das bild einfach in eine unsichtbare Tabelle stellen und da den höhe und breite wert
der tabelle an deine Wünsche anpassen das funzt hab ich auch gemacht..
so wird nur sociel vom Bild angezeigt wie dei "height" und "width" angaben zulassen..

MfG
Hellsing

 

[kasimir83]

Das "Bild" sieht eigentlich so aus:

echo "<td width=\"100\" align=\"left\" valign=\"top\" height=\"16\" class=\"side_text\" style=\"height:16px;overflow:hidden\">\n";
      echo "<table height=\"16\" width=\"$elem[2]\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n";
      echo "<tr>\n";
      echo "<td width=\"2\" height=\"16\" rowspan=\"3\"><img src=\"./images/layout/green_bar_01.gif\" height=\"16\" width=\"2\"></td>\n";
      echo "<td width=\"".($elem[2]-4)."\" height=\"2\"><img src=\"./images/layout/green_bar_02.gif\" height=\"2\" width=\"".($elem[2]-4)."\"></td>\n";
      echo "<td width=\"2\" height=\"16\" rowspan=\"3\"><img src=\"./images/layout/green_bar_03.gif\" height=\"16\" width=\"2\"></td>\n";
      echo "</tr>\n";
      echo "<tr><td width=\"".($elem[2]-4)."\" height=\"12\"><img src=\"./images/layout/green_bar_04.gif\" height=\"12\" width=\"".($elem[2]-4)."\"></td></tr>\n";
      echo "<tr><td width=\"".($elem[2]-4)."\" height=\"2\"><img src=\"./images/layout/green_bar_05.gif\" height=\"2\" width=\"".($elem[2]-4)."\"></td></tr>\n";
      echo "</table>\n";
      echo "<div style=\"position:relative;top:-17px;left:2px;\" class=\"side_text\">$elem[3]</div>\n";
echo "</td>\n";

Deswegen wüsste ich nicht, wie ich das ohne weiteres zum Hintergrundbild machen soll...

 

[HsF_Hellsing]

hmm und wenn du jetzt das "Bild" im php format einfach in eine
Tabellen-Zelle packst ddie height:70px; und width:20px;
hat dann müsste das Bild eigentlich nach 70x20 px abgeschnitten werden oder nicht?

zb so...

<table>
<tr>
       <td style="width:20px; height:70px;">
<? php
echo "<td width=\"100\" align=\"left\" valign=\"top\" height=\"16\" class=\"side_text\" style=\"height:16px;overflow:hidden\">\n";
      echo "<table height=\"16\" width=\"$elem[2]\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n";
      echo "<tr>\n";
      echo "<td width=\"2\" height=\"16\" rowspan=\"3\"><img src=\"./images/layout/green_bar_01.gif\" height=\"16\" width=\"2\"></td>\n";
      echo "<td width=\"".($elem[2]-4)."\" height=\"2\"><img src=\"./images/layout/green_bar_02.gif\" height=\"2\" width=\"".($elem[2]-4)."\"></td>\n";
      echo "<td width=\"2\" height=\"16\" rowspan=\"3\"><img src=\"./images/layout/green_bar_03.gif\" height=\"16\" width=\"2\"></td>\n";
      echo "</tr>\n";
      echo "<tr><td width=\"".($elem[2]-4)."\" height=\"12\"><img src=\"./images/layout/green_bar_04.gif\" height=\"12\" width=\"".($elem[2]-4)."\"></td></tr>\n";
      echo "<tr><td width=\"".($elem[2]-4)."\" height=\"2\"><img src=\"./images/layout/green_bar_05.gif\" height=\"2\" width=\"".($elem[2]-4)."\"></td></tr>\n";
      echo "</table>\n";
      echo "<div style=\"position:relative;top:-17px;left:2px;\" class=\"side_text\">$elem[3]</div>\n";
echo "</td>\n";
?>
</td>
</tr>
</table>

[/edit sry hab die <?php ?> vergessen....

MfG Hellsing

 

[kasimir83]

Was ist da jetzt außer einer falschen Verschachtelung jetzt anders?

 

[kasimir83]

Die Lösung lautet:

<td width="120" height="20" align="left" valign="top">
      <div style="width:100px;height:20px;overflow:hidden">
            <img src="./images/bar.gif" width="70" height="20">
            <div style="position:relative;left:2px;top:-20px;width:120px;height:20px;">
                  text der drüber soll
            </div>
      </div>
</td>