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

Problem mit z-index bei navi

D

dergrossekleine

Neues Mitglied
Hallo,

ich habe ein Problem mit meiner Dropdownnavigation.
Die Navigation ließ sich bislang problemlos meinen Wünschen anpassen, aber leider bleibt sie immer vor dem Logo, anstatt dahinter zu verschwinden.
Ich hoffe ich begehe gerade keinen totalen Anfängerfehler, aber ich weiß leider wirklich nicht mehr weiter.


MFG

dergrossekleine



Anbei die CSS- und HTML-Datei
 

Anhänge

Hallo,

ich habe ein Problem mit meiner Dropdownnavigation.
Zum Vergrößern anklicken....
Also ich kann keine Dropdownnavigation entdecken, lediglich eine Horizontale Navigation, die aber nicht zu sehen ist, da du Bilder als Hintergrund verwendest, die uns nicht zur Verfügung stehen. Def.: to drop down - herunterfallen: Bei dir ist nichts was als Menü heunterfallen könnte.

Die Navigation ließ sich bislang problemlos meinen Wünschen anpassen, aber leider bleibt sie immer vor dem Logo, anstatt dahinter zu verschwinden.
Zum Vergrößern anklicken....
Verstehe jetzt dein Problem leider überhaupt nicht. Dein Logo ist im Header über der Navigation.

Ich poste mal deinen Codeabschnitt aus dem HTML (Javascript habe ich rausgenommen, da hier im Moment nicht relevant)
HTML: 
<body>
    
    <div id="Header"> 
    <img id="Logo" src="Bilder/Logo.png" title="Logo Musixx" alt="Logo Musixx" />
    </div>
    
   
    <ul id="navigation">
      <li class="home"><a href=""></a></li>
      <li class="about"><a href=""></a></li>
      <li class="search"><a href=""></a></li>
      <li class="photos"><a href=""></a></li>
      <li class="rssfeed"><a href=""></a></li>
      <li class="podcasts"><a href=""></a></li>
      <li class="contact"><a href=""></a></li>
    </ul>
    
</body>
</html>

Dein CSS:
HTML: 
html {
    margin: 0;
    padding: 0;
}

body {
    background-image: url(../Bilder/4.png);
    margin: 0;
    padding: 0;
    background-color:black;
}
#Header {
    margin-top: 3%;
    width: 100%;
    background-color: #FFF;
    opacity: 0.85;
    z-index: 5;
}
#Logo {
    margin-top: 0%;
    z-index: 6;
}
#Trennlinie {
    margin: 0;
    background-color: #666;
    opacity: 0.8;
}
ul#navigation {
      margin-top: 0;
      padding: 0;
      right: 10px;
      list-style: none;
      width:auto;
      z-index: 4;
      }
ul#navigation li {
    display:inline;
    float:left;
    width:200px;
    margin-right: 5px;
    z-index: 1;
}
ul#navigation li a {
      display: block;
      float:left;
      color:#000000;
      height: 20px;
      width:200px;
      background-repeat:no-repeat;
      padding-top:29px;
      opacity: 0.7;
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); 
      z-index: 1;
}
      
ul#navigation li a:hover{
      background-color:#CAE3F2;
}
ul#navigation .home a{
      background-image: url(/png/settings.png);
}
ul#navigation .about a{
      background-image: url(/png/notes.png);
}
ul#navigation .search a{
      background-image: url(/png/notes.png);
}
ul#navigation .podcasts a{
      background-image: url(/png/ipod.png);
}
ul#navigation .rssfeed a{
      background-image: url(/png/weather.png);
}
ul#navigation .photos a{
      background-image: url(../Bilder/Dozenten.png);
      z-index: 1;
}
ul#navigation .contact a{
      background-image: url(/png/chat.png);
}
Wenn du dein Problem noch mal etwas genauer beschreiben könntest, kümmern wir uns noch mal darum.
 
Entschuldige wenn ich mich nicht klar ausgedrückt habe.
Meine Navigation fährt immer bei mouseover aus.
D.h. Maus darüber und der Button kommt zum Vorschein.
Ich möchte aber das die Buttons, solange sie nicht herausfahren, teilweise Hinter dem Header/Logo verschwinden.
Zurzeit liegen sie auch ohne Mouseover vor dem Logo, das sieht einfach nicht gut aus.
Mein Problem ist, dass ich sie nicht hinter das Logo bekommen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben