XHTMLforum - Javascript vs. HTML Tabelle

XHTMLforum (http://xhtmlforum.de/index.php)

- Grafik, Design, Typografie (http://xhtmlforum.de/forumdisplay.php?f=86)

- - Javascript vs. HTML Tabelle (http://xhtmlforum.de/showthread.php?t=72608)

Javascript vs. HTML Tabelle

Moin Leute,

ich bin gerade verzweifelt.
Für eine deutsch / englisch Wörterbuch habe ich ein Javascript für das ein- und ausklappen der Tabellen Zeile eingesetzt. Die Grundfunktion (ein-ausklappen) klappt prima.

Jedoch haut es mir meine Formatierung kaputt, was ich an dieser Stelle nicht verstehe.
Vielleicht sieht ihr den Fehler?

Im Detail:

Wenn ich auf "Überschrift zu Text1" klicke, gehen beide Texte nach rechts gequetscht auf.
Eigentlich sollte der Zeilenaufbau wie "Text 2 deutsch" / "Text 2 englisch" (mittig) sein.

Hier der CSS Code (format.css):

Code:

.itabelle {

  border: 1pt solid black;

  font-size: 12pt;

  background-color: #cccccc;

  margin-left: auto;

  margin-right: auto;

  width: 100%;

}



.ttype1 {

  border-bottom: 1px dashed #000000;

  color: #000000;

  letter-spacing: 2px;

  font-size: 16pt;

  font-style: normal;

  font-family: Arial;

  width: 50%;

  text-align: center;

  font-weight: bold;

}

.ttype2 {

  border-bottom: 0px dashed #000000;

  color: #000000;

  letter-spacing: 2px;

  font-style: normal;

  font-family: Arial;

  width: 50%;

  text-align: center;

  font-weight: bold;

  font-size: 13pt;

}

.ttype3 {

  border: 1px solid #000000;

  width: 50%;

}

hier der HTML Code:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html style="direction: ltr;" lang="de-de"><head>



<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"><title>Startseite</title>



<link rel="stylesheet" href="format.css" type="text/css">

<link rel="stylesheet" href="menue.css" type="text/css">



<script type="text/javascript">

function spoil(id){

if (document.getElementById) {

var divid = document.getElementById(id);

divid.style.display = (divid.style.display=='block'?'none':'block');

} }

</script></head><body style="direction: ltr;">







<table class="itabelle">

<tbody>

<tr>

<td class="ttype1">deutsch</td>

<td class="ttype1">englisch</td>

</tr>

<tr>

<td colspan="2" rowspan="1"><br>

</td>

</tr>

<tr>



<td class="ttype2" colspan="2" rowspan="1"><span style="cursor: pointer;" onclick="spoil('id1');">Überschrift zu Text1<br>



</span></td>

</tr>



<tr id="id1" style="display: none;">

<td class="ttype3" >

Text 1 deutsch dsgsdfgsdfgsdfghsdfhsdfhsdfhsd sds dghsdhsdfhsdfhfgdfsdfhsdfhsdf</td>



<td class="ttype3">Text 1 englisch dfgsd hsfdgh dfg hdfg hdfh asfhafha hadfha ghadff</td>

</tr>



<tr>

<td class="ttype2" colspan="2" rowspan="1">Überschrift zu Text2</td>

</tr>



<tr>

<td class="ttype3" >Text 2 deutsch</td>

<td class="ttype3">Text 2 englisch<br></td>

</tr>





</tbody>

</table>



</body></html>

Hallo

Zitat:

Vielleicht sieht ihr den Fehler?

Schwierig.

Als Grundproblem wird eine Tabelle zum Layouten mißbraucht. Tabellen sind für Tabellendaten gedacht und verhalten sich entsprechend anders als andere Elemente.

Zunächst solltest du deshalb geeignetere Elemente verwenden, zum Beispiel das dl-Element.

Gruss

MrMurphy

Hey MrMurphy,

vielen Dank für deine schnelle Antwort.
Das wäre ärgerlich wenn ich auf das dl-Element setzen müsste zumal ich doch nur den Kompozer verwendet der das nicht unterstützt.

Leider habe ich schon 70 % (30 Stunden Arbeit) meiner Daten in Tabellen umgesetzt und dieses blöde "ein- ausklappen" macht mir ein strich in die Rechnung. :|

:arrow:Ich warte noch ne Weile auf weiteres Feedback...

Ein weiteres Feedback: Verwende nicht den Kompozer sondern einen x-beliebigen editor. Oder verwende nur den Editor im Kompozer. dl-Tabellen gibt es im HTML schon seit dem letzten Jahrtausend, also verwende diese auch. Beim nächsten Mal verwende nicht so viel Zeit unsinnige Tabellen zu erstellen sondern erkundige dich lieber, was der geeignete Weg dafür ist.
Ich weiß, das ist nicht das, was du hören wolltest. Aber schmeiß das weg was du hast und mach es ordentlich.

btw, was hat dein Thema mit Grafik und Typografie zu tun?

Viel schlimmer finde ich es, dass die Seite im Quirksmode dargestellt wird und daran dürfte nicht der Kompozer schuld sein.

Zitat:

Zitat von protonenbeschleuniger (Beitrag 547641)

Viel schlimmer finde ich es, dass die Seite im Quirksmode dargestellt wird und daran dürfte nicht der Kompozer schuld sein.

Vielen Dank für den Hinweis, mein HTML Baukasten ist gut 20 Jahre alt und durchlief schon eine Editoren, werde deshalb einige ungünstige sachen drin stehen.

Daher an dieser Stelle die Frage: sollte ich komplett auf diese Zeile verzichten oder nur "<!DOCTYPE html>" schreiben.

Zitat:

Zitat von cloned (Beitrag 547637)

Vielen Dank für die Kritik, ich werde es für mein nächtest Projekt merken.
Ich werde wohl in diesem Fall auf die ein-ausblenden verzichten.

Den Kompozer habe ich benutzt, damit ich den Text Inhalt bequem formatieren kann, da ich aus dem Web Browser beim kopieren die Formatierung behalten möchte.

Geht dies mit einer definitionlist auch bequem zu Gestalten?

Ich habe dieses Unterforum gewählt da mein Kernproblem die Design Umsetzung ist.

Zitat:

Zitat von trms (Beitrag 547653)

... oder nur "<!DOCTYPE html>" schreiben.

Das ist momentan der Stand der Dinge

Ich bin jetzt etwas irritiert.

Kann es sein, dass ich nicht wie in einer Tabelle den Zellenrahmen in Form einer Linie darstellen kann?

Meine SOLL Vorstellung diese Bild.

http://www.bilder-upload.eu/thumb/d0545a-1453233273.jpg

Edit:
Problem gelöst.
Es musste "lediglich" die style.display auf table-row geändert werden statt block.

HTML-Code:

divid.style.display = (divid.style.display=='table-row'?'none':'table-row');

Gut das ich nicht gleich auf Panik gemacht habe 8)