Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Hilfe bei drop-down Menu“

ackermaennchen

Normalo

Teammitglied
Ich mal wieder ^^

folgendes Problem, ich hab eine Main Navi, in einem Menüpunkt soll es 3 Ebenen geben. Soweit sogut. Bis zur 2. Ebene is alles kein Pronlem.

Bei der 3. hab ich das Problem. Wenn ich auf Ebene 1 gehe, blendet sich Ebene 2 ein, und leider auch ebene 3 aber falsch formatiert.
Geh ich auf Ebene 2 blendet sich Ebene 3 mit der richtigen Formatierung ein.

hier mal die dazugehörigen codde schnippsel:

Code:
 ul#navi {
	position:relative;
	z-index:6;
	top: 5px;
	left:20px;
	width:960px;
	display:block;
	height: 25px;
	list-style: none;
	text-align:center;}
	
 ul#navi li {
	padding: 0 15px 0 0;
	float: left;
	width: 8.5em;
list-style-type: none;	
}
 ul#navi li ul {
	left:-9999px;
	position:absolute;
	background-color:#ecebeb;
text-decoration: none;}
 
 ul#navi li:hover ul{
	left:auto;
	margin-top: 0px;
	margin-left: 45px;
	padding-left: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	width:50px;
	text-align: left;
	
	}
 ul#navi li a {
	color:#807f7f;
	text-decoration:none}
 ul#navi li a:hover{
	color: #F00;
	text-decoration: none;
	}
	
	
/*---------------------------------*/
ul#navi li ul li ul{
	left:-9999px;
	position:absolute;
	background-color:#ecebeb;
text-decoration: none;}

ul#navi li ul li:hover ul{
	left:auto;
	margin-top: 0px;
	margin-left: 10px;
	padding-left: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	width:200px;
	text-align: left;
	
	}

Html:

HTML:
<ul id="navi">
<li><a href="#">Home</a></li>
            <li><a href="#">Termine</a></li>
            <li><a href="#">Geschichte</a></li>
                <li><a href="#">Bilder</a>
                	<ul>
                		<li ><a href="#">2011</a>
                       
                    		<ul>
                                <li><a href="#">Koasamandl 2011</a></li>
                                <li><a href="#">Kindercup St.Martin 2011</a></li>
                                <li><a href="#">Zwergerlrennen Unken 2011</a></li>
                             </ul>
                             </li>
                     </ul>
                </li>
<li><a href="#">Funktionäre</a></li>
                <li><a href="#">Sponsoren</a></li>
          </ul>

Wie bekomme ich es jetzt hin das sich eben die 3. Ebene mit den Links zu den einzelnen Gallerien nicht schon mit einblendet wenn ich auf Bilder gehe, sondern erst wenn ichz.B auf 2011 gehe.
Es sollen dann noch mehrere Folgen, für die vergangenen Jahre.
 
Zuletzt bearbeitet:

ackermaennchen

Normalo

Teammitglied
AW: Hilfe bei drop-down Menu

Erstmal noch Danke für den Tipp, bin leider seid dem Zeitzpunkt nicht mehr dazu gekommen das Projekt weiterzumachen. Deswegen hab ich mich hier auch lange nicht gemeldet ^^

Werd es aber die Tage mal genauer anschauen.
 

ackermaennchen

Normalo

Teammitglied
AW: Hilfe bei drop-down Menu

Ich kram den Thread jetzt nochmal raus, da ich nicht nochmal n neuen aufmachen möchte.

Nachdem ich nun geschafft habe die Navigation der Seite auf php umzustellen
hab ich spaßeshalber die Seite in Safari getestet.

Nachdem in Iexplrer und Firefox alles korrekt dargestellt wird, wandert der Content in Safari einfach so nach oben.

Nach 2 tägiger Fehlersuche bin ich nun am verzweifeln. Validierung des Markup und der Css brachten keine Fehler. Verschiedene Änderungen von padding, margin und position brachten auch nicht die Lösung. Google hat mir leider auch nix verwertbares ausgespuckt.

Also bleibt ihr mein letzter Rettungsanker.

Ich poste hier mal den Link zur Seite:



