• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Drop Down Menü....

B

barney

Neues Mitglied
Komm mit einem Drop Down Menü einfach nicht weiter.

1. Derzeit ist das Dropdown Menü ein "Block", ich möchte aber kleine Abstände zwischen den einzelnen Menüpunkten haben. Wo stell ich das ein?

2. Edit/hat sich erledigt

3. Hat sich ebenfalls erledigt

Hilfe wäre toll....;)

Big Yellow Taxi
Dropdown nur beim Punkt "Media".

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Big Yellow Taxi</title>
<link href="../css/design.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../js/lightbox.js"></script>
<link rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen" />

<script src="../js/flowplayer-3.2.6.min.js"></script>



</head>

<body>
    <div id="wrapper">
        <div id="logo">
        </div>
        <div id="content_leer1">
    
            <div id="menu">
            <ul id="navi">
                  <li><a href="http://www.html.de/index.html"><img src="http://www.html.de/Slices/Bilder/home2.png" class="navi" /></a></li>
                <li><a href="tour.html"><img src="http://www.html.de/Slices/Bilder/tour2.png" class="navi" /></a></li>
                <li><a href="#"><img src="http://www.html.de/Slices/Bilder/media2.png" class="navi" /></a>
                    <ul>
                        <li><a href="tour.html">AUDIO</a></li>
                        <li><a href="#">VIDEO</a></li>
                        <li><a href="#">PICTURES</a></li>
                    </ul>
                </li>
                <li><a href="presse.html"><img src="http://www.html.de/Slices/Bilder/presse2.png" class="navi" /></a></li>
                <li><a href="contact.html"><img src="http://www.html.de/Slices/Bilder/contact2.png" class="navi" /></a></li>
           </ul>
           </div>

        </div>
        <div id="navi_leer">
        </div>
        <div id="navi_left">
            <a href="jazzbrasil.html"><img src="http://www.html.de/Slices/Bilder/jazz.png" class="navi2" /></a>
            <a href="rockpop.html"><img src="http://www.html.de/Slices/Bilder/rock.png" class="navi2" /></a>
            <a href="soulfunk.html"><img src="http://www.html.de/Slices/Bilder/soul.png" class="navi2" /></a>
        </div>
        <div id="content">
            
            <div id="video">
                <a href="http://members.inode.at/0000235959/video/Sequenz 01.f4v" style="display:block;width:425px;height:300px;" id="player"></a>
              <script language="JavaScript">
                    flowplayer("player", "../flowplayer/flowplayer-3.2.7.swf");
                </script>




            </div>
        </div>
        <div id="footer_line">
        </div>
        <div id="footer">
            <div id="navi2">
                <a href="impressum.html">IMPRESSUM</a> | <a href="disclaimer.html">DISCLAIMER</a> | <a href="kontakt.html">KONTAKT</a> | (c)2011
            </div>
        </div>
    </div>

</body>
</html>

Code: 
*{
    margin:0;
    padding:0;
}

body{
    font-family:Verdana, Geneva, sans-serif;
    font-size:0.8em;
    background-color:#000;
    scrollbar-base-color:#f0cf38;
       scrollbar-3d-light-color:#000;
      scrollbar-arrow-color:#000;
      scrollbar-darkshadow-color:#000;
      scrollbar-face-color:#f0cf38;
      scrollbar-highlight-color:#ffed9a;
      scrollbar-shadow-color:#d2ac00;
      scrollbar-track-color:#000;
    behavior:url("../csshover.htc");
}


#wrapper{
    width:850px;     
    margin:0 auto;
    margin-top:40px;
}

#logo{
    background-image:url(../Slices/Bilder/logo.png);
    height:300px;
    width:201px;
    float:left;
}

#content_leer1{
    background-image:url(../Slices/Bilder/content_oben_leer.png);
    width:598px;
    height:300px;    
    float:left;
}

/*#navi{
    width:620px;
    height:31px;    
    float:left;
    margin:269px 0 0 23px;
}*/

a img{
    border:none; 
}

img.navi{
    margin-right:21px; /* Abstände obere Navi */
}        

 
#navi_leer{
    background-image:url(../Slices/Bilder/navi_leer.png);
    width:800px;
    height:17px;
    clear:both;
}

#navi_left{ /* linke Navi */
    width:201px;
    height:102px;
    float:left;
    margin-top:10px;
}

img.navi2{ 
    margin:4px 0 0 30px; /* Abstände linke Navi */
}

#content{
    background-image:url(../Slices/Bilder/Content.png);
    width:615px;
    height:408px;
    float:left;
    color:#FF0;
    margin:10px 0 0 10px;
    overflow:auto;
}


#footer_line{
    background-image:url(../Slices/Bilder/Strich_footer2.png);
    background-repeat:no-repeat;
    width:800px;
    height:8px;
    clear:both;
    margin-left:20px;
    
}

#footer{
    width:800px;
    height:35px;
    margin-left:10px;
    margin-top:5px;
}

#navi2{ /* untere Navi */
    float:right;
    color:#f0cf38;
    font-size:10px;
}

#navi2 a{
    text-decoration:none;
    color:#f0cf38;
}

