T
trms
Bekanntes Mitglied
- Dabei seit
- 11.01.2003
- Beiträge
- 266
- Reaktionspunkte
- 0
Moin Leute,
ich bin gerade verzweifelt.
Für eine deutsch / englisch Wörterbuch habe ich ein Java Script 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:
hier der HTML Code:
ich bin gerade verzweifelt.
Für eine deutsch / englisch Wörterbuch habe ich ein Java Script 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:
HTML:
.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:
<!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>