hier nochmal die css:

Code:
@charset "utf-8";
/* CSS Document */


	
*{
	margin:  0 ;
	padding:0;
	border: 0;
	}
	
body{
	background: #faf9f9;
	font-size: 0.9em ;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#807f7f;}
	
.noBorder {
	border:0!important;
	}
.noMargin {
  margin: 0!important;
  }  
.notetxt {
	text-indent: -9999px;
	font-size:1px;
	overflow:hidden;
	color:#CCC;
	top: 40px;
	}
.clear {
	float:none;
	clear:both;
	}	
	
	h1 a {position: absolute;
	height: 80px;
	width: 315px;
	margin: -70px 0 0 0;
	padding: 0 0 0 50px;
	
	}
/*----- Header ---*/
#sidewrap {
	width:963px;
	margin: auto;
	position: relative;}

div#HeaderContainer {
	width: 960px;
	margin: auto;
	position:relative;
	} 
	
div#HeaderContainer div#Header {
	position:relative;
	width: 960px;
	height: 255px;
	background-image:url(../images/header_bg.jpg);
	margin:auto;
	
}

 div#logo {
position:relative;
width: 360px;
height:80px;
  z-index: 5;
  margin:-170px 0 0 0 ;
  padding: 0px 0 0 20px;}

div#HeaderContainer div#Header .slideshow img{
	position:absolute;
	z-index:1;
	border:none;
	width: 946px;
	height: 218px;
	padding: 0 0 0 7px;
	}
	
 ul#navi {
	position:relative;
	z-index:6;
	top: 5px;
	left:20px;
	width:960px;
	display:block;
	height: 25px;
	list-style: none;
	text-align:center;}
	
 ul#navi li {
	padding: 0 15px 0 0;
	float: left;
	width: 8.5em;
list-style-type: none;

}
 ul#navi li ul {
	 
	display:none;
	position:absolute;
	background-color:#ecebeb;
text-decoration: none;
 border-bottom:thin;
	 border-bottom-color:#000;
	 border-bottom-style:outset;
}
ul#navi li ul li {
	 display:block;
	 border-bottom:thin;
	 border-bottom-color:#000;
	 border-bottom-style:outset;
	 width: 30px;
	}
 
 ul#navi li:hover ul{
	display:block;
	margin-top: 0px;
	margin-left: 45px;
	padding-left: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	width:5%;
	text-align: left;
	
	}
 ul#navi li a {
	color:#807f7f;
	text-decoration:none}
 ul#navi li a:hover{
	color: #F00;
	text-decoration: none;
	}
	
ul#navi li ul li ul{
	left:-9999px;
	position:absolute;
	
text-decoration: none;
display:block;

	 border-bottom:thin;
	 border-bottom-color:#000;
	 border-bottom-style:outset;
	 width:130px;
}
ul#navi li ul li ul li{
	display:block;
	 border-bottom:thin;
	 border-bottom-color:#000;
	 border-bottom-style:outset;
	 width:140px;
	 margin-left: -8px;
	}

ul#navi li ul li:hover ul{
	left:auto;
	margin-top: -20px;
	margin-left: 48px;
	 background: #ecebeb;
	padding-top: 10px;
	padding-bottom: 10px;
	width:150px;
	text-align: left;
	display:block;
	 
	
	}
 ul#navi li ul li ul a {
	color:#807f7f;
	text-decoration:none;
	display:block;}
 ul#navi li a:hover{
	color: #F00;
	text-decoration: none;
	display:block;
	}	
/*---------------------------------*/

div#Contentbox {
	position:relative;
	width: 960px;
	margin: auto;
	height:auto;
	min-height: 250px;
	background:url(../images/content_bg.jpg) 0 0  repeat-y;
	z-index: -999;
}
	
div#content {
	position:relative;
	width: 900px;
	margin:  10px 0 0 0;
	padding: 60px 30px 50px 30px;
	text-align: left;
	z-index: 5;
	display:block;
	height:auto;
	
	}
	