#pic{
    margin:4px 0 0 12px;
    width:190px;
    float:left;
    border:medium solid #f0cf38;

}

#text{
    width:367px;
    color:#f0cf38;
    float:left;
    margin-left:15px;
}

pic_2{
    border:medium solid #f0cf38;
}

#video{
    margin-left:90px;
}

#menu{
    width:620px;
    height:31px;    
    margin:269px 0 0 23px;
}

#navi, #navi ul { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
}

#navi li { 
    width:9em; 
    float:left;
    position:relative;
}

#navi li ul { 
    display: none;
      position: absolute; 
      top: 2em;
      left: 0;
      background:#f0cf38;
    font-weight:500;
      font-family:Impact;
    font-size:20px;
    letter-spacing:-1px;
    width:140px;
}

#navi li ul a{
    text-decoration:none;
    color:#000;
    padding:5px 0 0 10px;
}

#navi li > ul {
    top: auto;
    left: auto;
    }


#navi li:hover ul { 
    display:block; 
}
 
Zuletzt bearbeitet:
Die <li>'s der Untermenüpunkte sind durch "#navi li" links gefloatet. Das müsstest Du aufheben, dann können die <li>'s auch Breiten annehmen und mittels margin kannst Du dann auch "Lücken" zwischen den Menüpunkten erzeugen.

Ach und wg. dem Player-Problem: schau dich mal nach wmode in Verbindung mit Adobe Flash um.
 
Hab das zweite Problem gelöst, indem ich den Code etwas geändert habe:
Code: 
.menu{
    float:left;
    width:615px;
    height:31px;    
    margin:269px 0 0 5px;
}

#navi {
    float:left;
    position:relative;
    left:50%;
    margin:0 auto;
    padding:0;
    list-style-type:none;
    
} 

#navi ul { 
    list-style-type:none; 
    margin:0; 
    padding:0; 

}


#navi li { 
    float:left;
    position:relative;
    right:50%;
}

#navi li ul { 
    display: none;
      position: absolute; 
      top: 2em;
      left: 0;
      background:#f0cf38;
    font-weight:500;
      font-family:Impact;
    font-size:20px;
    letter-spacing:-1px;
    width:140px;
}

#navi li ul a{
    text-decoration:none;
    color:#000;
    padding-left:80px;
}

#navi li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }


#navi li > ul {
    top: auto;
    left: auto;
    }


#navi li:hover ul { 
    display:block; 
}

Wenn ich hier aber jetzt bei #navi li den Float rausnehme, dann ist die Navileiste wieder vertikal. Geht also nicht.

Das Problem mit dem Video hab ich eben gelöst. THX. ;)
 
Nein, nicht auf #navi li rausnehmen sondern genauer für die Submenüs definieren:

Code: 
#navi li li { float: none; }
 
So, jetzt funktioniert alles, bis auf eine Kleinigkeit. Wieder im IE. Wenn hinter dem Dropdownmenü Text oder ein anderes Objekt ist, "klappt" das Dropdown wieder weg wenn ich in den leeren Bereich, zwischen den Menüpunkten, mit der Maus komme.

Hier zu sehen:

Big Yellow Taxi

Wenn das noch irgendwie weggeht wärs ein Wahnsinn! ;)
 
Hi, bei mir überlappt erst einmal das Video deine Navi, dafür musst du der Navi einen höheren z-index zuweisen (CSS) als dem Container mit dem Inhalt.
Und damit das bei dem Flash element auch geht : Folgenden Param hinzufügen:


Code: 
<param name="wmode" value="transparent">

und dein Script, wo du die swf einbindest noch um "so.addParam("wmode", "transparent");" ergänzen. Also dann so:

Code: 
              <script language="JavaScript">
                    so.addParam("wmode", "transparent");
                    flowplayer("player", "../flowplayer/flowplayer-3.2.7.swf");
                </script>

Das mit dem verschwinden des Dropdowns dürfte eigentlich nicht passieren - eventuell geht es nach der Vergabe von z-index (Dropdown höherer z-index als content).
Aber im normalfall gehts auch ohne, wobei es vielleicht an deinen Fehlern im Code liegt:

Verbesser das am besten erst mal!
 
"Hi, bei mir überlappt erst einmal das Video deine Navi,"

Hmm, also das Problem hab ich eig. gestern schon gelöst. Bei mir überlappt nichts mehr...Welchen Browser benützt du? Bis auf Safari hab ich alle relevanten durchprobiert.

"Das mit dem verschwinden des Dropdowns dürfte eigentlich nicht passieren - eventuell geht es nach der Vergabe von z-index (Dropdown höherer z-index als content)."

Schon versucht. Bringt leider auch nichts.

"Aber im normalfall gehts auch ohne, wobei es vielleicht an deinen Fehlern im Code liegt:"

Öha, na da haben sich aber ein paar gravierende Fehler eingeschlichen gestern Nacht. :oops:
Ist verbessert. Hat auch nichts gebracht.

Hast noch eine Idee? Ich bin mit meinem Latein am Ende...
 
Werde das Problem auch noch auf mediengestalter.info posten. Schreibe das damits kein Problem wegen Crossposting gibt. ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben