Klappmenü = Fehler?

Dieses Thema im Forum "Web Page Design" wurde erstellt von eisman, 20.08.2006.

  1. eisman

    eisman Thread Starter MacUser Mitglied

    Beiträge:
    1.891
    Zustimmungen:
    55
    MacUser seit:
    22.01.2005
    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

    Beiträge:
    1.364
    Zustimmungen:
    47
    MacUser seit:
    09.11.2005
    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

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

    eisman Thread Starter MacUser Mitglied

    Beiträge:
    1.891
    Zustimmungen:
    55
    MacUser seit:
    22.01.2005
    @ThaHammer
    was fehlt da??

    eisman
    edith: alles klaro, ich danke euch

    eisman
     
  5. eisman

    eisman Thread Starter MacUser Mitglied

    Beiträge:
    1.891
    Zustimmungen:
    55
    MacUser seit:
    22.01.2005
    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

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

    eisman Thread Starter MacUser Mitglied

    Beiträge:
    1.891
    Zustimmungen:
    55
    MacUser seit:
    22.01.2005
    {
    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

    Beiträge:
    3.276
    Zustimmungen:
    13
    MacUser seit:
    01.06.2004
    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...

Diese Seite empfehlen