nicht angemeldet
Hallo
Ich bin grad dabei HTML und JavaScript zu Lernen und Code mir grad eine kleine Homepage.Ich habe grad damit angefangen mir ein Menue zu Basteln den rest habe ich schon.Also zuerst sieht man nur eine tabelle ,wenn man jetzt mit der Maus drüber fährt geht eine weiter tabelle mit links auf.
Tabelle ohne drüberliegender Maus
+---------------+
| test |
+---------------+
Tabelle mit drüberliegender Maus
+---------------+
| test |
+---------------+
+---------------+
| test |
+---------------+
+---------------+
| test |
+---------------+
+---------------+
| test |
+---------------+
Jedoch habe ich jetzt noch ein kleines problem und zwar folgendes: Also wenn ich die oberen Tabellen nacheinnander berühre und die untertabellen sich öffenen sieht es wie eine Trebbe aus. Wie kann ich es anstellen das alle untertabellen auf einer Linie ausgegeben werden ? Gibt es nicht einen befehl der die Y Postitionslinie wieder auf null stehlt?
So soll es aussehen:
+---------------+ +---------------+
| test 1 | | test 2 |
+---------------+ +---------------+
+---------------+ +---------------+
| test 1 | | test 2 |
+---------------+ +---------------+
+---------------+ +---------------+
| test 1 | | test 2 |
+---------------+ +---------------+
+---------------+ +---------------+
| test 1 | | test 2 |
+---------------+ +---------------+
<!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">
<head>
<title>Unbenanntes Dokument</title>
</head>
<script type="text/javascript">
function display(mode,ele){
if(mode=='s'){
document.getElementById(ele).style.visibility='visible';
}else{
document.getElementById(ele).style.visibility='hidden';
}
}
</script>
<body>
<div>
<table border="1">
<tr rowspan="5">
<td width="155" height="20" onMouseOver="display('s','sub1')">Test</td>
<td width="155" height="20" onMouseOver="display('s','sub2')">Test</td>
<td width="155" height="20" onMouseOver="display('s','sub3')">Test</td>
<td width="155" height="20" onMouseOver="display('s','sub4')">Test</td>
<td width="155" height="20" onMouseOver="display('s','sub5')">Test</td>
</tr>
</table>
</div>
<div style="visibility:hidden;margin-left:30px;" id="sub1" onClick="display('h','sub1')">
<table width="150" height="90" border="1">
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
</table>
</div>
<div style="visibility:hidden;margin-left:210px;" id="sub2" onClick="display('h','sub2')">
<table width="150" height="90" border="1">
<tr><td>Test2</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
</table>
</div>
<div style="visibility:hidden;margin-left:390px; margin-top:30px" id="sub3" onClick="display('h','sub3')">
<table width="150" height="90" border="1">
<tr><td>Test3</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
</table>
</div>
<div style="visibility:hidden;margin-left:570px;" id="sub4" onClick="display('h','sub4')">
<table width="150" height="90" border="1">
<tr><td>Test4</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
</table>
</div>
<div style="visibility:hidden;margin-left:630px;" id="sub5" onClick="display('h','sub5')">
<table width="150" height="90" border="1">
<tr><td>Test5</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
<tr><td>Test</td></tr>
</table>
</div>
</body>
</html>
P.S. Bin ein Absuluter NEWBEE in der Materie