HTML - Tabelle - td - minimale Höhe ?

[Sabine]

Moin moin an alle!

Ich hab ein Problem mit der Positionierung einer Linie in HTML:

Auf verschiedenen Seiten steht Text, der unterschiedlich lang ist. Nach dem Text ist immer eine gewisse Pixel-Anzahl frei, dann kommt eine Linie, die 3px hoch ist, dann kommen 13px frei, dann 10px großer Text und zu guter letzt wieder 13 px frei. Dann kommt noch eine Abschlusslinie, die durch einen Tabellenrahmen dargestellt wird.

Ursprünglich war das ganze durch absolute Positionsangaben gelöst. Nun ist es aber zu umständlich, jedesmal, wenn der Text geändert wird, die Positionsangaben mit zu ändern. Meine Idee zur Lösung war, es einfach über eine Tabelle zu machen. Nun habe ich folgenden Code verwendet:

<tr>
 <td colspan="3" valign="bottom" align="center">
  [Linie ... height="3"]
 </td>
</tr>
<tr>
 <td height="36" colspan="4" valign="middle" align="center">
  [Text]
 </td>
</tr>

Nun hat die Höhe der ersten Zeile (die mit der Linie) aber nicht die Höhe 3 sondern eine Höhe von schätzungsweise 10 (ich denke, dass das eine Art Standardhöhe ist). Hab ich etwas übersehen oder liegt es wirklich an HTML? Wenn ja, wie kann ich es umgehen.

Wäre super, wenn mir jemand helfen kann.

Sabine

[Andy]

Moin zurück!

<tr>
 <td colspan="3" valign="bottom" align="center">

Schreib doch hier gleich height="3" oder style="height:3px"

[Linie ... height="3"]

Gehe sicher, dass zwischen <td> und </td> nur die Linie steht, keine   oder so

</td>
</tr>
<tr>
 <td height="36" colspan="4" valign="middle" align="center">

Warum plötzlich colspan="4"?

[Text]
 </td>
</tr>

Ich hoffe mal, dass das so klappt!

Andy

[Sabine]

Hallo Andi!
Danke für die schnelle Antwort. Mein Fehler: Durch einiges Hin und Her durch Probieren, habe ich beim hier hin geschriebenen Code was vergessen:
Die [height="3"]-Angabe hatte ich im ersten td drin, aber es klappt trotzdem nicht.

Ausser der Linie steht nichts im td - hab es dreimal überprüft. Und das mit dem [colspan="4"] habe ich, weil die Tabelle schon weiter oben anfängt und eben vier Spalten hat - die Linie und der Text sollen sich aber zum Abschluss über die ganze Tabellenbreite hinziehen.

Ich hab nach wie vor k.A. woran es liegen kann. IE müsste es doch eigentlich schaffen, oder?

[Carsten]

Hi Sabine,

am besten bekommt man sowas mit Stylesheets hin...

Das sieht das ungefähr so aus:

<table ...>
<tr>
<td style="font-size: 10px; padding: 0px 0px 13px 0px; border-width: 0px 0px 3px 0px; border-style: solid; border-color: black;">

Hier steht Text, dieser Text hat einen Unteren Rand von 13px und eine schwarze 3px breite Trennlinie unten.

</td>
</tr>
</tr>
<td style="height: 13px">

<!-- 13px hohe Blindzelle -->

</td>
</tr>
<tr>
<td style="font-size: 10px; padding: 0px 0px 13px 0px; border-width: 0px 0px 3px 0px; border-style: solid; border-color: black;">

Und hier steht wieder Text der so aussieht wie oben...

</td>
</tr>
</table>

Deine "colspan" musst du aber selbst eintragen :). Die Stylesheet Definitionen findest du hier bei SelfHTML, reinschauen lohnt sich.

Gruß

Carsten

[Sabine]

Hallo Carsten !!!

Vielen Dank, so klappt es.

LG, Sabine

[Carsten]

Kein Problem ;)...

[membran]

<tr>
 <td colspan="3" valign="bottom" align="center">
  [Linie ... height="3"]
 </td>
</tr>

Nun hat die Höhe der ersten Zeile (die mit der Linie) aber nicht die Höhe 3 sondern eine Höhe von schätzungsweise 10 (ich denke, dass das eine Art Standardhöhe ist). Hab ich etwas übersehen oder liegt es wirklich an HTML? Wenn ja, wie kann ich es umgehen.

Hi,

das td-tag muss noch den Parameter 'height="3"' erhalten und zwischen dem td-tag und dessen Abschluß darf kein Leerzeichen und auch kein Umbruch sein (dasselbe wie ein Leerzeichen).
Mit dem Leerzeichen wird eben die Tabellezelle so hoch, wie die aktuelle Größe des Fonts.

Also, keine Leerzeichen:

<td height="3"><hr size="3" width="100%" color="#000000"></td>

Alternativ kannst du es auch mit Tabelleneinfärbung machen.

Du brauchst dazu ein 1x1 Pixel großes, transparentes gif-bild.
Dieses kannst du dann auf die gewünschte Größe skalieren.
Entweder machst du dir so ein Bild selbst oder du suchst bei Google in der Bildersucher nach "leer.gif".
Der Tabellenzelle gibst du dann die gewünschte Farbe.

Auch ohne Leerzeichen schreiben!

<td height="1" bgcolor="#000000"><img src="leer.gif" width="1" height="1"></td>

cya
membran