Dynamische Navigationsleiste wird überblendet

Ramires · 13. September 2012

Hallo zusammen

Ich bin in Sachen Programmieren der "lerning by doit" Typ. Und dementsprechen komme ich immer wider an meine Grenzen. (Aber daraus kann mann was lernen :wink: )

Mein Problem
Auf meiner Homepage, bin ich am versuchen eine Seitennavigation aufzubauen. Sie ist noch nicht fertig und funktioniert auch noch nicht richtig, aber die richtung stimmt.
Jedoch habe ich das Problem, das wenn mann mit der Maus über die Navigation geht, die zweite Reihe der Navigation durchsichtig ist. Das heisst der Hintergrund (Text) schimmert durch.
Ich habe alles versucht doch ich komme nicht darauf dies abzustellen, dass heisst die navigation als oberstes Element hinzubekommen.

Kann mir jemand helfen?

Danke im vorraus

Hier der Link: www.s-kohler.ch/JW

Hier sonst noch der Code dazu:

div#Tmenu { font-size: 110%;
width: 10em;
padding: 0.8em;
border: 0px solid white;
background-color:rgba(255, 255, 255, 0); }

* html div#Tmenu {
width: 11.3em;
width: 10em; /* (IE 6 in standards-compliant mode) */
}
ul#Navigation {
margin: 0; padding: 0.8;
text-align: center;
}

ul#Navigation li {
list-style: none;
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li {
margin-right:1.5em; /* Platz fuer Link-Verbreiterung im IE reservieren */
margin-bottom:0;
}

ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 0; left: 9em;
}
ul#Navigation li ul li {
margin: 0; padding-left: 1.4em;
}

ul#Navigation a, ul#Navigation span {
display: block;
width: 7em;
font-family:"Comic Sans MS", "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
text-decoration: none; font-weight:bold;
padding: 0.9em 1em;
border: 1px solid #900;
border-left-color:rgba(255, 255, 255, 0) ; border-top-color:rgba(255, 255, 255, 0) ;
color: black; ;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 9em;
width: 7em; /* (IE 6 in standards-compliant mode) */
}

li a#schwarz {
border-right-color:rgba(0, 0, 0,.4); border-bottom-color:rgba(0, 0, 0,.4);
background-color:rgba(0, 0, 0,.1);
}
li a#schwarz:hover, li a#schwarz2 {
border-left-color:rgba(0, 0, 0,.0); border-top-color:rgba(0, 0, 0,.0);
border-right-color:rgba(0, 0, 0,.4); border-bottom-color:rgba(0, 0, 0,.4);
background-color:rgb(0, 0, 0);
color:white ;
}

li a#grün{
border-right-color:rgba(0, 0, 0,.4); border-bottom-color:rgba(0, 0, 0,.4);
background-color: rgba(0,132,0,.4);
}
li a#grün:hover, li a#grün2 {
border-left-color:rgba(0, 0, 0,.0); border-top-color:rgba(0, 0, 0,.0);
border-right-color:rgba(0, 0, 0,.4); border-bottom-color:rgba(0, 0, 0,.4);
background-color: rgba(0,132,0,.9);

}
li a#blau {
border-right-color:rgba(0, 0, 0,.4); border-bottom-color:rgba(0, 0, 0,.4);
background-color: rgba(0,0,131,.4);
}
li a#blau:hover, li a#blau2 {
border-left-color:rgba(0, 0, 0,.0); border-top-color:rgba(0, 0, 0,.0);
border-right-color:rgba(0, 0, 0,.4); border-bottom-color:rgba(0, 0, 0,.4);
background-color: rgba(0,0,131,.9);
color:white ;
}
li a#gelb {
border-right-color:rgba(0, 0, 0,.4); border-bottom-color:rgba(0, 0, 0,.4);
background-color: rgba(253,253,0,.4);
}
li a#gelb:hover, li a#gelb2 {
border-left-color:rgba(0, 0, 0,.0); border-top-color:rgba(0, 0, 0,.0);
border-right-color:rgba(0, 0, 0,.4); border-bottom-color:rgba(0, 0, 0,.4);
background-color: rgba(253,253,0,.9);
}

li a#orange {
border-right-color:rgba(0, 0, 0,.4); border-bottom-color:rgba(0, 0, 0,.4);
background-color: rgba(251,131,62,.4);
}

li a#orange:hover, li a#orange2 {
border-left-color:rgba(0, 0, 0,.0); border-top-color:rgba(0, 0, 0,.0);
border-right-color:rgba(0, 0, 0,.4); border-bottom-color:rgba(0, 0, 0,.4);
background-color: rgba(251,131,62,.9);
}

li a#rot {
border-right-color:rgba(0,0,0,.4); border-bottom-color:rgba(0, 0, 0,.4);
background-color: rgba(254,0,0,.4);
}
li a#rot:hover, li a#rot2 {
border-left-color:rgba(0, 0, 0,.0); border-top-color:rgba(0, 0, 0,.0);
border-right-color:rgba(0, 0, 0,.4); border-bottom-color:rgba(0, 0, 0,.4);
background-color: rgba(254,0,0,.9);
}

/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover>ul {
display: block;
}
ul#Navigation>li:hover>a {
width: 8.2em;

}

/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
* html ul#Navigation li.hoverIE {
margin-right:0; /* reservierten Platz freigeben */
margin-bottom:-1.15em; /* Fehlerkorrektur, ggfls. anpassen */
}
* html ul#Navigation li.hoverIE ul {
display: block;
}
* html ul#Navigation li .hoverIE {
width: 10.3em;
width: 8.2em; /* (IE 6 in standards-compliant mode) */
}
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

endcore · 13. September 2012

Du hast bei background-color angegeben das dein Hintergrund Transparent wird. Das musst du entfernen. Als beispiel:

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
wird zu

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Man beachte die letzte Zahl bei background-color

Les dir dazu das hier durch:

http://www.css4you.de/background-color.html

EDIT:

Zusätzlich musst du noch einen z-index vergeben. Damit kannst du Elemente in verschiedene Ebenen versetzen.

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Gruß,

Christian

Ramires · 13. September 2012

Danke für die schnelle Antwort...

Hab ich schon versucht. leider nein.
Bei schwarz sieht du dies...

endcore · 13. September 2012

Mein EDIT kam glaube ich etwas zu spät, sorry.

Einfach noch das z-index einbauen, dann klappts wunderbar.

Gruß

Ramires · 13. September 2012

Danke super Sache...
Fragw was ist der z index?

endcore · 13. September 2012

Mit z-index kannst du Elemente in verschiedene Ebenen verschieben.

Einfach mal hier nachlesen:

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index

Gruß

Ramires · 13. September 2012

Danke für alles...

Tolles Board

Grüsse aus der Schweiz

WPDE.org

Dynamische Navigationsleiste wird überblendet

Ramires New Member

endcore Well-Known Member

Ramires New Member

endcore Well-Known Member

Ramires New Member

endcore Well-Known Member

Ramires New Member

Nützliche Suchen

Dynamische Navigationsleiste wird überblendet

Ramires New Member

endcore Well-Known Member

Ramires New Member

endcore Well-Known Member

Ramires New Member

endcore Well-Known Member

Ramires New Member