[php] Menu poziome w CSS przezroczystość, jak wyłączyć przezroczystość!!! Opcje

[neslo]

Problem jest na stronie
http://skierniewice.eu/_olo/index.php

menu w Css jest przezroczyste i niestety przez to jest słaba nawigacja. Po rozwinięciu chciałbym zeby było nad wszystkim a nie pod warstwą w ramce środkowej. Czy ktoś spotkał się z czymś takim podaje moje css

[HTML] pobierz, plaintext 
body {
	background: #EEE; color: #000;
	behavior:  url(csshover.htc);} /* WinIE behavior call */
 
h1 {
	color: #AAA; border-bottom: 1px solid; 
	margin-bottom: 0;}
 
#main {
	color: #CCC;
	margin-left: 10em; 
	padding: 1px 0 1px 5%;
  	border-left: 1px solid;}
 
div#nav {
	float: left; 
	width: 10em;
 	 background: #FF9900;}/* kolor po najechaniu narazie nie pokazuje*/
 
div#nav ul {
	margin: 0; 
	padding: 0; 
	width: 158px; 
	font-size: 16px; 
	background: #9999FF; /*Tu jest kolor tla*/
	background-image: url('../gfx/tlomenupionowe_rogi.gif');
  	border: 0px solid;
	} 
 
 
div#nav li {
	position: relative; list-style: none; margin: 0;
	white-space: nowrap;
	border-bottom: 2px solid #CCC;}   /*tu kolor lini poziomych*/
 
div#nav li:hover {
background: #FF9900;} /*KOLOR BEZ ROZWINIECIA*/
 
div#nav li.submenu {
	background:  url(submenu.gif) 99% 50% no-repeat;}
 
div#nav li.submenu:hover {
	background-color: #336600;} /*KOLOR -> DALEJ*/
 
div#nav li a {
	display: block; 
	padding: 0.5em 0.5em 0.5em;/*odstep GORA, dól , ..*/
 	text-decoration: none; width: 6.5em;}
 
div#nav>ul a {
	width: auto;}
 
div#nav ul ul {
	position: absolute; top: 0; left: 157px;
  	display: none;}
 
div#nav ul.level1 li.submenu:hover ul.level2 {
	display:block;
	font-size: 11px;
	width: 185px;
	background-color: #336600; }
 
div#nav ul.level1 li.submenu:hover ul.level1_2 { /*Menu samorzad poziom2*/
	display:block;
	font-size: 11px;
	width: 175px;
	background-color: #336600; }
 
div#nav ul.level1_2 li.submenu:hover ul.level1_3 { /*Menu samorzad poziom3*/
	display:block;
	position: absolute; top: 0; left: 175px;
	font-size: 11px;
	width: 170px;
	background-image: url('../gfx/tlomenupionowe_rogi.gif'); }	
 
div#nav ul.level1_3 li.submenu:hover ul.level1_4 { /*Menu samorzad poziom3*/
	display:block;
	position: absolute; top: 0; left: 171px;
	font-size: 11px;
	width: 160px;
	background-image: url('../gfx/tlomenupionowe_rogi.gif'); }	
 
 
 
div#nav ul.level2 li.submenu:hover ul.level3 {
	position: absolute; top: 0; left: 185px;
	font-size: 11px;
	width: 185px;
	display:block;}
 
div#nav ul.level3 li.submenu:hover ul.level4 {
	font-size: 11px;
	width: 185px;
 
	display:block;}
[HTML] pobierz, plaintext 

---
Proszę następnym razem używać BB Code,
a także dodawać tag do tematu ( Przedszkole ).
/ Poprawiłem
---
~strife

[ArniPL]

Menu nie jest przezroczyste tylko jest warstwą poniżej warstwy z newsami.
Do klasy submenu dodaj z-index: 2;

Kod

.submenu {
z-index: 2;
}

[neslo]

Menu faktycznie wstawiam jako warstwę poleceniem <div id="nav"> .....itd ale w środkowym okienku mam stronkę w php czyli poprzez polecenie <? include ............... Czy mam dodać do klasy submenu to co mi napisałeś i powinno grac?

