Stephan Brüning: Tabellenreihe ein- und ausblenden

Beitrag lesen

SELF-Forum

Tabellenreihe ein- und ausblenden

Stephan Brüning Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Leute.

ich benötige mal Eure Hilfe. Ich möchte das Template für meine Seite (http://www.astroinfos.net) ersetzen, modernisieren, wie auch immer ;-) Die Seite hat las Backend Typo3, mit dem ich recht gut umkann. Mehr Schwierigkeiten habe ich aber in der Umsetzung meines Planes, der da lautet:

Auf die rechte Seite kommen vier Kästen (Nachrichten, Der Himmel, Letzte Änderungen und Partnerinfo). Die Kästen soll der User selbst auf- oder zuklappen können. Hierfür benutze ich den folgenden Code:

<-------------------> HTML CODE <----------------------------->
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabelle Zeile ausblenden</title>
<script type="text/javascript">
function kasten1an () {
  if (document.getElementById)
    document.getElementById("Kasten1").style.display = "block";
    document.getElementById("Kasten2").style.display = "none";
 document.getElementById("Kasten3").style.display = "none";
 document.getElementById("Kasten4").style.display = "none";
}
function kasten2an () {
  if (document.getElementById)
    document.getElementById("Kasten1").style.display = "none";
    document.getElementById("Kasten2").style.display = "block";
 document.getElementById("Kasten3").style.display = "none";
 document.getElementById("Kasten4").style.display = "none";
}
function kasten3an () {
  if (document.getElementById)
    document.getElementById("Kasten1").style.display = "none";
    document.getElementById("Kasten2").style.display = "none";
 document.getElementById("Kasten3").style.display = "block";
 document.getElementById("Kasten4").style.display = "none";
}
function kasten4an () {
  if (document.getElementById)
    document.getElementById("Kasten1").style.display = "none";
    document.getElementById("Kasten2").style.display = "none";
 document.getElementById("Kasten3").style.display = "none";
 document.getElementById("Kasten4").style.display = "block";
}
</script>
</head>
<body>
<table width="200" bgcolor="#ffffff">
<tr><td>Hier poppt 1 auf</td></tr>
<tr id="Kasten1" style="display:block">
 <td>
 1
 </td>
</tr>
<tr><td><a href="javascript:kasten1an()">+</a></td></tr>
</table>
<table width="200" bgcolor="#ffffff">
<tr><td>Hier poppt 2 auf</td></tr>
<tr id="Kasten2" style="display:none">
 <td>
 2
</td>
</tr>
<tr><td><a href="javascript:kasten2an()">+</a></td></tr>
</table>
<table width="200" bgcolor="#ffffff">
<tr><td>Hier poppt 3 auf</td></tr>
<tr id="Kasten3" style="display:none">
 <td>
 3
</td>
</tr>
<tr><td><a href="javascript:kasten3an()">+</a></td></tr>
</table>
<table width="200" bgcolor="#ffffff">
<tr><td>Hier poppt 4 auf</td></tr>
<tr id="Kasten4" style="display:none">
 <td>
 4
</td>
</tr>
<tr><td><a href="javascript:kasten4an()">+</a></td></tr>
</table>
</body>
</html>
<-----------------> HTML CODE ENDE<--------------------------->

Meine Frage:
im IE 7 wird es richtig dargestellt. Firefox blendet auch ein und aus, aber verschiebt die Kästen dabei immer weiter nach unten, bzw. schiebt sie nach dem ausblenden nicht wieder hoch. Es ist alles valide. Und eine Forensuche und google brachte mir nicht viel, vermutlich habe ich auch falsche Suchbegriffe eingegeben :-|

Wer kann mir da mal helfen?

Die Datei findet Ihr unter http://www.astroinfos.net/hide.html

P.S.: in die Eingeblendete Reihe kommt nachher der Platzhalter für Typo3 in diesem Stil:
   <div class="nachrichten">###nachrichten###</div>
Die Typo3ler unter Euch wissen, wie ich das meine.

Danke schon mal vielmals

Beitrag melden
–
Informationen zu den Bewertungsregeln