Hallo,
ich habe 2 Tabellen erstellt, und seltsamerweise wird der gesamte Inhalt, der im Quellcode nach der zweiten Tabelle steht, innerhalb des <div></div> der zweiten Tabelle, genau über ihr platziert. Aber der Aufbau beider Tabellen ist identisch.
Hier sieht man das Problem:
html-seminar.de/woltlab/attachment/874/
Wenn ich unter der Tabelle (auch unterhalb der divs) noch eine Tabelle einfüge, wird alles unter der Zweiten platziert, aber dann innerhalb des Kästchens, des Spoilers
Falls relevant, hier der Code:
<div class="spoiler" id="spoiler02">
<p> <a href="javascript:spoiler('spoiler02')" class="s-header">Levels object placement sheets</a></p> <table class="wikitable"> <thead> <tr><th colspan="9" class="cornertopleft cornertopright tkopf" align="left" style="padding:5px; background-color: #000; cursor: text;">Notes: </th></tr> <tr> <th width="90px">Address GameCube<br />[PAL/EUR]</th> <th width="90px">Address GameCube<br />[NTSC-U/USA]</th> <th width="90px">Address GameCube<br />[NTSC-J/JPN]</th> <th width="90px">Address Wii U/HD<br />[Regionfree]</th> <th width="90px" style="font-family: 'Courier New', 'Courier' 'monospace'"><a style="color:#0ff">0 </a>1 2 3 </th> <th width="90px" style="font-family: 'Courier New', 'Courier' 'monospace'"><a style="color:#0ff">4 </a>5 6 7 </th> <th width="90px" style="font-family: 'Courier New', 'Courier' 'monospace'"><a style="color:#0ff">8 </a>9 A B </th> <th width="90px" style="font-family: 'Courier New', 'Courier' 'monospace'"><a style="color:#0ff">C </a>D E F </th> <th>String-ID</th> </tr> </thead> <tbody style="font-family:'Courier New'"><tr><td>81462110</td><td..........</tr>
</tbody </table> </div>
wikitable.css
thead{ border: 5px solid #059; border-radius: 20px; background-color: #80f;}
th{ border-bottom-color: aqua;}
table{ border: 5px solid #059; border-radius: 15px; // box-shadow: 0px 0px 15px 10px #80f; width: 1300px; color: #fff; margin-left: auto; margin-right: auto; margin-top: 1px; width: 1293px;}
.cornertopleft{ border-top-left-radius: 15px; }
.cornertopright{ border-top-right-radius: 15px; }
.cornerbottomleft{ border-bottom-left-radius: 15px; }
.cornerbottomright{ border-bottom-right-radius: 15px; }
td{ cursor: text; border: 1px solid #059; padding-left: 3px;}
.topthead{ border-top-left-radius: 20px; border-top-right-radius: 20px;}
.tables{ color: #fff; margin-top: 85px; float: right; display: block; border-radius: 20px; margin-bottom: 40px;}
.tkopf{ text-align: left; font-size: 14px; text-decoration-style: solid; font-family: sans-serif; width: 400px;}
tr:nth-child(even){ background: rgba(0, 0, 0, 0.7);}
tr:nth-child(odd){ background: rgba(15, 15, 15, 0.75);}
th:nth-child(1n){ background-color: #80f;}
Alles anzeigen
spoiler.css
.spoiler{ border-radius: 15px; color: #fff; height: 25px; margin: 3px; overflow: hidden; box-shadow: 0px 0px 15px 10px #80f; margin-top: 50px; margin-bottom: 50px;}
.spoiler p:first-child{height: 25px;margin: 0px;background-color: #000;}
.s-header{ font-size: 18px;font-family: sans-serif; font-style: oblique;}
spoiler.js
function spoiler (expand){ var spoiler = document.getElementById(expand); if (spoiler.style.height != "auto") { spoiler.style.height = "auto"; } else { spoiler.style.height = "25px"; }}
Ich hab den Verdacht, es liegt an der Spoiler-Box..
Mit nur einer Tabelle, klappte alles wunderbar (könnt Ihr auf meiner Website sehen, falls es helfen könnte: http://cosmocortney.ddns.net/enzy/wind_waker_wiki_en.php
EDIT: Ich glaube ich bin dem auf der Spur. Es könnte am .spoiler p:first-child liegen. Habe es geschafft, dass die Tabelle angezeigt wird, wie sie soll, nur wurde nun alles nach der Tabelle auf ihr überlappend angezeigt.
EDIT 2: das ist jetzt sehr seltsam. Habe ein weiteres/drittes </table> (obwohl es bereits 2 Tabellen (also zwei <table>) gibt) eingefügt und nun ist es genau soe, wie es sein soll. Wie kann das sein!?