Lars: Schattenwurf durch Tabelle simulieren

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

  1. 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é

    1. Hallo André,

      vielen Dank für Deinen Tip. Leider brachte er nicht das gewünschte Ergebnis

      Ciao
      Lars

      1. 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

        1. 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é

          1. 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

            1. 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é

              1. 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é

              2. 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

                1. 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é

                  1. 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

                    1. 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é

                  2. Hier nochmal das angestrebte Resultat

  2. 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?