nicht angemeldet
Vertikale Linie über ganze Tabellenzelle
Hallo!
Ich hätte nicht gedacht, dass mir HTML nochmal solche Kopfzerbrechen bereiten kann ;-) Ich möchte gern eine senkrechte Linie in der Höhe einer Tabellenzelle (=100%) machen, aber es ist wie verhext! Hier mal alle meine bisherigen Versuche, teilweise auch aus dem Archiv:
1.Versuch:
-------------------------------------
<tr>
<td valign="top" rowspan="2" align="center" width="100" background="gifs/vertred.gif">
<br>
</td>
<td align="left" height="60" valign="middle" width="450">
.... Text ....
</td>
</tr>
Ergebnis: Klappt wunderbar, allerdings wird das Hintergrundbild durch das br nach rechts geschoben! Warum????
Mit <hr size="0"> statt <br> ist zwar das Hintergrundbild schön zentriert, allerdings ist die hr ganz und gar nicht "0" :-( Sondern 1px dick! Gibts irgendwas "unsichtbares", das ich in die Zelle schreiben kann, damit das hintergrundbild auch (richtig!!) angezeigt wird?
2.Versuch
-------------------------
<tr>
<td valign="top" rowspan="2" align="center" width="100">
<img src="gifs/vertred.gif" height="100%" width="100" border="0">
</td>
<td align="left" height="60" valign="middle" width="450">
.... Text ....
</td>
</tr>
Ergebnis: Netscape wehrt sich gegen das height="100%" - wird einfach ignoriert. Das Image bleibt in der Grösse, wie es eben gross ist (5px)
3. Versuch
-------------------------------
<tr>
<td valign="top" rowspan="2" align="center" width="100">
<table border="0" width="2" height="100%" align="center" cellpadding="0" cellspacing="0">
<tr height=100%><td valign=bottom bgcolor=red width=2><hr size="0"></td>
</tr>
</table>
</td>
<td align="left" height="60" valign="middle" width="450">
.... Text ....
</td>
</tr>
Ergebnis: Tja, da klappte gar nix :-(
Weiss jemand Rat? Es muss allerdings _unbedingt_ in die Zelle rein, an der Aussentabelle kann ich nix rumwurschteln!
liebe Grüsse
Bernhard
-
Hallo Bernhard,
Hallo!
Ich hätte nicht gedacht, dass mir HTML nochmal solche Kopfzerbrechen bereiten kann ;-) Ich möchte gern eine senkrechte Linie in der Höhe einer Tabellenzelle (=100%) machen, aber es ist wie verhext! Hier mal alle meine bisherigen Versuche, teilweise auch aus dem Archiv:
1.Versuch:
<tr>
»» <td valign="top" rowspan="2" align="center" width="100" background="gifs/vertred.gif">
»» </td>
»» <td align="left" height="60" valign="middle" width="450">.... Text ....
»» </td>
</tr>
ich gehe mal davon aus, dass Du lediglich eine vertikale Linie brauchst.
<td valign="top" rowspan="2" align="center" width="100" background="gifs/vertred.gif">
<table width="1" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1" height="100%" bgcolor="#999999"><img src="images/pixel.gif" height="1" width="1"></td>
</td>
</tr>
</table>
</td>Die Hintergrundfarbe der inneren Zelle gibt die Farbe der Line an.
Die Grafik sollte die gleiche Farbe haben und dient eigentlich nur
dazu, dass NS die leere Zelle nicht anders darstellt.Ich hab das jetzt nicht ausprobiert, sondern aus einem anderen Projekt
übernommen, aber die Vorgehensweise dürfte damit klar sein, oder?Tschau, Stefan
-
Hallo Bernhard,
scheiss Cut&Paste, klappt nie, wie man will ;-(
<td valign="top" rowspan="2" align="center" width="100" background="gifs/vertred.gif">
<table width="1" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1" height="100%" bgcolor="#999999"><img src="images/pixel.gif" height="1" width="1"></td>
</tr>
</table>
</td>So sollte es eher klappen.
Tschau, Stefan
-
Hi!
So sollte es eher klappen.
:-(
Nö, Die Tabelle mit der roten Hintergrundfarbe ist nun ca 12px (normale Schrifthöhe schätze ich) hoch! nix mit 100%
- ausserdem ist statt dem gif (Ich habs transparent gemacht) ein weisser Fleck!
http://www.international-tax-law.at/test.shtml
Ich hatte schon eine Variante, die musste ich allerdings aufgeben, als ich mir die Seite bei einem Kollegen in der Firma angesehen habe. Der hatte zwar eine hohe Auflösung eingestellt, allerdings mit 'grossen Schriftzeichen' - Und da hat's mir das ganze Layout durcheinandergewurstelt, unter anderem war eben der Strich nicht lang genug, da ich feste px-Zahlen bei dem <img> genommen habe! -Also nicht glauben ich hab dich verarscht, wenn du dir die Seite mal ansiehst, der Schein trügt ;-)Ich hatte übrigens vergessen zu sagen es funktioniert nur im NS nicht, aber das kennt man ja ;-)
Hoffentlich fällt dir noch was ein!
liebe Grüsse
Bernhard-
Hallo Bernhard!
Kannst Du das Problem der Schriftgröße nicht durch eine feste Pixel-Angabe mit css (font-size:xpx) umgehen?
Viele Grüße Steffen
-
Hi Steffen!
Kannst Du das Problem der Schriftgröße nicht durch eine feste Pixel-Angabe mit css (font-size:xpx) umgehen?
Genau das will ich eben nicht :-( Wenn du dir den Link ansiehst, siehst du rechts davon eine Spalte. Die ist mit verschiedenen Browsereinstellungen unterschiedlich hoch. Daher bräuchte ich eine 100%ige Lösung ;-)
http://www.international-tax-law.at/test.shtml
liebe Grüsse
Bernhard
-
-
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-
Hallo kerki!
Als kleine Wiedergutmachung für letzte Nacht, hier die Lösung
deines Problems:Und du glaubst das reicht ? - für all die Schmähungen die ich hatte
erleiden müssen? Für die durchwachte Nacht heute? Von Alpträumen am
Schlafen gehindert, unfähig mich auf irgendwas zu
konzentrieren ... ;-)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.Wem sagst du das, v.a. geht's wieder mal nur im IE :-(
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.Thanx, ich hatte diese Lösung irgendwo mal im Archiv gesehen, wollte
ich allerdings vermeiden, da ich alle Spalten (inkl. rowspans und
colspans) aubessern muss. Aber da es nicht anders zu funktionieren
scheint :-(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.Ahhh, das wars also, bei mir ist sie nämlich besagte 12px breit
gewesen, und ich hab mich wiedermal grün und blau geärgert,
denn ich hatte das cellpadding rausnehmen müssen! Und dann hat's
meine Text-Spalte ziemlich zusammengedrückt. Aber so schlau wie du
war ich halt nicht. Auf die Idee mit dem cellspacing bin ich
irgendwie nicht gekommen!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.Nönö, tut net Not! Allerdings freue ich mich auch so über mails,
selbst wenn sie keine Problemlösungs hinter sich her ziehen ;-)also Danke für deine Wiedergutmachung - *binehnichtböse*
liebe Grüsse
Bernhard
-
-
-