Dodałem to tej klasy css twój kod

.submenu {
z-index: 2;
}

i pomogło zajefajnie. Dziękuje GURU. Dobrze że jest się od kogo nauczyć. Jesteś Big

pyt1. To jak już pytać Jak zablokować pozycję tej warstwy z menu żeby nie zjeżdżała do dołu po rozwinięciu <<więcej ?
Pyt2. Czy ma ktoś gotowe rozwiązanie na menu w poziomie. Robicie to w CSS czy JAVA?

To moje sprawia mi kłopoty ale walczę będę walczył

[ArniPL]

ad pyt1. Można jakoś jaśniej?
ad pyt2. Zwykle w CSS + JavaScript, gotowca nie mam.

PS. Ta strona u mnie w miarę normalnie wygląda tylko na Operze. Na Firefoksie i IE się sypie.

[Qvazar]

może to ci pomoże

ftp://ftp.helion.pl/przyklady/cssods.zip

Ten post edytował Qvazar 17.07.2007, 17:21:10

[neslo]

Proszę was dajcie mi jakiś przykład menu poziomego w javie i Css bo moje samo w css sprawia mi za dużo problemów

[Ziels]

Opisałem to na swoim blogu...

[ArniPL]

Neslo, Java to nie to samo co JavaScript

[neslo]

Dziekuje wszystkim za poradę. Wykorzystałem menu na stronce http://code.gosu.pl/ Zapoznam się na pewno ze wszystkimi propozycjami. Powoli mi sie rozjaśnia w mojej makówce. Dziękuje Wam - nigdy na naukę nie jest za późno. jestem mądrzejszy o kolejne doświadczenie. TYm którzy chcą podobne menu na swojej stronki odsyłam do linku http://code.gosu.pl/ lub linki kolegów. Temat wyczerpany

Teraz wszystko gra tylko po przetestowaniu pod różnymi przeglądarkami jest różnie. Firefox wyświetla poprawnie. Tzn Warstwa menu jest nad newsami. IE niestety nie wyswietla poprawnie. Obie warstwy są widoczne --POMOCY (IMG:http://forum.php.pl/style_emoticons/default/exclamation.gif) !

http://skierniewice.net.pl/_olo/index.php

Mój CSS

Kod

.ddmx {
    font: 11px tahoma;
    }


.ddmx .item1,
.ddmx .item1:hover,
.ddmx .item1-active,
.ddmx .item1-active:hover {
       padding: 3px 20px 3px 20px;
    border-bottom: 1px solid #cccccc;
    background: #000000;
    background-image: url('../gfx/tlomenupionowe_rogi.gif');
    background-repeat: no-repeat;
    font: 12px arial;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    position: relative;
}
.ddmx .item2,
.ddmx .item2:hover,
.ddmx .item2-active,
.ddmx .item2-active:hover {
    padding: 3px 8px 4px 8px;
    font: 11px tahoma;
    color: #000000;
    font-weight: bold;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    position: relative;
    z-index: 500;
}
.ddmx .item2 {
    background: #e5e1da;
    background-image: url('../gfx/tlopionowe3.gif');
}
.ddmx .item2:hover,
.ddmx .item2-active,
.ddmx .item2-active:hover {
    background: #ffffff;
    background-image: url('../gfx/tlopionowe3r.gif');
}
.ddmx .arrow,
.ddmx .arrow:hover {
    padding: 3px 16px 4px 8px;
}
.ddmx .item2 img,
.ddmx .item2-active img{
    position: absolute;
    top: 4px;
    right: 1px;
    border: 0;
}
.ddmx .section {
    border: 1px solid #b8b4ae;
    position: absolute;
    visibility: hidden;
    z-index: -1;
}

.ddmx .bottom,
.ddmx .bottom:hover {
    border-bottom: 1px solid #000000;
}

* html .ddmx td { position: relative; } /* ie 5.0 fix */