nicht angemeldet
Hi Ingo.
Naja, allen Tipps zum Trotz habe ich jetzt wieder einen neuen Weg eingeschlagen. Ich bin dir sehr dankbar, dass du auf deiner Homepage unter Tipps und Tricks das Thema ansprichst.
Ich habe deinen Quelltext ein wenig verändert, so dass nun folgendes herauskam:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Dynamische Navigationsleiste</title>
<style type="text/css">
~~~~~~css
div#Tmenu {
width: 94%;
}
* html div#Tmenu {
width: 41.4em;
w\idth: 39.8em; /* IE 6 in standards-compliant mode */
}
div#Tmenu div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left;
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li {
margin-bottom: -0.4em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.65em; left: -0.4em;
}
* html ul#Navigation li ul {
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li ul li {
float: none;
display: block;
margin-top: 0.0em; margin-bottom: 0.2em;
background-color:#eee;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 7em;
font-family:Arial, Helvetica, sans-serif;
text-decoration: none; font-weight: bold;
padding: 0.23em 0.97em 0.17em 1.03em;
border: 1px solid #000;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 9.2em;
w\idth: 7em; /* IE 6 in standards-compliant mode */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
padding: 0.17em 1.03em 0.23em 0.97em;
border-color: #000;
background-color:#f90;
}
ul#Navigation li ul a:hover {
border-color: #000;
}
li a#aktuell {
}
ul#Navigation li ul span {
}
/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover ul {
display: block;
}
~~~~~~html
</style>
<!--[if IE]><script type="text/javascript">
[code lang=javascript] function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if(LI.firstChild) { // A (SPAN)
if(LI.firstChild.nextSibling) { // #text
if(LI.firstChild.nextSibling.nextSibling) { // UL ?
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
}
}
LI = LI.nextSibling;
}
while(LI);
}
function einblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "block";
this.firstChild.nextSibling.nextSibling.style.backgroundColor = "#eee";
}
function ausblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "none";
}
~~~~~~html
</script><![endif]-->
</head>
<body onload="hoverIE()">
<div id="Tmenu">
<ul id="Navigation">
<li><a id="aktuell" href="#Beispiel">Der Verein</a>
<ul>
<li><a href="#Beispiel">Vergangenheit</a></li>
<li><a href="#Beispiel">Gegenwart</a></li>
<li><a href="#Beispiel">Zukunft</a></li>
<li><a href="#Beispiel">Mitglieder</a></li>
<li><a href="#Beispiel">Saison</a></li>
<li><a href="#Beispiel">Tops / Flops</a></li>
<li><a href="#Beispiel">Bilder</a></li>
<li><a href="#Beispiel">Termine</a></li>
</ul>
</li>
<li><a href="#Beispiel">Interaktiv</a>
<ul>
<li><a href="#Beispiel">Kontakt</a></li>
<li><a href="#Beispiel">Links</a></li>
<li><a href="#Beispiel">Gästebuch</a></li>
<li><a href="#Beispiel">Board</a></li>
</ul>
</li>
<li><a href="#Beispiel">Homepage</a>
<ul>
<li><a href="#Beispiel">BugTracker</a></li>
<li><a href="#Beispiel">Admin-Tools</a></li>
<li><a href="#Beispiel">Impressum</a></li>
</ul>
</li>
<li><a href="#Beispiel">Home</a></li>
</ul>
<div></div>
</div>
</body>
</html>
Jaa, soweit klappt das ja, und ich hätte nur ein einziges Anliegen. Ich versuche nämlich gerade verzweifelt, das Menü in die Mitte des #Tmenu zu bekommen. Weder im html mit align="center" noch im CSS mit text-align:center; bekommen ich das hin. Haste ne Idee?
Ach ja - was suchen die ganzen \ in deinem CSS? Bspw "w\idth"?