wertzui: Problem mit einer Tabelle

Hallo erstmal
Ich habe ein Problem mit folgendem Code:
http://wilcoding.xs4all.nl/Wilco/Pastecode.aspx?pasteID=1567
In Zeile 4 steht ja, dass die Zelle 25px groß sein soll, aber die wird leider immer größer dargestellt.

wäre schön, wenn mri da jemand helfen könnte.

cu wertzui

  1. Ich verstehe die Tabelle irgendwie nicht :-(

    1. Also es soll eine mittlere Zelle geben, wo Inhalt rein kommt und drumherum Zellen, für eine schicken Rahmen aus Grafiken.
      Aber bei den oberen drei Grafiken ist es so, dass die links und rechts länger sind, als die in der Mitte. Desshalb will ich die Zelle oben in der Mitte nur 25px groß haben.

  2. Hallo wertzui,

    http://wilcoding.xs4all.nl/Wilco/Pastecode.aspx?pasteID=1567
    In Zeile 4 steht ja, dass die Zelle 25px groß sein soll, aber die wird leider immer größer dargestellt.

    Imageready regelt das wie folgt, wenn Tabellenzellen in einer Zeile unterschiedliche Rowspan-Werte haben:

    Es wird eine weitere Tabellenspalte mit einem Pixel Breite rechts angefügt. In dieser Spalte gibt es nur einzelne Zellen, also keinen Rowspan größer als eins. In den Zellen dieser Spalte stecken "Blinde Pixel", d.h. ein transparentes Gif-Image mit von genau einem mal einem Pixel, das aber in der Höhe entsprechend der gewünschten Zellenhöhe skaliert wird.

    Wenn du aber von vornherein auf Row- und Column-Spans verzichtest, deine Grafiken also gleich alle parallel (d.h. nicht stuig zerschneidest, kannst du auf dieses Blindpixel-Konstrukt ganz verzichten.

    <table  border="1" width="251" id="table1" cellspacing="0" cellpadding="0">
      <tr>
        <td width="50" height="172" rowspan="2">&nbsp;</td>
        <td height="25">&nbsp;</td>
        <td width="50" height="172" rowspan="2">&nbsp;</td>
        <td width="1"><img src="1mal1.gif" width="1" height="25"></td>
      </tr>
      <tr>
        <td rowspan="2" height="172">&nbsp;</td>
        <td><img src="1mal1.gif" width="1" height="127"></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><img src="1mal1.gif" width="1" height="25"></td>
      </tr>
      <tr>
        <td width="50" height="52">&nbsp;</td>
        <td height="52">&nbsp;</td>
        <td width="50" height="52">&nbsp;</td>
        <td><img src="1mal1.gif" width="1" height="52"></td>
      </tr>
    </table>

    Gruß Gernot

    1. Also die Methode geht, erstmal danke!
      Aber warum geht die "reine" html-Methode nicht?
      Eigentlich ist doch alles richtig angegeben.

      1. Hallo wertzui,

        Also die Methode geht, erstmal danke!
        Aber warum geht die "reine" html-Methode nicht?
        Eigentlich ist doch alles richtig angegeben.

        Wenn du bereits all deine Rahmenbilder in die Tabellenzellen gesetzt hättest, wäre es zumindest im IE wohl auch ohne blinde Pixel gegangen, möglicherweise auch in Mozilla&Co sowie Opera, definitiv aber nicht in Netscape 4.X.

        Solange du nur &nbsp; in die Zellen setzt, verteilen die Browser den Platz wie sie wollen; es ist ja genug Platz in den Zellen, um alles darzustellen. Von einem Browser wird dann der Inhalt der im Quellcode zuerst vorkommenden Zellen bevorzugt und von einem anderen derjenige der zuletzt vorkommenden.

        Nur an Bildern klammern sich Tabellenzellen fest. Warum die Natur das so eingerichtet hat (oder waren es die allmächtigen Browserschöpfer, die sich hier abgesprochen haben?) vermag ich auch nicht zu sagen.

        Gruß Gernot

        1. Hallo nochmal,

          ich vergaß: mit CSS table-layout:fixed käme man vielleicht auch ohne Blindpixel aus.

          Gruß Gernot

          1. und nochmal,

            ich vergaß: mit CSS table-layout:fixed käme man vielleicht auch ohne Blindpixel aus.

            Folgender Code funktioniert in Opera 7.54 und Mozilla 1.7.2, nur nicht, (wen wundert's?) im MSIE unter Win98. Der IE macht die Tabelle einfach höher als sie sein sollte, trotz table-layout:fixed.

            Gruß Gernot

            Soviel zu diesem Thema, nur der Vollständigkeit halber:

            <html>
            <head>
            <title>Table-Layout:Fixed?</title>
            </head>
            <style type="text/css">
            <!--
            #table1 {
              width:250px;
              height:249px;
              table-layout:fixed;
              border-collapse:collapse;
            }

            td {
             border:solid 1px;
             margin:0px;
            }

            td.unten {
              height:52px;
            }

            td.eck {
              width:50px;
            }

            td.hoch {
              height:172px;
            }

            td.schmal {
              height:25px;
            }
            -->
            </style>
            <body>
            <table id="table1" cellspacing="0" cellpadding="0">
              <tr>
                <td class="eck hoch" rowspan="2">&nbsp;</td>
                <td class="schmal">&nbsp;</td>
                <td class="eck" rowspan="2">&nbsp;</td>
              </tr>
              <tr>
                <td class="hoch" rowspan="2">&nbsp;</td>
              </tr>
              <tr>
                <td class="schmal">&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td class="unten">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </table>
            </body>
            </html>

            1. Ok, danke für die Antwort
              Ich werds dann wohl mit den Blindbildern machen, da es ja auch im IE gehen soll ;)

              1. Also irgendwie funktioniert das auch nicht, da der falsche Teil langgezogen wird.
                Kannst dir das ja mal auf meiner Homepage www.dynamic-capacity.de.vu anschauen.

                1. Ich hab das Problem jetzt einfach dadurch gelöst, dass ich mit style="background:no-repeat-x" gearbeitet habe und die obere und mittlere Zelle in der Mitte verbunden habe.
                  Allerdings wird immer noch die falsche Zelle gestreckt (oben links und rechts), anstatt die in der Mitte links und rechts.
                  Hier nochmal der Code (sry, hab den jetzt nur schon in der PHP-Datei drinn, ist aber ohne Probleme lesbar.
                  http://wilcoding.xs4all.nl/Wilco/Pastecode.aspx?pasteID=1571

                2. Hallo wertzui,

                  Also irgendwie funktioniert das auch nicht, da der falsche Teil langgezogen wird.

                  Kannst dir das ja mal auf meiner Homepage www.dynamic-capacity.de.vu anschauen.

                  Da sehe ich zwar nicht, welcher Bereich sich fälschlicherweise streckt, aber sag das doch gleich, dass du einen Teil der Tabelle strecken willst, dann kann das natürlich nichts werden, weder mit Blindpixeln an der Seite noch mit table-layout:fixed.

                  Aber dein neuer Ansatz ist schon richtig: Mit Bildern, die man in den Hintergrund stellt und anderen, die man in den Vordergrund stellt kann man viel tricksen, dann klappts auch mit dem strecken.

                  Die Weihnachtszeit ist zwar bald vorbei und ich habe den Link in letzter Zeit hier schon häufiger gepostet, aber für dich hier noch einmal zur Veranschaulichung was ich meine.

                  http://www.sprachlernspiele.de/engel

                  Gruß Gernot

            2. Hallo Gernot

              ... Der IE macht die Tabelle einfach höher als sie sein sollte, trotz table-layout:fixed.

              ^^^^^

              Dort steht:
              Mit dieser Eigenschaft können Sie entscheiden, wie der Browser
              _Breitenangaben_ zur Tabelle ...

              Auf Wiederlesen
              Detlef

              --
              - Wissen ist gut
              - Können ist besser
              - aber das Beste und Interessanteste ist der Weg dahin!
              1. Hallo Detlef,

                Dort steht:
                Mit dieser Eigenschaft können Sie entscheiden, wie der Browser
                _Breitenangaben_ zur Tabelle ...

                table-layout:fixed

                Da war ich wohl wieder mal zu "fixiert" auf die Bezeichnung, die ja doch sehr allgemein klingt. (Habe mich heute schon einmal mit "absoluter" Positionierung blamiert)

                Aber hast du eine Erklärung dafür? Die Summe der Tabellenzellenhöhe beträgt exakt die Höhe der Tabelle.

                Da hilft kein Zwangsjackenelement drumherum:

                #zwangsjacke {
                  height:249px;
                  padding:0px;
                }

                auch nicht, wenn man der darin steckenden Tabelle dann eine Höhe von 100% gibt.

                Was aber hilft, ist folgende Trickserei, die dasselbe für den IE bewirkt wie ein Conditional Comment:

                td.hoch {
                  height:172px;
                  _height:100%;
                }

                Gruß Gernot