nicht angemeldet
Dynamische Navigationsleiste verschiebt Rest der Seite
Hallo,
ich habe eine dynamische Navigationsleiste, ein Ausklappmenü, erstellt (ok, nach dem Code eines anderen :), welche zwar funktioniert, aber leider beim Ausklappen immer den Rest der Webseite verschiebt, was ich natürlich nicht will. Was kann ich tun?
Hier der Code der Seite:
____________________________________________________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Dynamische Navigationsleiste</title>
<style type="text/css">
div#Tmenu {
font-size: 12px;
width: 974px;
height:19px;
margin: 0px; padding: 0px;
background-color: #eee;
}
div#Tmenu div {
clear: left;
}
ul#Navigation {
background-color:#ff0000;
margin: 0px; padding: 0px;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left;
position: relative;
margin: 0px; padding: 0;
}
* html ul#Navigation li {
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: relative;
top: 0px; left: 0px;
}
* html ul#Navigation li ul {
left: 0px;
lef\t: 0px;
}
ul#Navigation li ul li {
float: none;
display: block;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 122px;
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
text-decoration: none; font-weight: bold;
border: 1px solid #600;
color: white; background-color: #c00;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 90px;
w\idth: 90px; /* IE 6 in standards-compliant mode */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {padding: 0px; background-color: #e00;}
ul#Navigation li ul a:hover {}
li a#aktuell {background-color: #00f;} /*aktueller Oberpunkt*/
ul#Navigation li ul span {color: #900; background-color: white;}
ul#Navigation li a:active, ul#Navigation li:hover a:active {color: #ff00ff; background-color: #f00;}
/*------------------------------------------------------------------------------------------*/
/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover ul {
display: block;
background: #eee;
}
</style>
<!--[if IE]>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "#eee";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
<![endif]-->
</head>
<body>
<table width="953" border="0">
<tr>
<td><div id="Tmenu">
<ul id="Navigation">
<li><a id="aktuell" href="#Beispiel">Seite 1 ganz langer Link</a>
<ul>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 1b ganz langer Link</a></li>
<li><a href="#Beispiel">Seite 1c</a></li>
<li><a href="#Beispiel">Seite 1d</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 2</a></li>
<li><a href="#Beispiel">Seite 3</a>
<ul>
<li><a href="#Beispiel">Seite 3a</a></li>
<li><a href="#Beispiel">Seite 3b</a></li>
<li><a href="#Beispiel">Seite 3c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 4</a></li>
</ul>
<div></div>
</div></td>
</tr>
<tr>
<td bgcolor="#0000FF"> </td>
</tr>
</table>
</body>
</html>
____________________________________________________________________
Ich habe auch schon versucht, das ganze mit Javascript zu lösen, allerdings scheinen davon einige abzuraten, außerdem habe ich dazu noch nichts gefunden. Und mit css scheint es nur so zu gehen..?
Viele Grüße,
Mira
-
Hi,
ich habe eine dynamische Navigationsleiste, ein Ausklappmenü, erstellt (ok, nach dem Code eines anderen :),
ja der kommt mir bekannt vor. ;-)
welche zwar funktioniert, aber leider beim Ausklappen immer den Rest der Webseite verschiebt, was ich natürlich nicht will. Was kann ich tun?
Du kannst Dich über den Unterschied zwischen relativer und absoluter Positionierung informieren und/oder diese Regeln
ul#Navigation li ul {
margin: 0; padding: 0;
position: relative;
top: 0px; left: 0px;
}
* html ul#Navigation li ul {
left: 0px;
lef\t: 0px;
}mit denen auf meiner Seite abgleichen.
Ich habe auch schon versucht, das ganze mit Javascript zu lösen, allerdings scheinen davon einige abzuraten, außerdem habe ich dazu noch nichts gefunden. Und mit css scheint es nur so zu gehen..?
Nicht im IE... Ist Dir gar nicht aufgefallen, dass Du ein kleines Javascript für diesen Browser mit kopiert hast?
freundliche Grüße
Ingo-
Hallo Ingo,
ja der kommt mir bekannt vor. ;-)
*GG* ist mir eine Ehre. :]
mit denen auf meiner Seite abgleichen.
die Positionierungsart habe ich geändert und mir nichts dabei gedacht. Wird mir wohl eine Lehre sein. Jetzt klappt es!
Nicht im IE... Ist Dir gar nicht aufgefallen, dass Du ein kleines Javascript für diesen Browser mit kopiert hast?
doch, ist mir aufgefallen und ich weiss auch um die ganze notwendige extra-für-den-IE-Herumprogrammiererei. Ich meinte eigentlich, ein Menü ausschliesslich mit Javascript. Habe ich wohl nicht gut ausgedrückt.
So, an dieser Stelle ein sehr großes Kompliment und vielen Dank an dich, denn der Code und das Tutorial waren das beste und v.a. einfachste, was ich bisher gefunden habe.
Viele liebe Grüße,
Iris
-