a {
	text-decoration:none;
	color:#807f7f;}	
a:hover {
	text-decoration:none;
	color:#F00;}
/*---------------------------------*/


div#footer {
	background:url(../images/footer_bg.jpg) 0 0 no-repeat;
	margin: 0 auto;
	width: 960px;
  height: 130px;}
 
div .column {
	float:left;
	width: 100px;
	margin: 33px 0 0 145px;
	font-size: 9.01pt;}
div .column2{
	float:left;
	width: 100px;
	margin: 33px 0 0 10px;
	font-size: 9.01pt;
	}
div .facebook {
	float:left;
	width: 48px;
	margin: 33px 0 0 10px;
	font-size: 11.01pt
	}

sicherheitshalber noch das markup
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
 
<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
     $('.slideshow').cycle({
 
          fx: 'fade',
          speed:  4500,
		  timeout: 3000,
     });
});
</script>
</head>

<body>
<script type="text/javascript" src="http://sc.lofer.at/stat/track.php?mode=js"></script>
<noscript><img src="http://sc.lofer.at/stat/track_noscript.php" border="0" alt="" width="1" height="1"/></noscript>

<!-- Beginn Header Container /-->
<div id="HeaderContainer">

	<!-- Beginn Header /-->
  <div id="Header">
    

   	  <div class="slideshow">
      
        <img src="images/slide_1.png" alt=""/>
        <img src="images/slide_2.png" alt=""/>		
        <img src="images/slide_3.png" alt=""/>
        <img src="images/slide_4.png" alt=""/>
      
 
  </div>
       <!-- End Slideschow /--> 
 <ul id="navi">
<li><a href="index.php?page=start">Home</a></li>
            <li><a href="index.php?page=termine">Termine</a></li>
            <li><a href="index.php?page=geschichte">Geschichte</a></li>
                <li><a href="#">Bilder</a>
                	<ul>
                		<li ><a href="#">2011</a>
                       
                    		<ul>
                                <li><a href="index.php?page=sigcup11">Siegerehrung Gesamtwertung</a></li>
                                <li><a href="index.php?page=kicupwai11">Kindercup Waidring</a></li>
                                <li><a href="index.php?page=koasa11">Koasamandl</a></li>
                                <li><a href="index.php?page=kicupstma11">Kindercup St.Martin</a></li>
                                <li><a href="index.php?page=zwergelunk11">Zwergerlrennen Unken</a></li>
                                
                             </ul>
                             </li>
                             
                        <li ><a href="#">2010</a>
                       
                    		<ul>
                                <li><a href="index.php?page=koasa10">Koasamandl</a></li>
                                <li><a href="index.php?page=kicupstma10">Kindercup St.Martin</a></li>
                                <li><a href="index.php?page=zwergelrunk10">Zwergerlrennen Unken</a></li>
                                <li><a href="index.php?page=kicupunk10">Kindercup Unken</a></li>
                                <li><a href="index.php?page=sigcup10">Siegerehrung Gesamtwertung</a></li>
                             </ul>
                             </li>
                       <li ><a href="#">2009</a>
                       
                    		<ul>
                                <li><a href="index.php?page=sigcup09">Kindercup</a></li>
                                
                             </ul>
                             </li>
                     </ul>
                </li>
<li><a href="index.php?page=funktion">Funktionäre</a></li>
                <li><a href="index.php?page=sponsor">Sponsoren</a></li>
          </ul>   
</div>

    <!-- End Header /-->
    <div id="logo"><img src="images/logo.png" alt=""/> <h1><a href="http://sc.lofer.at" title="sc.lofer.at" class="notetxt">skiclub.lofer.at</a></h1></div>
    </div>
    <div class="clear"></div>
<!-- End Header Container /-->
<!-- Beginn ContentContainer /-->
<div id="Contentbox">
 <div id="content">
 <?php
ini_set('display_errors', 1);
if(!isset($_GET['page'])){

$checkpage = "start"; 

}else{

$erlaubt = array( "start" => 1, "termine" => 1, "geschichte" => 1, "sigcup11" => 1, "kicupwai11" => 1, "koasa11" => 1, "kikupstma11" => 1, "zwergerlunk11" => 1, "koasa10" => 1 ); //usw....... 
$checkpage = isset($erlaubt[$_GET["page"]]) ? $_GET["page"] : "start"; 
}
include ($checkpage .".php");
?> 
 </div>
