Schattenwurf durch Tabelle simulieren
Lars
0 André Laugks0 Lars0 André Laugks0 André Laugks0 Lars0 André Laugks0 André Laugks0 Lars
0 Markus Schaber
Hallo allerseits,
ich versuche zur Zeit ein Applet durch einen Schattenwurf optisch etwas ansprechender zu gestallten. Das Problem ist, das das Applet je nach Bildschirmauflösung unterschiedliche Größen annehmen kann. Darum dachte ich das die beste Lösung eine Tabelle ist, die sich der Größe des Applet anpaßt, und deren nächste Spalte und Zeile den Schatten generiert. Hierfür habe ich folgenden HTML Code geschrieben (Das Applet ist hier durch eine Grafik ersetzt):
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="560" HEIGHT="310" >
<TR>
<TD ALIGN=LEFT VALIGN=TOP COLSPAN="2" ROWSPAN="2" WIDTH="550" HEIGHT="300" BACKGROUND="http://www.gruenewald.de/lars/applet.gif">
</TD>
<TD ALIGN=LEFT VALIGN=TOP WIDTH="10" HEIGHT="10">
</TD>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=TOP WIDTH="10" BGCOLOR="#000000">
</TD>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=TOP WIDTH="10" HEIGHT="10">
</TD>
<TD ALIGN=LEFT VALIGN=TOP COLSPAN="2" HEIGHT="10" BGCOLOR="#000000">
</TD>
</TR>
</TABLE>
Das Problem ist nur das sämtliche Größenangaben vom Browser ignoriert werden. Normalerweise sollte das Tabellenfeld rechts oben neben dem Applet und links unter dem Applet genau 10x10 Pixel groß sein. Gibt es eine andere Möglichkeit die Zellengröße zu erzwingen?
Ciao
Lars
Hallo!
Schreibe mal zwischen allen <TD>‚s und </TD>‚s ein <BR>. der Brauser braucht etwas Fleisch zum darstellen.
<TD ALIGN=LEFT VALIGN=TOP WIDTH="10" BGCOLOR="#000000"><BR>/TD>
André
Hallo André,
vielen Dank für Deinen Tip. Leider brachte er nicht das gewünschte Ergebnis
Ciao
Lars
Hallo!
vielen Dank für Deinen Tip. Leider brachte er nicht das gewünschte Ergebnis
Sorry, ich sehe auf der rechten Seite. Mache es mit einem einem bilden GIF. Unter dieser URL kannst Du Dir eins downloaden. http://www.netcologne.de/~nc-laugksan/body/0gif.gif
<TD ALIGN=LEFT VALIGN=TOP WIDTH="10" HEIGHT="10">
<IMG SRC="0gif.gif" VSPACE=5 HSPACE=5>
</TD>
5pixel+bild(1x1pixel+5pixel = 11 Pixel
VSPACE ist für horizontal
HSPACE ist für vertikal
Hallo!
Noch was, nehme aus den Zellen, in denen sich die "Schatten" befinden, WIDTH und HEIGHT in <TD> raus, es ist besser. Ich habe es jetzt probiert und es funktioniert.
André
Hallo André ,
vielen Dank für Deine Hile. Aber irgendwie stehe ich heute auf dem Schlauch. Aber irgendwie bekomme ich es nicht geregelt. Hier meine neue Version:
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="560" HEIGHT="310" >
<TR>
<TD ALIGN=LEFT VALIGN=TOP COLSPAN="2" ROWSPAN="2" WIDTH="550" HEIGHT="300" BACKGROUND="applet.gif">
.
</TD>
<TD ALIGN=LEFT VALIGN=TOP>
<img src="0gif.gif" vspace="5" hspace="5">
</TD>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=TOP BGCOLOR="#000000">
.
</TD>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>
<img src="0gif.gif" vspace=5 hspace=5>
</TD>
<TD ALIGN=LEFT VALIGN=TOP COLSPAN="2" BGCOLOR="#000000">
.
</TD>
</TR>
</TABLE>
Das Ergebniss sieht immer noch total kaputt aus. Hab ich die Änderungen so gemacht, wie von Dir gedacht?
Ciao
Lars
Hallo!
Ich frage mich, was du hast? Es sieht doch gut aus. Ein horizontale Balken der ca. 2cm lang ist und der vertikale Balken ist ca.3x so lang.
André
noch was...
wenn Dir das nicht alles gefällt, mußt du an VSPACE und HSPACE rumfummeln. Denke dran, wenn Du z.B.10Pixel angibst, bedeutet das 20 Pixel + 1Pixel bildes GIF.
z.B. VSPACE=10 bedeutet
10Pixel oberhalb des Bildes + 1Pixel Bild + 10Pixel unterm Bild = 21 Pixel Höhe.
Du kannst jetzt Zellen auseinander reißen, mit HSPACE(vertikal) oder VSPACE(horizontal).
z.B. HSPACE=50 VSPACE=10
André
Hallo,
ich habe bei mir nur einen kleinen schwarzen Klecks unten rechts in der Ecke. Und der ändert seine Größe je nachdem, welchen Browser ich verwende (Microsoft / Netscape)
Ciao
Lars
Hallo!
ich habe bei mir nur einen kleinen schwarzen Klecks unten rechts in der Ecke. Und der ändert seine Größe je nachdem, welchen Browser ich verwende (Microsoft / Netscape)
mmmmhhhhh......, kannst Du die seite mal ins netz stellen. Dann kann man mal schauen.
Aber ein kleiner Klecks... bei mir war es unten rechts ca 2cm lang. Ich denke wenn man mal die Seite sehen könnte, währe das besser. Es ist aber egal, ob Du das blind GIF nimmst oder einfach nur WIDTH/HEIGHT nimmst..... ich verstehe das nicht mit den kleinen Klecks. Wenn Du das blinde GIF horizontal auseinader reißt, müßte es in dieser Breite im IE und in Netscape gleich angezeigt werden.
André
Hallo,
das Resultat ist unter http://www.gruenewald.de/lars/test.htm zu sehen. Dort habe ich auch noch eine Grafik eingefügt, die anzeigt wie ich mir das Ganze vorstelle.
Ciao
Lars
Hallo!
Ich habe mal eine andere Tabelle hier.
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=550 HEIGHT=300>
<TR>
<!-1->TH colspan=2 rowspan=2 WIDTH=540 BGCOLOR="#ff0000" HEIGHT=290>Applet</TH>
<!-2-><TD BGCOLOR="#ffffff"><IMG SRC="0gif.gif" HEIGHT=100 WIDTH=10></TD>
</TR>
<TR>
<!-3-><TD BGCOLOR="#000000"><IMG SRC="0gif.gif" HEIGHT=190 WIDTH=10></TD><!-vertikal->
</TR>
<TR>
<!-4-><TD BGCOLOR="#ffffff"><IMG SRC="0gif.gif" HEIGHT=10 WIDTH=280></TD>
<!-5-><TD BGCOLOR="#000000"><IMG SRC="0gif.gif" HEIGHT=10 WIDTH=260></TD><!-horizontal-->
<!-6-><TD BGCOLOR="#000000"><IMG SRC="0gif.gif" HEIGHT=10 WIDTH=10></TD><!-Ecke->
</TR>
</TABLE>
Jetzt nehmen wir mal nicht das VSPACE oder HSPACE, sondern dehnen das Bild einfach aus <IMG SRC="0gif.gif" WIDTH=* HEIGHT=*>. Damit habe ich ein sehr gutes Ergebniss erreicht.
Also, die WIDTH/HEIGHT Angaben im TABLE-Tag sind die Summe.
WIDTH(TD<!-1->)+ WIDTH(Bild<!-2->)=550
WIDTH(Bild<!-4->)+ WIDTH(Bild<!-5->)+WIDTH(Bild<!-6->)=550(TABLE)
HEIGHT(TD<!-1->+HEIGHT(Bild<!-4->)=300
HEIGHT(Bild<!-2->)+HEIGHT(Bild<!-3->)+HEIGHT(Bild<!-6->)=300(TABLE)
Das heißt, nimmst Du irgendwo 10Pixel weg, mußt Du die woanders drauf legen. Du kannst jetzt die Schatten länger oder breiter machen, je nach belieben.
André
Hier nochmal das angestrebte Resultat
Hallo!
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="560" HEIGHT="310" >
»» <TR>
»» <TD ALIGN=LEFT VALIGN=TOP COLSPAN="2" ROWSPAN="2" WIDTH="550" HEIGHT="300" BACKGROUND="http://www.gruenewald.de/lars/applet.gif">
»»
»» </TD>
»» <TD ALIGN=LEFT VALIGN=TOP WIDTH="10" HEIGHT="10">
»»
»» </TD>
»» </TR>
»» <TR>
»» <TD ALIGN=LEFT VALIGN=TOP WIDTH="10" BGCOLOR="#000000">
»»
»» </TD>
»» </TR>
»» <TR>
»» <TD ALIGN=LEFT VALIGN=TOP WIDTH="10" HEIGHT="10">
»»
»» </TD>
»» <TD ALIGN=LEFT VALIGN=TOP COLSPAN="2" HEIGHT="10" BGCOLOR="#000000">
»»
»» </TD>
»» </TR>
</TABLE>
Das Problem ist nur das sämtliche Größenangaben vom Browser ignoriert werden. Normalerweise sollte das Tabellenfeld rechts oben neben dem Applet und links unter dem Applet genau 10x10 Pixel groß sein. Gibt es eine andere Möglichkeit die Zellengröße zu erzwingen?
Vielleicht liegt es am Colspan und rowspan in Verbindung mit dem Background, hast du das Applet auch als Background?