Klappmenü = Fehler?

  1. eisman

    eisman Thread Starter MacUser Mitglied

    Mitglied seit:
    22.01.2005
    Beiträge:
    1.902
    Zustimmungen:
    56
    hallo zusammen,
    vieleicht kann mir einer helfen. Ich finde den Fehler nicht,woran es
    liegt, das an den zb Menü_oberpunkt 4 der Rollover hinhaut,
    während dessen bei den anderen Menü_oberpunkte 1-3 nicht funktioniert.
    HTML:
    <title>hk photografie</title>
    <script type="text/javascript">
    <!--
    window.onload=zeigen;
    function zeigen(id) {
    	for (var i = 1; i<=5; i++) {
    		if (document.getElementById("submenue"+i)) {document.getElementById("submenue"+i).style.display="none";}
    	}
    if (document.getElementById(id)) {document.getElementById(id).style.display="block";}
    }
    //-->
    </script>
    <style type="text/css">
    
    body 
    {
        background-image: url(navi.gif);
    	margin-left: 0%;
    	margin-top: 10%;
    	font-size:	 12px;
    	font-weight: lighter;
    	font-weight: normal;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    ul, li { margin:0; padding:0; list-style-type:none; }
    ul#menue { width:140px; }
    ul#menue li a 
    {
        margin: 		-1px;
    	height: 		25px;
    	line-height: 	25px;
    	text-align: 	center;
    	border: 		1px solid #cccccc;
    	background: 	#6e8b82;
    	display:		block;
    	color:			#cccccc;
    	text-decoration:none;
    }
    ul#menue li a + ul.submenue{ display: none; }
    ul#menue li a:focus + ul.submenue { display: block;}
    ul#submenue1 li a, ul#submenue2 li a, ul#submenue3 li a, ul#submenue4 li a:hover{ background: #6e8b82; /* IE */ }
    ul#submenue1 li a, ul#submenue2 li a, ul#submenue3 li a, ul#submenue4 li a{ background: #506660 /* IE */ }
    </style>
    
    </head>
    
    <body>
    <ul id="menue">
    	<li><a href="#" onclick="javascript:zeigen('submenue1')">Oberpunkt 01</a>
    		<ul id="submenue1" class="submenue">
    			<li><a href="#">Untermenü 1.a</a></li>
    			<li><a href="#">Untermenü 1.b</a></li>
    			<li><a href="#">Untermenü 1.c</a></li>
    			<li><a href="#">Untermenü 1.d</a></li>
    		</ul>
      </li>	
    			
    	<li><a href="#" onclick="javascript:zeigen('submenue2')">Oberpunkt 02</a>
    		<ul id="submenue2" class="submenue">
    			<li><a href="#">Unterpunkt 2.a</a></li>
    			<li><a href="#">Unterpunkt 2.b</a></li>
    			<li><a href="#">Unterpunkt 2.c</a></li>
    		</ul>
    	</li>	
    
    	<li><a href="#" onclick="javascript:zeigen('submenue3')">Oberpunkt 03</a>
    		<ul id="submenue3" class="submenue">
    			<li><a href="#">Unterpunkt 3.a</a></li>
    			<li><a href="#">Unterpunkt 3.b</a></li>
    			<li><a href="#">Unterpunkt 3.c</a></li>
    			<li><a href="#">Unterpunkt 3.d</a></li>
    		</ul>
    	</li>
    
      <li><a href="#" onclick="javascript:zeigen('submenue4')">Oberpunkt 04</a>
    		<ul id="submenue4" class="submenue">
    			<li><a href="#">Unterpunkt 4.a</a></li>
    			<li><a href="#">Unterpunkt 4.b</a></li>
    			<li><a href="#">Unterpunkt 4.c</a></li>
    		</ul>
      </li>
    </ul>
    </body>
    
    </html>
    
    ich danke euch für die Fehlersuche

    eisman
     
  2. kazu

    kazu MacUser Mitglied

    Mitglied seit:
    09.11.2005
    Beiträge:
    1.366
    Zustimmungen:
    47
    Frag mich nicht warum, aber so gehts:

    HTML:
    <title>hk photografie</title>
    <script type="text/javascript">
    <!--
    window.onload=zeigen;
    function zeigen(id) {
    	for (var i = 1; i<=5; i++) {
    		if (document.getElementById("submenue"+i)) {document.getElementById("submenue"+i).style.display="none";}
    	}
    if (document.getElementById(id)) {document.getElementById(id).style.display="block";}
    }
    //-->
    </script>
    <style type="text/css">
    
    body 
    {
        background-image: url(navi.gif);
    	margin-left: 0%;
    	margin-top: 10%;
    	font-size:	 12px;
    	font-weight: lighter;
    	font-weight: normal;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    ul, li { margin:0; padding:0; list-style-type:none; }
    ul#menue { width:140px; }
    ul#menue li a 
    {
        margin: 		-1px;
    	height: 		25px;
    	line-height: 	25px;
    	text-align: 	center;
    	border: 		1px solid #cccccc;
    	background: 	#6e8b82;
    	display:		block;
    	color:			#cccccc;
    	text-decoration:none;
    }
    ul#menue li a + ul.submenue{ display: none; }
    ul#menue li a:focus + ul.submenue { display: block;}
    ul#submenue1 li a:hover{ background: #6e8b82; /* IE */ }
    ul#submenue1 li a{ background: #506660 /* IE */ }
    ul#submenue2 li a:hover{ background: #6e8b82; /* IE */ }
    ul#submenue2 li a{ background: #506660 /* IE */ }
    ul#submenue3 li a:hover{ background: #6e8b82; /* IE */ }
    ul#submenue3 li a{ background: #506660 /* IE */ }
    ul#submenue4 li a:hover{ background: #6e8b82; /* IE */ }
    ul#submenue4 li a{ background: #506660 /* IE */ }
    </style>
    
    </head>
    
    <body>
    <ul id="menue">
    	<li><a href="#" onclick="javascript:zeigen('submenue1')">Oberpunkt 01</a>
    		<ul id="submenue1" class="submenue">
    			<li><a href="#">Untermenü 1.a</a></li>
    			<li><a href="#">Untermenü 1.b</a></li>
    			<li><a href="#">Untermenü 1.c</a></li>
    			<li><a href="#">Untermenü 1.d</a></li>
    		</ul>
      </li>	
    			
    	<li><a href="#" onclick="javascript:zeigen('submenue2')">Oberpunkt 02</a>
    		<ul id="submenue2" class="submenue">
    			<li><a href="#">Unterpunkt 2.a</a></li>
    			<li><a href="#">Unterpunkt 2.b</a></li>
    			<li><a href="#">Unterpunkt 2.c</a></li>
    		</ul>
    	</li>	
    
    	<li><a href="#" onclick="javascript:zeigen('submenue3')">Oberpunkt 03</a>
    		<ul id="submenue3" class="submenue">
    			<li><a href="#">Unterpunkt 3.a</a></li>
    			<li><a href="#">Unterpunkt 3.b</a></li>
    			<li><a href="#">Unterpunkt 3.c</a></li>
    			<li><a href="#">Unterpunkt 3.d</a></li>
    		</ul>
    	</li>
    
      <li><a href="#" onclick="javascript:zeigen('submenue4')">Oberpunkt 04</a>
    		<ul id="submenue4" class="submenue">
    			<li><a href="#">Unterpunkt 4.a</a></li>
    			<li><a href="#">Unterpunkt 4.b</a></li>
    			<li><a href="#">Unterpunkt 4.c</a></li>
    		</ul>
      </li>
    </ul>
    </body>
    
    </html>
    Ich bin in CSS noch nicht allzu firm, irgendwie scheint aber bei Deiner Auflistung, was von dem Rollover betroffen werden soll (ul#submenue1 ul#submenue2...), nur das letzte in der Liste anzukommen... Syntaxfehler?
     
  3. ThaHammer

    ThaHammer MacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    Ja im css fehlen ein paar ;
     
  4. eisman

    eisman Thread Starter MacUser Mitglied

    Mitglied seit:
    22.01.2005
    Beiträge:
    1.902
    Zustimmungen:
    56
    @ThaHammer
    was fehlt da??

    eisman
    edith: alles klaro, ich danke euch

    eisman
     
  5. eisman

    eisman Thread Starter MacUser Mitglied

    Mitglied seit:
    22.01.2005
    Beiträge:
    1.902
    Zustimmungen:
    56
    habe aber noch ein kleines Problem,
    die Links sind immer mit mit einem Rahmen versehen,nun
    ist meine Frage: wie bekomme ich den Border so das
    nur jeweils oben und unten die Rahmenfarbe zu sehen ist.
    {
    margin: -1px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border: 1px solid #cccccc;
    background: #6e8b82;
    display: block;
    color: #cccccc;
    text-decoration:none;
    }

    eisman
     
  6. Zieger

    Zieger MacUser Mitglied

    Mitglied seit:
    15.04.2006
    Beiträge:
    261
    Zustimmungen:
    28
    border-top-style: solid;
    border-top-color: #cccccc;
    border-bottom-style: solid;
    border-bottom-color: #cccccc;
     
  7. eisman

    eisman Thread Starter MacUser Mitglied

    Mitglied seit:
    22.01.2005
    Beiträge:
    1.902
    Zustimmungen:
    56
    {
    margin: -1px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border:1pt solid #cccccc;
    border-left-color:#00ff00;
    border-right-color:#00ff00;
    border-width: thin;
    background: #6e8b82;
    display: block;
    color: #cccccc;
    text-decoration:none;
    }
    @Ziegler
    brauchte nur etwas länger zu recherieren, und man bekommt
    es bei CSS4you vor die Nase gesetzt.
    Brauchte nur die rechte und Linke Randlinienen farblich verändern

    Trotzdem Danke

    eisman
     
  8. ThaHammer

    ThaHammer MacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    Code:
    }
    ul#menue li a + ul.submenue{ display: none; }
    ul#menue li a:focus + ul.submenue { display: block;}
    ul#submenue1 li a:hover{ background: #6e8b82; /* IE */ }
    ul#submenue1 li a{ background: #506660 /* IE */ }
    ul#submenue2 li a:hover{ background: #6e8b82; /* IE */ }
    ul#submenue2 li a{ background: #506660 /* IE */ }
    ul#submenue3 li a:hover{ background: #6e8b82; /* IE */ }
    ul#submenue3 li a{ background: #506660 /* IE */ }
    ul#submenue4 li a:hover{ background: #6e8b82; /* IE */ }
    ul#submenue4 li a{ background: #506660 /* IE */ }
    </style>
    
    hier:
    ul#submenue1 li a{ background: #506660 /* IE */ }
    ul#submenue2 li a{ background: #506660 /* IE */ }
    ul#submenue3 li a{ background: #506660 /* IE */ }
    ul#submenue4 li a{ background: #506660 /* IE */ }

    zum Beispiel!
     
Die Seite wird geladen...