Dynamische Tabelle mit DIV (overflow Problem)

Status
Nicht offen für weitere Antworten.
ev0lst

ev0lst

Erfahrenes Mitglied
Hallo.

Ich habe eine normale Tabelle mit Zeilen und Spalten erstellt.

Hier der Code:

HTML: 
<table......>
<tr>
<td width="50%">spalte 1</td><td width="50%"><div id="box" onmouseover="show('categories');" style="display:none;">boxinhalt</div></td>
</tr>
</table>

Nun die Frage dazu, ob das mit dem DIV möglich ist den Rahmen der Tabelle zu überlappen, ohne die Größe der Tabelle zu verändern.

Wichtig dabei ist, dass sich unter dieser Tabelle noch eine weitere befindet. Diese kann jedoch nicht nach rutschen, weil der Inhalt des DIV doch sehr umfangreich ist ;)

Danke!
 
Hi,

vielleicht noch ein weiteres relative positioniertes DIV in der Zelle unterbringen. Das DIV, das überlappen
soll, darin absolut positionieren.
Code: 
<table border="1" width="100%">
  <tr>
    <td width="50%">spalte 1</td>
    <td width="50%">
      <div style="position: relative;">
        <div id="box" style="position: absolute; top: 0; left: 0;" onmouseover="show('categories');">
          boxinhalt<br />
          und mehr ...
        </div>
      </div>
    </td>
  </tr>
</table>
Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Danke für die Antwort. Leider kann und wird das aber nicht funktionieren.

- position:absolute mit top und left Angaben positioniert alles nach oben links
- nach meinem Wissen fehlen auch z-index angaben, aber leider kann ich es nicht genau sagen

Das mit dem DIV drum herum klang super, geht aber nicht...

Habe deinen Code trotzdem probiert!

Danke für Deine Hilfe...

Vielleicht kennt ja jemand noch einen anderen Weg.
 
Hi,

mag sein, dass wir aneinander vorbeireden, aber bei mir funktioniert mein Beispiel. Das enthaltene DIV
überlappt die Zellengrenzen, ohne die Tabelle zu verändern. Getestet in IE 6 und 7, Firefox 1.5 und 2 und
Opera 9.

Absolut positionierte Elemente richten sich übrigens am nächsten Elternelement mit relativer Positionierung
aus - in diesem Fall also das umschliessende äussere DIV.

Komplettes Beispieldokument:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table border="1" width="100%">
  <tr>
    <td width="50%">spalte 1</td>
    <td width="50%">
      <div style="position: relative;">
        <div id="box" style="position: absolute; top: -12px; left: 0; background: #ccc;" onmouseover="show('categories');">
          boxinhalt<br />
          und mehr ...
        </div>
      </div>
    </td>
  </tr>
</table>
</body>
</html>

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück