zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Grafik, Design, Typografie
Seite neu laden Javascript vs. HTML Tabelle

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.01.2016, 21:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.02.2015
Beiträge: 12
trms befindet sich auf einem aufstrebenden Ast
Standard 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>

Geändert von trms (18.01.2016 um 21:24 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.01.2016, 21:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.01.2016, 22:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.02.2015
Beiträge: 12
trms befindet sich auf einem aufstrebenden Ast
Daumen hoch

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.

Ich warte noch ne Weile auf weiteres Feedback...
Mit Zitat antworten
  #4 (permalink)  
Alt 19.01.2016, 09:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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?
Mit Zitat antworten
  #5 (permalink)  
Alt 19.01.2016, 12:34
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Viel schlimmer finde ich es, dass die Seite im Quirksmode dargestellt wird und daran dürfte nicht der Kompozer schuld sein.
Mit Zitat antworten
  #6 (permalink)  
Alt 19.01.2016, 19:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.02.2015
Beiträge: 12
trms befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
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.

Geändert von trms (19.01.2016 um 19:53 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 19.01.2016, 19:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.02.2015
Beiträge: 12
trms befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
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?
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.
Mit Zitat antworten
  #8 (permalink)  
Alt 19.01.2016, 19:58
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von trms Beitrag anzeigen
... oder nur "<!DOCTYPE html>" schreiben.
Das ist momentan der Stand der Dinge
Mit Zitat antworten
  #9 (permalink)  
Alt 19.01.2016, 21:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.02.2015
Beiträge: 12
trms befindet sich auf einem aufstrebenden Ast
Standard

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.



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

Geändert von trms (20.01.2016 um 17:15 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Frontend Developer JavaScript, HTML (m/w) itchristian Jobs 0 20.01.2012 13:25
Testmanager HTML, CSS, JavaScript (m/w) itchristian Jobs 0 16.01.2012 19:22
CSS und Tabellen PW-toXic CSS 70 06.03.2009 22:02
CSE HTML Validator Standard Anschaffung wert? DieterWelzel Offtopic 10 17.08.2007 18:02
HTML Tabelle In CSS konvertieren watermanFFM CSS 4 02.12.2005 12:54


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:30 Uhr.