Menü mit Untermenü geht nicht
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ahnung
anzeigen
artikel
beginnen
beispiel
beitrag
explorer
grundlage
hilfe
implementierung
neumodischen schnickschnack
opus
quelltext
sache
verwendete methode
-
Hallo,
ich habe ein Problem mit meinem Men?. Ich habe ein Men? gebastelt, dass ein aufploppendes Untermen? enth?lt. Ein Beispiel ist hier zu sehen: http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm
Den Code f?r dieses Men? habe ich als Grundlage benutzt und umgebaut. Jetzt funktioniert im IE alles, bis auf die Hovereffekte beim ?berfahren eines Untermen?links.
Doch als ob das nicht schon reichen w?rde funktioniert das Men? mit allen anderen Browsern ?berhaupt nicht.
Ich habe keine Ahnung mehr wie ich das machen kann, dass es geht. Das einzige was die anderen Browser anzeigen ist der Hovereffekt beim ?berfahren eines Oberpunktes. Dazu stimmt auch die Positionierung nicht.
Hier habe ich mal den Quelltext. Ich w?re sehr dankbar f?r Hilfe, da ich absolut nicht mehr weiter wei?.
Benni
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Men?</title>
<style type="text/css">
body {
background-color:#000000;
}
div#Rahmen {
width: 820px;
height: 45px;
padding-left: 0px; padding-top: 10px;
border: 0px;
margin: 0px;
background-image: url(menukomplett/menu/menubg.png);
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 820px;
w\idth: 820px;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin-left: 5px; margin-right: 5px; padding: 0;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 0; left: 0;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: 0;
lef\t: 0;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 2px;
margin: 0;
border-top-color: black;
border-top-width: 1px;
}
/* Buttons Anfang */
li#home a, li#home span {
display: block;
width: 81px; /* Breite den in li enthaltenen Elementen zuweisen */
height: 35px;
padding: 0;
text-decoration: none; font-weight: bold;
border: 0;
color: maroon; background-image: url(menukomplett/menu/home.jpg);
}
li#aktuelles a, li#aktuelles span {
display: block;
width: 79px; /* Breite den in li enthaltenen Elementen zuweisen */
height: 35px;
padding: 0;
text-decoration: none; font-weight: bold;
border: 0;
color: maroon; background-image: url(menukomplett/menu/aktuelles.jpg);
}
li#musik a, li#musik span {
display: block;
width: 80px; /* Breite den in li enthaltenen Elementen zuweisen */
height: 35px;
padding: 0;
text-decoration: none; font-weight: bold;
border: 0;
color: maroon; background-image: url(menukomplett/menu/musik.jpg);
}
li#porsche a, li#porsche span {
display: block;
width: 80px; /* Breite den in li enthaltenen Elementen zuweisen */
height: 35px;
padding: 0;
text-decoration: none; font-weight: bold;
border: 0;
color: maroon; background-image: url(menukomplett/menu/porsche.jpg);
}
li#links a, li#links span {
display: block;
width: 80px; /* Breite den in li enthaltenen Elementen zuweisen */
height: 35px;
padding: 0;
text-decoration: none; font-weight: bold;
border: 0;
color: maroon; background-image: url(menukomplett/menu/links.jpg);
}
li#gastebuch a, li#gastebuch span {
display: block;
width: 80px; /* Breite den in li enthaltenen Elementen zuweisen */
height: 35px;
padding: 0;
text-decoration: none; font-weight: bold;
border: 0;
color: maroon; background-image: url(menukomplett/menu/gastebuch.jpg);
}
li#version a, li#version span {
display: block;
width: 80px; /* Breite den in li enthaltenen Elementen zuweisen */
height: 35px;
padding: 0;
text-decoration: none; font-weight: bold;
border: 0;
color: maroon; background-image: url(menukomplett/menu/version.jpg);
}
li#awards a, li#awards span {
display: block;
width: 80px; /* Breite den in li enthaltenen Elementen zuweisen */
height: 35px;
padding: 0;
text-decoration: none; font-weight: bold;
border: 0;
color: maroon; background-image: url(menukomplett/menu/awards.jpg);
}
li#ubermich a, li#ubermich span {
display: block;
width: 80px; /* Breite den in li enthaltenen Elementen zuweisen */
height: 35px;
padding: 0;
text-decoration: none; font-weight: bold;
border: 0;
color: maroon; background-image: url(menukomplett/menu/ubermich.jpg);
}
/* Buttons Ende */
/* Buttons Besonderheiten Anfang */
* html ul#Navigation a, * html ul#Navigation span {
width: 80px; /* Breite nach altem MS-Boxmodell f?r IE 5.x */
w\idth: 80px; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
* html li#home a, * html li#home span {
width: 81px; /* Breite nach altem MS-Boxmodell f?r IE 5.x */
w\idth: 81px; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
* html li#ubermich a, * html li#ubermich span {
width: 79px; /* Breite nach altem MS-Boxmodell f?r IE 5.x */
w\idth: 79px; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
/* Buttons Besonderheiten Ende */
/* Untermen? Anfang */
li a#jahr2006 { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/jahr2006.jpg);
width: 80px; height: 22px;
}
li a#jahr2005 { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/jahr2005.jpg);
width: 80px; height: 32px;
}
li a#oomph { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/oomph.jpg);
width: 80px; height: 32px;
}
li a#rammstein { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/rammstein.jpg);
width: 80px; height: 22px;
}
li a#inextremo { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/inextremo.jpg);
width: 80px; height: 22px;
}
li a#subway { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/subway.jpg);
width: 80px; height: 22px;
}
li a#staticx { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/staticx.jpg);
width: 80px; height: 22px;
}
li a#lp { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/lp.jpg);
width: 80px; height: 22px;
}
li a#lb { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/lb.jpg);
width: 80px; height: 22px;
}
li a#nirvana { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/nirvana.jpg);
width: 80px; height: 22px;
}
li a#geschichte { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/geschichte.jpg);
width: 80px; height: 32px;
}
li a#modelle { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/modelle.jpg);
width: 80px; height: 22px;
}
li a#gallerie { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/gallerie.jpg);
width: 80px; height: 22px;
}
li a#allgemein { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/allgemein.jpg);
width: 80px; height: 32px;
}
li a#freunde { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/freunde.jpg);
width: 80px; height: 22px;
}
li a#games { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/games.jpg);
width: 80px; height: 22px;
}
li a#html { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/html.jpg);
width: 80px; height: 22px;
}
li a#sonstiges { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/sonstiges.jpg);
width: 80px; height: 22px;
}
li a#version4 { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/version4.jpg);
width: 80px; height: 32px;
}
li a#version3 { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/version3.jpg);
width: 80px; height: 22px;
}
li a#version2 { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/version2.jpg);
width: 80px; height: 22px;
}
li a#version1 { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-image: url(menukomplett/untermenu/version1.jpg);
width: 80px; height: 22px;
}
/* Untermen? Ende */
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
/* Hovereffekte Anfang */
li#home a:hover, li#home span {
color: white; background-image: url(menukomplett/menu/homehover.jpg);
margin-left: 0px; margin-right: 0px; padding: 0px;
}
li#ubermich a:hover, li#ubermich span {
color: white; background-image: url(menukomplett/menu/ubermichhover.jpg);
margin-left: 0px; margin-right: 0px; padding: 0px;
}
li#aktuelles a:hover, li#aktuelles span {
color: white; background-image: url(menukomplett/menu/aktuelleshover.jpg);
margin-left: 0px; margin-right: 0px; padding: 0px;
}
li#musik a:hover, li#musik span {
color: white; background-image: url(menukomplett/menu/musikhover.jpg);
margin-left: 0px; margin-right: 0px; padding: 0px;
}
li#porsche a:hover, li#porsche span {
color: white; background-image: url(menukomplett/menu/porschehover.jpg);
margin-left: 0px; margin-right: 0px; padding: 0px;
}
li#links a:hover, li#links span {
color: white; background-image: url(menukomplett/menu/linkshover.jpg);
margin-left: 0px; margin-right: 0px; padding: 0px;
}
li#gastebuch a:hover, li#gastebuch span {
color: white; background-image: url(menukomplett/menu/gastebuchhover.jpg);
margin-left: 0px; margin-right: 0px; padding: 0px;
}
li#version a:hover, li#version span {
color: white; background-image: url(menukomplett/menu/versionhover.jpg);
margin-left: 0px; margin-right: 0px; padding: 0px;
}
li#awards a:hover, li#awards span {
color: white; background-image: url(menukomplett/menu/awardshover.jpg);
margin-left: 0px; margin-right: 0px; padding: 0px;
}
/* Hovereffekte Ende */
</style>
<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 = "silver";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
</head>
<body>
<div id="Rahmen"><ul id="Navigation">
<li id="home"><a href="home.html"></a></li>
<li id="ubermich"><a href="ubermich.html"></a></li>
<li id="aktuelles"><a href="#aktuelles.html"></a></li>
<ul>
<li><a href="aktuelles.html"></a></li>
<li><a id="jahr2005" href="jahr2005.html"></a></li>
<li><a id="jahr2006" href="jahr2006.html"></a></li>
</ul>
<li id="musik"><a href="musik.html"></a></li>
<ul>
<li><a href="musik.html"></a></li>
<li><a id="oomph" href="oomph.html"></a></li>
<li><a id="rammstein" href="rammstein.html"></a></li>
<li><a id="inextremo" href="inextremo.html"></a></li>
<li><a id="subway" href="subway.html"></a></li>
<li><a id="staticx" href="staticx.html"></a></li>
<li><a id="lp" href="lp.html"></a></li>
<li><a id="lb" href="lb.html"></a></li>
<li><a id="nirvana" href="nirvana.html"></a></li>
</ul>
<li id="porsche"><a href="porsche.html"></a></li>
<ul>
<li><a href="porsche.html"></a></li>
<li><a id="geschichte" href="geschichte.html"></a></li>
<li><a id="modelle" href="modelle.html"></a></li>
<li><a id="gallerie" href="gallerie.html"></a></li>
</ul>
<li id="links"><a href="links.html"></a></li>
<ul>
<li><a href="links.html"></a></li>
<li><a id="allgemein" href="allgemein.html"></a></li>
<li><a id="freunde" href="freunde.html"></a></li>
<li><a id="games" href="games.html"></a></li>
<li><a id="html" href="html.html"></a></li>
<li><a id="sonstiges" href="sonstiges.html"></a></li>
</ul>
<li id="gastebuch"><a href="gastebuch.html"></a></li>
<li id="version"><a href="version.html"></a></li>
<ul>
<li><a href="version.html"></a></li>
<li><a id="version4" href="version4.html"></a></li>
<li><a id="version3" href="version3.html"></a></li>
<li><a id="version2" href="version2.html"></a></li>
<li><a id="version1" href="version1.html"></a></li>
</ul>
<li id="awards"><a href="awards.html"></a></li>
</ul><div></div></div>
</body>
</html>
Beitrag ge?ndert am 15.02.2006 16:48 von benni3005 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Les doch bitte den ganzen Artikel auf SELFHTML:
"Beachten Sie:
Testen Sie eine solche Navigationsleiste in m?glichst vielen Browsern, da die hier verwendete Methode einige Browser ?berfordern k?nnte!
Um ein dynamisches Einblenden der Unternavigation auch im Internet Explorer 5 und 6 und anderen Browsern ohne ausreichende CSS-Implementierung zu erm?glichen, bleibt Ihnen derzeit nur eine Realisierung ?ber JavaScript. Es ist jedoch sinnvoll, dies mit der hier gezeigten M?glichkeit zu kombinieren."
Solche Layouts setzen immer vorraus, dass du einen modernen Browser benutzt, in meinem Opera l?ufts (in meinem FF auch, daf?r im IE aber nicht).
Wenn es in allen Browsern laufen soll, dann l?sst du solchen neumodischen Schnickschnack besser noch weg und nimmst JavaScript (siehe oben).
H2O -
Ich hab das gelesen und wenn du dir den Quelltext anschaust siehst du auch, dass ich ein Javascript eingebaut habe. Zudem hab ichs auch mit den neuesten Browsern getestet. Aber es geht bei mir nur im IE.
Das Problem an der Sache liegt daran, dass die Site komplett auf diesem Men? aufbaut und wenn ich ein anderes nehmen muss kann ich nochmal ganz von vorn beginnen.
Aber wie k?nnte ich das denn mit Javascript machen? Ich hab davon leider keine Ahnung. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage