Hallo Zusammen,
mein erster Beitrag und schon habe ich ein kleines bis mittelschweres Problem.
Ich habe mir ein DHTML Menü (Klappmenü aus dem Netz als Kostenlose Version geladen) und versuche dieses gerade in meine HP einzubauen.
Neue HP besteht nur aus Tabellenkonstruktion.
Hinweis des Skriptherstellers zum Anzeigen der Navigation:
Code
IE Bug #1 (nested tables):
Example not working on IE:
<table><tr><td><table><tr><td>
<table id="menu">....</table>
<script>.. init menu ... </script>
</td></tr></table></td></tr></table>
Example that works on IE:
<table><tr><td><table><tr><td>
<table id="menu">....</table>
</td></tr></table></td></tr></table>
<script>.. init menu ... </script>
Difference:
Looks like initializing the menu on IE must be done after closing some tables.
So if you are using nested tables, initialize the menu at the end of the page
or use window.onload event:
<script>
window.onload = function() {
.. init menu ..
}
</script>Meine Indexseite sollte nachfolgend aussehen:
Code
<title>www.project-ae.de ::: Automation & Engineering :::</title>
<link rel="stylesheet" href="ie5.css" type="text/css">
<link rel="stylesheet" href="format.css" type="text/css">
<link rel="stylesheet" href="menue2.css" type="text/css">
<script src="datumuhr.js" type="text/javascript"></script>
<script type="text/javascript" src="klappmenu.js"></script>
</head>
<body onload="window.setTimeout('datumuhr()',1000)">
<table align="center" cellspacing="0" cellpadding="0" border="0" width="95%" height="50%" style="border:solid 0px silver">
<tr><td width="100%">
<table cellspacing="2" cellpadding="0" border="0" width="97%"><tr><td width="240" align="center">
<table width="260" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td width="260" >
<table cellspacing="0" cellpadding="0" border="0" width="260" ><tr><td align="center"><table border="0" cellpadding="0" cellspacing="0" width="100%" >
</tr></td></table>
</tr></td></table>
</tr></td></table>
</tr></td></table>
<table><tr><td id="logo" width="260" height="40">
<img align=center src="images/logo.jpg" width=255 height=100%>
</td><td id="logo" width="100%" height="72"><img align=left src="images/logo2.gif" width=80% height=40%> </td>
</tr>
<td width="260"><table cellspacing="0" cellpadding="5" border="0"><tr><td width="100%" class="leiste" >
<table align="left" cellspacing="0" cellpadding="5" border="0" width="280" align="center" height=75><tr><td align="center">
<form name="anzeige"><font size=-1 color=#ffffff>Datum / Date: <input size="6" name="date" class="datum" ></form>
<form name="anzeige2" ><font color=#ffffff>Uhrzeit / Time: <input type="text" name="time" size="6" class="zeit" ></font>
</tr></table></td></tr></table></td>
<td align="center" width="100%" class="leiste">
<font size=-1>Bitte wählen Sie Ihre Landessprache aus / Please select your language</font>
<br>
<a href="index.html"><img src="images/flagge-deu.gif" width=75 align="center" height=50></a>
<img src="images/clearpixel.gif" width="20" align="center">
<a href="index2.html"><img src="images/flagge-eng.gif" width=75 align="center" height=50></a>
</td></tr>
<tr><td valign="top" class="nav">
<br>
</style>
</head><body>
<table align="center" cellspacing="0" cellpadding="0" id="menu1" class="dmx">
<tr>
<td>
<a class="item1" href="javascript:void(0)">»</span> about us</a>
<div class="section">
<a class="item2" href="index2.html">»</span> home</a>
<a class="item2" href="eng/philo.html">»</span> philosophy</a>
<a class="item2 arrow" href="eng/fgeschichte.html">»</span> company history</a>
<a class="item2 arrow" href="eng/referenzen.html">»</span> references</a>
<a class="item2 arrow" href="eng/vertretungen.html">»</span> respresentatives</a>
<a class="item2 arrow" href="eng/impressum.html">»</span> imprint</a>
</div>
<br>
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="2" id="menu" align="center" style="border:none" >
<td width=226>
products</font></td></table>
<a class="item1" href="javascript:void(0)">»</span> Maschinengruppe1</a>
<div class="section">
<a class="item2" href="javascript:void(0)">»</span> 1-1</a>
<div class="section">
<a class="item2" href="example.htm">»</span> 1-1-1</a>
<a class="item2 href="example2.html">»</span> 1-1-2</a>
<a class="item2" href="example2.html">»</span> 1-1-3</a>
<a class="item2" href="example2.html">»</span> 1-1-4</a>
<a class="item2 href="example2.html">»</span> 1-1-5</a>
<a class="item2" href="example2.html">»</span> 1-1-6</a>
</div>
<a class="item2 href="example2.html">»</span> 1-2</a>
<a class="item2" href="example2.html">»</span> 1-3</a>
<a class="item2" href="example2.html">»</span> 1-4</a>
<a class="item2 href="example2.html">»</span> 1-5</a>
<a class="item2" href="example2.html">»</span> 1-6</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> Maschinengruppe2</a>
<div class="section">
<a class="item2" href="example2.html">»</span> 2-1</a>
<a class="item2 href="example2.html">»</span> 2-2</a>
<a class="item2" href="example2.html">»</span> 2-3</a>
<a class="item2" href="example2.html">»</span> 2-4</a>
<a class="item2 href="example2.html">»</span> 2-5</a>
<a class="item2" href="example2.html">»</span> 2-6</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> Maschinengruppe3</a>
<div class="section">
<a class="item2" href="example2.html">»</span> 3-1</a>
<a class="item2 href="example2.html">»</span> 3-2</a>
<a class="item2" href="example2.html">»</span> 3-3</a>
<a class="item2" href="example2.html">»</span> 3-4</a>
<a class="item2 href="example2.html">»</span> 3-5</a>
<a class="item2" href="example2.html">»</span> 3-6</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> Maschinengruppe4</a>
<div class="section">
<a class="item2" href="example2.html">»</span> 4-1</a>
<a class="item2 href="example2.html">»</span> 4-2</a>
<a class="item2" href="example2.html">»</span> 4-3</a>
<a class="item2" href="example2.html">»</span> 4-4</a>
<a class="item2 href="example2.html">»</span> 4-5</a>
<a class="item2" href="example2.html">»</span> 4-6</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> Maschinengruppe5</a>
<div class="section">
<a class="item2" href="example2.html">»</span> 5-1</a>
<a class="item2 href="example2.html">»</span> 5-2</a>
<a class="item2" href="example2.html">»</span> 5-3</a>
<a class="item2" href="example2.html">»</span> 5-4</a>
<a class="item2 href="example2.html">»</span> 5-5</a>
<a class="item2" href="example2.html">»</span> 5-6</a>
</div>
<br>
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="2" id="menu" align="center" style="border:none" >
<td width=226>
branch</font></td></table>
<a class="item1" href="javascript:void(0)">»</span> glass industries</a>
<div class="section">
<a class="item2" href="example2.html">»</span> Glas1-1</a>
<a class="item2" href="example2.html">»</span> Glas1-2</a>
<a class="item2" href="example2.html">»</span> Glas1-3</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> soft drink industries</a>
<div class="section">
<a class="item2" href="example2.html">»</span> Getränke-1</a>
<a class="item2" href="example2.html">»</span> Getränke1-2</a>
<a class="item2" href="example2.html">»</span> Getränke1-3</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> building industries</a>
<div class="section">
<a class="item2" href="example2.html">»</span> Bau1-1</a>
<a class="item2" href="example2.html">»</span> Bau1-2</a>
<a class="item2" href="example2.html">»</span> Bau1-3</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> food industries</a>
<div class="section">
<a class="item2" href="example2.html">»</span> Lebensmittel1-1</a>
<a class="item2" href="example2.html">»</span> Lebensmittel1-2</a>
<a class="item2" href="example2.html">»</span> Lebensmittel1-3</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> chemicalindustries</a>
<div class="section">
<a class="item2" href="example2.html">»</span> Chemie1-1</a>
<a class="item2" href="example2.html">»</span> Chemie1-2</a>
<a class="item2" href="example2.html">»</span> Chemie1-3</a>
</div>
<a class="item1" href="javascript:void(0)">»</span> logisticindustries</a>
<div class="section">
<a class="item2" href="example2.html">»</span> Logistik1-1</a>
<a class="item2" href="example2.html">»</span> Logistik1-2</a>
<a class="item2" href="example2.html">»</span> Logistik1-3</a>
</div>
<br>
<a class="item1" href="javascript:void(0)">»</span> contact</a>
<div class="section">
<a class="item2" href="eng/ansprechpartner.html">»</span> contact partners</a>
<a class="item2 arrow" href="eng/sofindensieuns.html">»</span> So you can find us</a>
<a class="item2 arrow" href="eng/kontakt.html">»</span> contact formular</a>
<a class="item2 arrow" href="eng/airports.html">»</span> airports</a>
</div>
</td></tr></table>
<script type="text/javascript">
var dmx = new DropMenuX('menu1');
dmx.type = "vertical";
dmx.delay.show = 0;
dmx.delay.hide = 400;
dmx.position.levelX.left = 2;
dmx.init();
</script>
<p>
<center><img src="images/cad/traywender.jpg" width=80% height=30%></center>
<td valign="top" bgcolor="#e6e6e6" width="100%" height="440" style="border:solid 1px silver" >
<!-- beginn hauptinhaltstabelle--><table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr><td valign="top" width="100%" id="in">
<h2>The company</h2>
<u>Structure:</u>
<br>
- project Automation & Engineering GmbH
<br>
- project Service & Produktion GmbH
<center><img align=right src="images/firma.jpg" width=400 height=200></center>
<br>
<u>Our aim:</u>
<br>
The optimisation of your production
<br><br><br><br>
<br>
<img align="left" src="images/portalroboter/protalroboter1.jpg" width=20% height=15%>
<U>Our potential:</u>
<br>
110 experienced and technically skilled employees in the fields such as:
<br>
- electronics and electrical engineering
<br>
- mechanical and systems engineering
<br>
- servicing and maintenance
<p>
<U>Our philosophy:</u>
<br>
Long - term, successful cooperation with satisfied customers thorugh modern, forward -looking and innovative think and action.
<p>
<u>Year of establishment:</u>
<br>
1989
<p>
<U>Located in:</u>
<br>
Kranenburg bei Kleve in NRW
<p>
<MARQUEE ALIGN="center" BEHAVIOR="Scrollart" HEIGHT=Höhe WIDTH=Breite DIRECTION="Scrollrichtung" SCROLLAMOUNT=Schrittweite in Pixeln SCROLLDELAY=Pause in Millisekunden HSPACE=Horizontaler Abstand VSPACE=Vertikaler Abstand LOOP=50>
+++ Newsticker +++ Newsticker +++</MARQUEE>
<!-- ende inhalt-->
</td>
</tr>
</table><!--ende hauptinhaltstabelle-->
<tr>
<td class="fuss" ></td><td class="fuss" >::: project A&E GmbH ::: Im Hammereisen 42 ::: 47559 Kranenburg :::</td>
</tr></table></td>
</body></html>Das passende CSS Style Sheet:
Code
.dmx {
font: 13px tahoma;
}
.dmx .item1,
.dmx .item1:hover,
.dmx .item1-active,
.dmx .item1-active:hover {
padding: 5px 100px 3px 10px;
border-bottom: 1px solid silver;
background: #2781bb;
font: 13px arial;
color: #ffffff;
font-weight: none;
text-decoration: none;
display: block;
white-space: nowrap;
position: relative;
}
.dmx .item2,
.dmx .item2:hover,
.dmx .item2-active,
.dmx .item2-active:hover {
padding: 3px 8px 4px 8px;
font: 12px tahoma;
border-bottom: 1px solid silver;
color: #ffffff;
background: #ffffff;
font-weight: bold;
text-decoration: none;
display: block;
white-space: nowrap;
position: relative;
z-index: 500;
}
.dmx .item2 {
background: #2781bb;
}
.dmx .item2:hover,
.dmx .item2-active,
.dmx .item2-active:hover {
background: #ffffff;
color: #00747d;
}
.dmx .arrow,
.dmx .arrow:hover {
padding: 3px 16px 4px 8px;
}
.dmx .item2 img,
.dmx .item2-active img{
position: absolute;
top: 4px;
right: 1px;
border: 1;
color: #2781bb;
}
.dmx .section {
border: 1px solid silver;
position: absolute;
visibility: hidden;
z-index: -1;
}
.dmx .bottom,
.dmx .bottom:hover {
border-bottom: 1px solid silver;
}
/* html .dmx td { position: relative; } /* ie 5.0 fix */