</div>
<!-- End ContentContainer /-->
  <div id="footer">
  <div class="column"> 
    <p>SC Lofer</p>
    <p>Postfach 29</p>
    <p>A 5090 Lofer</p>
  </div>
  <div class="column2">
  <p><a href="#">Impressum</a></p>
  <p><a href="#">Kontakt</a></p>
  <p><a href="#">Sitemap</a></p></div>
  <div class="facebook"><a href="#"><img src="images/facebook.png" alt=""/></a></div></div>
</body>
</html>
 

rockscientist01

Nicht mehr ganz neu hier

AW: Hilfe bei drop-down Menu

hm zu deinem Problem kann ich dir auch nichts sagen, aber ich kann im firefox nicht von Bilder->2011 zu einem Unterpunkt springen, das Menü klappt vorher zu.
Du müsstest auf jeder Ebene die a ansprechen und display:block zuweisen.

Nur ein Tip, hoffe, er hilft.
lieben Gruß
AO
 

Tripstrue

Noch nicht viel geschrieben

AW: Hilfe bei drop-down Menu

so klappt das klappmenü :)
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--  -->
<!-- include Cycle plugin -->
<!--  initialize the slideshow when the DOM is ready -->
<style type="text/css">
 
*{
  margin:  0 ;
  padding:0;
  border: 0;
  }
 
body{
  background: #faf9f9;
  font-size: 0.9em ;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#807f7f;}
 
div#footer {
  background:url(../images/footer_bg.jpg) 0 0 no-repeat;
  margin: 0 auto;
  width: 960px;
  height: 130px;}
 
div .column {
  float:left;
  width: 100px;
  margin: 33px 0 0 145px;
  font-size: 9.01pt;}
div .column2{
  float:left;
  width: 100px;
  margin: 33px 0 0 10px;
  font-size: 9.01pt;
  }
div .facebook {
  float:left;
  width: 48px;
  margin: 33px 0 0 10px;
  font-size: 11.01pt
  }
 
.nav_bar {
  width:75px;
  background-color: #F6F6EE; /* nav bar hintergrund 2px abstand zw. buttons*/
  margin-right:1px;
} 
.nav_bar  li {
  background-color: #E2DDC6;
}
.nav_bar ul {
  list-style: none; margin: 0px; padding: 0px;
} 
.nav_bar a, .nav_bar h2 {
  font: 11px/18px georgia, Verdana,Tahoma, Arial, Helvetica, sans-serif;
  display: block;
  margin:0px 0px;
  padding: 0px 3px;
}
.nav_bar h2 {
  border:0px;color: yellow; background-color:green; text-transform: uppercase;padding:0px 0px;
  text-align:center;
  line-height : 25px;
} 
 
.nav_bar a {
  color: #000; background-color: #E2DDC6; text-decoration: none;
  border-width: 0px; border-style: solid; border-color: #ccc #888 #555 #bbb;
/* rahmen der liste */
  line-height : 25px;
} 
.nav_bar a:hover {
  color: orange;
  background-color: #EAE6D5;
  line-height : 25px;
}
 
.nav_bar li { position: relative;} /* listenbreite */
.nav_bar ul ul {position: absolute; top: 26px; left:0px; width: 100%;}
.nav_bar ul ul, .nav_bar ul li:hover ul ul {display: none;} 
.nav_bar ul li:hover ul, 
.nav_bar ul li:hover ul {display: block;}
 
.nav_bar ul ul ul {position: absolute; top: 0; left: 100%; width: 100% }
.nav_bar ul ul ul, .nav_bar ul ul li:hover ul ul {display: none;} 
.nav_bar ul ul li:hover ul, 
.nav_bar ul ul ul li:hover ul {display: block;}
 
</style>
</head>
<body>
<div id="logo"><img src="images/logo.png" alt=""/> <h1><a href="http://sc.lofer.at" title="sc.lofer.at" class="notetxt">skiclub.lofer.at</a></h1></div>
<div style="float:left;width:200px;"class="nav_bar">      
  <ul>
    <li><h2><a href="index.php?page=start">Home</a></h2></li>
  </ul>  
</div>
<div style="float:left;width:200px;"class="nav_bar">
  <ul>  
    <li><h2><a href="index.php?page=termine">Termine</a></h2></li>
  </ul>
</div>
<div style="float:left;width:200px;"class="nav_bar">
  <ul>
    <li><h2><a href="index.php?page=geschichte">Geschichte</a></h2></li>
  </ul>    
</div>
<div style="float:left;width:200px;"class="nav_bar">
  <ul>    
    <li><h2><a href="#">Bilder</h2></a>
      <ul>
        <li><a href="#">2011</a>
          <ul>
            <li><a href="index.php?page=sigcup11">Siegerehrung Gesamtwertung</a></li>
            <li><a href="index.php?page=kicupwai11">Kindercup Waidring</a></li>
            <li><a href="index.php?page=koasa11">Koasamandl</a></li>
            <li><a href="index.php?page=kicupstma11">Kindercup St.Martin</a></li>
            <li><a href="index.php?page=zwergelunk11">Zwergerlrennen Unken</a></li>
          </ul>
        </li>
        <li><a href="#">2010</a>
          <ul>
            <li><a href="index.php?page=koasa10">Koasamandl</a></li>
            <li><a href="index.php?page=kicupstma10">Kindercup St.Martin</a></li>
            <li><a href="index.php?page=zwergelrunk10">Zwergerlrennen Unken</a></li>
            <li><a href="index.php?page=kicupunk10">Kindercup Unken</a></li>
            <li><a href="index.php?page=sigcup10">Siegerehrung Gesamtwertung</a></li>
          </ul>
        </li>
        <li><a href="#">2009</a>
          <ul>
            <li><a href="index.php?page=sigcup09">Kindercup</a></li>
          </ul>
         </li>
      </ul>
    </li>
  </ul>    
</div>    
<div style="float:left;width:200px;"class="nav_bar">
  </ul>    
    <li><h2><a href="index.php?page=funktion">Funktionäre</a></h2></li>
  </ul>    
</div>
<div style="float:left;width:200px;"class="nav_bar">
  <ul>    
    <li><h2><a href="index.php?page=sponsor">Sponsoren</a></h2></li>
  </ul>    
</div>    
 <div class="clear"></div>
    <!-- End Header /-->
 
 
<!-- End Header Container /-->
<!-- Beginn ContentContainer /-->
<div id="Contentbox">
 <div id="content">
 <?php
?> 
 </div>
</div>
<!-- End ContentContainer /-->
  <div id="footer">
  <div class="column"> 
    <p>SC Lofer</p>
    <p>Postfach 29</p>
    <p>A 5090 Lofer</p>
  </div>
  <div class="column2">
  <p><a href="#">Impressum</a></p>
  <p><a href="#">Kontakt</a></p>
  <p><a href="#">Sitemap</a></p></div>
  <div class="facebook"><a href="#"><img src="images/facebook.png" alt=""/></a></div></div>
</body>
</html>
 
mfg Andi
 

ackermaennchen

Normalo

Teammitglied
AW: Hilfe bei drop-down Menu

Hallo tripstrue, danke für den Codeschnipsel, hab aber dann anders gelöst, in dem ich margin und Padding verändert habe.

das mit dem Safari, nervt mich immernoch, ist jetzt aber nicht so das wichtigste im Moment, da die Seitenstatistic sagt aus das Safari in der Browserliste nicht auftaucht, und bei den verwendeten Betriebssysthemen ist Mac OS X mit 83 Usern bei 2%.

Jetzt aber das nächste Problem :D

ich hab auf den Unterseiten Links zu pdf Datein.
die links sehen wie folgt aus:

HTML:
<p><a href="http://sc.lofer.at/pdf/ausschreibung_tourenschirennen11.pdf">zur Ausschreibung</a></p>

nun lässt sich der Link nicht öffnen, geschweige denn anklicken. Müsste doch eig normal funktionieren oder? die unterseiten sind als php gespeichert (logisch, sonst können sie ja nicht im Content included werden)

Für Lösungsvorschläge bin ich gerne offen :D
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben