|
|||
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%; } 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) |
Sponsored Links |
|
|||
Hallo
Zitat:
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 |
Sponsored Links |
|
|||
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... |
|
|||
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? |
|
|||
Zitat:
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) |
|
|||
Zitat:
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. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |