ComputerBase Menü
Aktuelles

dynamische Navigationsleiste

C

~Chiller~

Gast
Ich habe ein Problem beim programmieren einer dynamischen Navigationsleiste.
Und zwar sind die dynamisch eingeblendeten Unterpunkte eine Zeile zu weit unten.
Ich stelle einfach mal den Link zu der Testseite und den dazugehörigen Quellcodeauszug rein und hoffe dass jemand eine Idee hat :cool_alt:

*klick*

PHP: 
   #fixiert_Navigation {
      position: absolute;
      top: 5em; left: 1em;
      border: 1px solid white;
      z-index:2;
   }

   #Navigation {
      width: 10em;
      margin: 0; padding: 0.4em;
      font-size:14px;
   }
   * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
      width: 11.6em;
      w\idth: 10em;
      padding-left: 0;
      padd\ing-left: 0.4em;
      font-size:14px;
   }
   #Navigation li {
      position: relativ;
      list-style: none;
      margin: 0.4em; padding: 0;
   }
     #Navigation li ul {
          position: absolute;
      left: 7.2em;
     }
   #navigation ul {
      display: none;
   }
   #navigation li:hover ul {
      display: block;
   }
   #Navigation a, #Navigation span, #Navigation h2 {
      display:block;
      padding: 0.2em;
      text-decoration: none; font-weight: bold;
      border: 1px solid white;
      border-left-color: white; border-top-color: white;
      color: black; background-color: white;
    }
   * html #Navigation a, * html #Navigation span, * html #Navigation h2 {
      width: 100%;    /* Breitenangabe fuer IE 5.x */
      w\idth: 8.8em;  /* Breitenangabe fuer IE 6 */
   }
   #Navigation a:hover, ul#Navigation span {
      border-color: white;
      border-left-color: black; border-top-color: white;
      color: black; background-color: white;
   }
   #Navigation h2 {
      font-size: 14px;
      margin: 1.1em 0 0;
      border-color: white;
      color: black; background-color: white;
   }

PHP: 
<div id="fixiert_Navigation">
   <ul id="Navigation">
      <li><a href="homepage.php">Home</a></li>

      <li><a href="#">Rubrik 1</a>
         <ul>
            <li><a href="#Beispiel">Beispiel</a></li>
            <li><a href="#Beispiel">Beispiel</a></li>
            <li><a href="#Beispiel">Beispiel</a></li>
         </ul>
      </li>

      <li><a href="#">Rubrik 2</a>
         <ul>
            <li><a href="#Beispiel">Beispiel</a></li>
            <li><a href="#Beispiel">Beispiel</a></li>
            <li><a href="#Beispiel">Beispiel</a></li>
         </ul>
      </li>

      <li><a href="#">Rubrik 3</a>
         <ul>
            <li><a href="#Beispiel">Beispiel</a></li>
            <li><a href="#Beispiel">Beispiel</a></li>
            <li><a href="#Beispiel">Beispiel</a></li>
            <li><a href="#Beispiel">Beispiel</a></li>
         </ul>
      </li>
   </ul>
</div>

Hilfe :freak:
 
Leider hast Du jetzt keine Datei hochgeladen, so dass man sich das jetzt anschaulich angucken könnte - wäre super, wenn Du das nachholen könntest.

Auf den ersten Blick tippe ich mal, dass Dir die fehlende padding- margin-angabe bei:

#Navigation li ul

zum Verhängnis wird. Dort einfach mal "margin: 0;" und "padding: 0;" ergänzen, könnte schon helfen
 
Danke schonmal aber hat das Problem nicht behoben sondern verschlimmert.
So sind die dynamisch eingeblendeten Elemente mitten in den immer sichtbaren "Überpunkten".

Anschauen kannst du dir das Problem doch bei dem Link der oben steht, hier nochmal:

*klick*
 
so ich bin jetzt ein ganzes Stück weiter, aber hab trotzdem ein Problem^^.
Ich habe mir hier das Navi geklaut.
Im Orginal siehts bei mir so aus.
Ganz normal sowohl im Firefox als auch im Inetexplorer 7.
Wenn ich es allerdings unverändert in meine Homepage übernehme siehts so aus. Im Firefox wieder normal aber im Inetexplorer 7 falsch

Kann mir jemand helfen bitte???
Ich mein da sind ja lauter umgehungen mit drin die bei dem Orginal funktionieren.
Wieso nicht 1:1 übernommen auf meiner Seite :(

Codes:
PHP: 
	body {
		color: white;
		background-image:url(schwarz.jpg); background-attachment:fixed;
		font-size: 100.01%;
		font-family: Helvetica,Arial,sans-serif;
		margin: 0; padding: 1em;
    		min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
	}

	#fixiert_Navigation {
		position: absolute;
		top: 5em; left: 1em;
		border: 1px solid white;
		z-index:2;
	}
  	html>body #fixiert_Navigation {  /* nur fuer moderne Browser! */
    		position: fixed;
  	}
	#fixiert_Fusszeile {
		position: absolute;
		bottom: 0; left: 1em; right: 1em;
		border: 1px solid white;
		z-index:1;
		background-color:#000000;	
	}
  	html>body #fixiert_Fusszeile {  /* nur fuer moderne Browser! */
  		position: fixed;
	}
	#fixiert_Info {
		position: absolute;
		top: 5em; right: 1em;
		border: 1px solid white;
		z-index:1;
	}
  	html>body #fixiert_Info {  /* nur fuer moderne Browser! */
    		position: fixed;
  	}
	#fixiert_Überschrift {
		position: absolute;
		top: 0; left: 1em; right: 1em;
		border: 1px solid white;
		z-index:2;
		background-color:#000000;
	}
  	html>body #fixiert_Überschrift {  /* nur fuer moderne Browser! */
    		position: fixed;
  	}

	h1 {
		width: 100%;
		font-size: 1.5em;
		margin: 0; padding: 0.3em;
		text-align: center;
	}

/* Vertikale Navigation */
  div#Tmenu {
    font-size: 94%;
    width: 10em;
    padding: 0.8em;
    border: 1px solid white;
    background-color: #eee;
  }
  * html div#Tmenu {
    width: 11.3em;
    w\idth: 10em;  /* (IE 6 in standards-compliant mode) */
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {
    margin-right:1.5em;  /* Platz fuer Link-Verbreiterung im IE reservieren */
    margin-bottom:0;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 0; left: 9.3em;
  }
  *:first-child+html ul#Navigation li ul {
    left: 9em;  /* (IE 7 in standards-compliant mode) */
  }
  ul#Navigation li ul li {
    margin: 0; padding-left: 1.4em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 7em;
    font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
    text-decoration: none; font-weight: bold;
    padding: 0.2em 1em;
    border: 1px solid #900;
    border-left-color: #c96; border-top-color: #c96;
    color: white; background-color: #c00;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 9em;
    w\idth: 7em;  /* (IE 6 in standards-compliant mode) */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
    border-color: #c96;
    border-left-color: #900; border-top-color: #900;
    background-color: #e00;
  }
  li a#aktuell {
    border-right-color: #300; border-bottom-color: #300;
    background-color: #900;
  }
  ul#Navigation li ul span {
    border-color: #900; border-left-color: #c96;
    color: #900; background-color: white;
  }
  ul#Navigation li a:active {
    color: black; background-color: #f00;
  }

/* dynamisches Ein-/Ausblenden */
  ul#Navigation li ul {
    display: none;
  }
  ul#Navigation li:hover>ul {
    display: block;
  }
  ul#Navigation>li:hover>a {
    width: 8.2em;
    background: #e00 url(pfeil.gif) no-repeat center right;
  }

/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
  * html ul#Navigation li.hoverIE {
    margin-right:0;  /* reservierten Platz freigeben */
    margin-bottom:-1.15em;  /* Fehlerkorrektur, ggfls. anpassen */
  }
  * html ul#Navigation li.hoverIE ul {
    display: block;
  }
  * html ul#Navigation li .hoverIE {
    width: 10.3em;
    w\idth: 8.2em;  /* (IE 6 in standards-compliant mode) */
    background: #e00 url(pfeil.gif) no-repeat center right;
  }

	div#Info {
		font-size: 0.9em;
		width: 12em;
		margin: 0; padding: 0 1em;
	}
	div#Info h2 {
		font-size: 1.33em;
		margin: 0.2em 0.5em;
	}
	div#Info p {
		font-size: 1em;
		margin: 0.5em;
	}

	div#Inhalt {
		margin: 4em 14em 3em 14em;
		padding: 0 1em;
		border: 1px solid white;
		display: block;
	}
	* html div#Inhalt {
		height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
	}
	div#Inhalt h2 {
		font-size: 1.2em;
		margin: 0.2em 0;
	}
	div#Inhalt p {
		font-size: 1em;
		margin: 1em 0;
	}

  	p#Fusszeile {
		width: 100%;
		clear: both;
		font-size: 0.9em;
		margin: 0;
		padding: 0.1em;
		text-align: center;
  	}

</style>
</head>
PHP: 
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="formate.css">

<!--[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() {
    	this.className="hoverIE"; this.firstChild.className="hoverIE";
}
function ausblenden() {
    	this.className=""; this.firstChild.className="";
}

window.onload=hoverIE;
}
</script>
<![endif]-->

<body>

<div id="fixiert_Überschrift">
	<h1><u><b>Überschrift</b></u></h1>
</div>

<div id="fixiert_Info">
	<div id="Info">
  		<h2>Info</h2>

		<p><b><u>xx.xx.xxxx</u></b></p>
		<p>Infoboxinhalt</p>
	</div>
</div>

<div id="fixiert_Fusszeile">
	<p id="Fusszeile">
		Die Homepage ist seit dem xx.xx.xxxx online.
	</p>
</div>

<div id="fixiert_Navigation">
	<div id="Tmenu">
  		<ul id="Navigation">
    			<li><a id="aktuell" href="#Beispiel">Seite 1</a>
      				<ul>
        				<li><span>aktuelle Seite</span></li>
        				<li><a href="#Beispiel">Seite 1b</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 id="Scrollbereich">
	<div id="Inhalt">
		<h2><center><b><u>Test</u></b></center></h2>
		<br>
		<hr>
		<br>
		<p>Test</p>
		<p>Test</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>
		<p>Länge um Fixbereiche aufzuzeigen</p>

	</div>
</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

Mondgesang
HTML/CSS: Leerer Raum rechts neben Navigation nicht wegzubekommen
Antworten
5
Aufrufe
598
netzgestaltung
netzgestaltung
Mondgesang
HTML Navigation: lieber als Liste oder als <div>?
Antworten
18
Aufrufe
1.516
Reisegewohnheit
R
RAMSoße
Navigationsleiste fixieren - html css?
Antworten
8
Aufrufe
4.562
RAMSoße
RAMSoße
D
Bootstrap-Navigationsleiste - kein öffnen der Links
Antworten
10
Aufrufe
3.092
Dsimon24
D
Ch0p
Samsung Galaxy Note 9, Navigationsleiste nicht Ausblendbar
Antworten
13
Aufrufe
4.050
Ch0p
Ch0p
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 158 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz