kerki: Vertikale Linie über ganze Tabellenzelle [Wiedergutmachung]

Beitrag lesen

Hallo Bernhard !

Als kleine Wiedergutmachung für letzte Nacht, hier die Lösung deines Problems:

Dein Code:
---------------------------------------------------------
<TD width=550><!-- DATEN -->
<TABLE border=0 cellPadding=5 cellSpacing=0 width=550>
  <TBODY>
   <TR>
    <TD align=middle rowSpan=3 vAlign=top width=100>
     <TABLE border=0 cellPadding=0 cellSpacing=0 height="100%">
      <TBODY>
        <TR vAlign=bottom>
         <TD bgColor=red height="100%" width=2><IMG height=1
           src="gifs/pixel.gif" width=1></TD></TR>
           </TBODY></TABLE></TD>
         <TD align=left height=60 vAlign=center><IMG border=0
          height=40 src="gifs/wel_head.gif"></TD></TR>
---------------------------------------------------------

Dadurch dass du die vertikale Linie in eine eigene Tabelle packst, hast du das Problem diese auf die gesamte Höhe strecken zu müssen mit height="100%", was ohnehin nicht W3-konform ist.

Nimm stattdessen 2 zusätzliche Tabellenspalten:
---------------------------------------------------------
<TD width=550><!-- DATEN -->
<TABLE border=0 cellPadding=0 cellSpacing=5 width=550>
  <TBODY>
   <TR>
    <TD rowSpan=3 width=39> </TD>
    <TD rowspan=3 bgColor=red width=2><IMG height=1
     src="gifs/pixel.gif" width=1></TD>
    <TD rowSpan=3 width=39> </TD>
    <TD align=left height=60 vAlign=middle width=450><IMG
     border=0 height=40 src="gifs/wel_head.gif"></TD></TR>
----------------------------------------------------------

Durch rowspan=3 erstrecken sich diese über die gesamte Höhe.
Die 1. und 3. Spalte dienen nur als Abstandhalter, die 2. hat eine rote Hintergrundfarbe, was dann wie eine rote Linie aussieht.

Wichtig: Damit diese Linie auch wirklich nur die gewünschten 2px breit ist, musst du bei der Tabellendefinition von cellpadding=5 auf cellspacing=5 umstellen. Dann ist der Rand aussen, was bei einer blinden Tabelle keinen sichtbaren Unterschied ergibt. Ohne diese Umstellung wäre die Linie 12px breit.

Am Ende der Tabelle musst du dann nur noch
------------------------------------------
<TD align=middle><IMG border=0 height=39
  src="Post2-Dateien/logo1.gif" width=50></TD>
------------------------------------------
durch
------------------------------------------
<TD colspan=3 align=center><IMG border=0 height=39
  src="Postgraduate-Dateien/logo1.gif" width=50></TD>
------------------------------------------
ersetzen, damit die Spaltenzahl auch hier stimmt.

Das sollte es eigentlich gewesen sein. Wenn nicht, habe ich eine Kleinigkeit vergessen. Zur Not kann ich dir die fertige HTML-Datei, die ich mit IE, NS und Opera getestest habe, per Mail zukommen lassen.

Gruß,
kerki