Thorsten Legat: max-height wird überschritten

Hallo!

Ich versuche gerade ein Spiel mit html, css und javascript zu verwirklichen. Dabei habe ich eine Tabelle erstellt und jede Tabellenzelle stellt ein Spielfeld dar.

Folgendes Problem: Ich habe eine Tabelle, in der in jedem td ein Bild angezeigt wird. Jedes td und jedes Bild hat die Höhe und Maximalhöhe 50px. Overflow steht auf auto. Wenn ich jetzt 2 Bilder übereinander anzeigen lassen möchte und das zweite mit position und top auf das erste verschiebe, wird die gesamte Zeile der Tabelle zu groß angezeigt. Kann mir jemand helfen, wie ich das verhindern kann?

#bilddrauf { position:relative; top:-50px; }
td         { height:50px; width:50px; max-height:50px; overflow:auto; border:1px solid;}
<table>
 <tr>
  <td>
   <img src="burg.png">
   <img id="bilddrauf" src="thorstenlegat.png">
  </td>
 </tr>
</table>

Die Bilder sind zwar übereinander, aber das td ist zu hoch.

  1. Hallo Thorsten Legat,

    Die Bilder sind zwar übereinander, aber das td ist zu hoch.

    Bei position: relative bleibt die Lücke, in der das Element ursprünglich war, erhalten.

    Bis demnächst
    Matthias

    --
    Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
    1. Ja das sehe ich. Hast du eine Idee, wie ich das ändern könnte? Die anderen position-Eigenschaften bieten ja auch keine Lösung, oder sehe ich das falsch?

      1. Hallo Thorsten Legat,

        Ja das sehe ich. Hast du eine Idee, wie ich das ändern könnte? Die anderen position-Eigenschaften bieten ja auch keine Lösung, oder sehe ich das falsch?

        Bis demnächst
        Matthias

        --
        Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
      2. Hallo

        Ja das sehe ich. Hast du eine Idee, wie ich das ändern könnte? Die anderen position-Eigenschaften bieten ja auch keine Lösung, oder sehe ich das falsch?

        Doch, position: absolute; ist, was du suchst. Du musst dabei aber beachten, dass sich position: absolute; nach jenem Elternelement ausrichtet, das nicht position: static; ist. gibt es keines, richtet sich das Elemente mit seinen Werten nach <html>, also typischerweise nach dem Viewport.

        Ich kennen die konkrete Struktur deines Spiels nicht, aber hier mal zum experimentieren.

        das HTML …

        <div id="hauptcontainer">
         <div id="untercontainer1">A</div>
         <div id="untercontainer2">B</div>
        </div>
        

        … und das CSS:

        
        #hauptcontainer {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid;
        }
        
        #untercontainer1 {
        position: absolute;
        width: 20px;
        height: 20px;
        border: 1px solid;
        left: 10px;
        top: 40px;
        }
        #untercontainer2 {
        position: absolute;
        width: 20px;
        height: 20px;
        border: 1px solid;
        left: 60px;
        top: 70px;
        }
        

        Tschö, Auge

        --
        Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
        Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview
        1. Also zunächst mal Danke für die schnelle Hilfe an alle Antworter. Ich bin mir gerade nicht sicher, ob ich mit position:absolute weiterkomme. Eigentlich möchte ich mein Bild relativ zum td, oder zum anderen Bild ausrichten und nicht mit absoluten Pixelzahlen zum html, oder body Element. Auch die Tabelle selbst und die tr Elemente sollen nicht absolut oder fixed positioniert sein.

          Wie auch immer, ich muss mich erstmal einlesen und ein bisschen mehr verstehen, denke ich.

          Danke für die Hilfe!

          1. Ich habe jetzt alle Eltern-Elemente auf position:relative gesetzt und das zweite Bild auf position:absolute. Das klappt. Danke für die schnelle und gute Hilfe!