Forum PHP.pl > [php] Menu poziome w CSS przezroczystość

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [php] Menu poziome w CSS przezroczystość

neslo

17.07.2007, 12:45:11

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

17.07.2007, 14:02:49

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

17.07.2007, 14:34:45

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

17.07.2007, 16:59:03

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

17.07.2007, 17:18:56

może to ci pomoże

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

neslo

17.07.2007, 18:52:08

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

17.07.2007, 19:10:27

Opisałem to na swoim blogu...

ArniPL

17.07.2007, 19:22:14

Neslo, Java to nie to samo co JavaScript

neslo

18.07.2007, 07:57:01

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

!

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 */

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.