Rozwijane menu w css i chowanie się rozwiniętego menu pod zawartość strony, z-index nie działa Opcje

[MOniToR]

Strona http://www.goprojects20080129.dev.mamboassistance.com/

Znalazłem proste drop down menu css, wszystko ładnie śmiga tylko dla przykładu jak się najedzie na obrazek, który jest jako pierwszy element menu ucina rozwinięte menu, od momentu gdy nachodzi na cześć z zawartością strony. Kombinowałem z z-index ale nie przyniosło to żadnego efektu :/ Często mi się tak zdarzało w innych projektach, zazwyczaj jednak rezygnowałem z rozwijanego menu ale w tym przypadku tak zrobić nie mogę :/ proszę o pomoc...
CSS:

[HTML] pobierz, plaintext 
#menu {
	background:  url(../images/menu.png) no-repeat top left;
	width:524px;
	height:50px;
	text-align:left;
	float:right;
	z-index:400;
}
 
#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}
 
#cssdropdown li {
float: left;
position: relative;
}
 
.mainitems{
border: 1px solid black;
background-color: #562f2c;
}
 
.mainitems a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
 
}
 
.subuls{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: #562f2c;
border: 1px solid black;
}
 
.subuls li{
width: 100%;
}
 
.subuls li a{
text-decoration: underline;
}
 
#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
 
#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
 
#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}
[HTML] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
<div id="menu"><ul id="cssdropdown">
 
<li class="mainitems">
<a href="http://www.cssdrive.com"><img src="templates/mbpc/images/menu_aboutus.png" alt="" height="20" border="0" /></a>
<ul class="subuls">
<li><a href="">Gordon Mac</a></li>
<li><a href="">Juiced Thoughts</a></li>
<li><a href="">The Daily Flight</a></li>
<li><a href="">GrapeFruit</a></li>
</ul>
</li>
 
<li class="mainitems">
<a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
<ul class="subuls" style="width: 15em">
<li><a href="">CSS2 Generated Content</a></li>
<li><a href="">Custom scrollbar colors</a></li>
<li><a href="">Markerless and "no indent" Lists</a></li>
</ul>
</li>
<li class="mainitems">
<a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
<ul class="subuls" style="width: 15em">
<li><a href="">CSS2 Generated Content</a></li>
<li><a href="">Custom scrollbar colors</a></li>
<li><a href="">Markerless and "no indent" Lists</a></li>
</ul>
</li>
<li class="mainitems">
<a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
<ul class="subuls" style="width: 15em">
<li><a href="">CSS2 Generated Content</a></li>
<li><a href="">Custom scrollbar colors</a></li>
<li><a href="">Markerless and "no indent" Lists</a></li>
</ul>
</li>
<li class="mainitems">
<a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
<ul class="subuls" style="width: 15em">
<li><a href="">CSS2 Generated Content</a></li>
<li><a href="">Custom scrollbar colors</a></li>
<li><a href="">Markerless and "no indent" Lists</a></li>
</ul>
</li>
</ul>
 
<div id="restofcontent">
<br />
 
</div></div>
[HTML] pobierz, plaintext 

Ten post edytował MOniToR 7.02.2008, 12:33:00

[nevt]

oddziel w kodzie i spozycjonuj menu i resztę, czyli w htlm:

[HTML] pobierz, plaintext 
<div id="menu">
  ...
</div>
<div id="restofcontent">
  ...
</div>
[HTML] pobierz, plaintext 

a w css dodaj:

Kod

#menu
{ position: relative; z-index: 10; overflow: visible; }

#restofcontent
{ position: relative; z-index: 1; top: -100px; }
//top ustaw tak żeby ładnie "podeszło" pod menu...

i powinno być ok. chyba że się gdzieś pomyliłem, pisałem z pamięci...

Ten post edytował nevt 7.02.2008, 13:03:51

[MOniToR]

możesz mi powiedzieć o masz na myśli mówiąc oddziel w kodzie html?

[nevt]

a nie widzisz co napisałem? w twoim kodzie div#restofcontent zawiera się wewnątrz div#menu, a w moim kodzie są rozdzielone... (wg DOM: u ciebie są jak rodzic - dziecko, a u mnie jak rodzeństwo.)

dość istotne, bo z-index dotyczy kolejności renderowania elementów na tym samym poziomie drzewa DOM...

[MOniToR]

tylko, że template jest tak zrobiony, że content(zawartość) jest pierwsza w kodzie html i menu jest niżej i chyba przez to dalej nie działa tak jak powinno bo wprowadziłem zmiany o których mówiłeś :/

[HTML] pobierz, plaintext 
<body>
<div id="minHeight"></div>
<div id="outer"> 
<div id="outer2"> 
<div id="outer3"> 
  <div id="centrecontent"> 
    <!--centre content goes here -->
	 <div id="main">
	 <div id="main_start"></div>
	 <div id="main_content"><div class="txt"><?php mospathway() ?>
<?php mosMainBody(); ?>
<?php mosLoadModules('bottom');?></div></div>
	 <div id="main_end"></div>
  </div>
</div>
  <div id="right"> 
    <div id="right_start"></div> 
    <div id="right_main"><div class="txt"><?php mosLoadModules('right');?></div></div>
	 <div id="right_end"></div> 
  </div>
  <div id="clearfooter"></div>
  <!-- ie needs this -->
  <div id="header"> 
    <div id="top"><div id="topmenu"><?php mosLoadModules('top');?></div></div>
	 <div id="menu_leftside"></div>
	 <div id="menu">
 
TUTAJ ZAWARTOŚĆ MENU
 
<div id="restofcontent">
<br />
 
</div><?php mosLoadModules('user3');?> </div>
  </div>
</div>
</div>
<div id="shadow_main_bottom"></div>
  <div id="footer">
  <div id="user1"><div id="user1_a"><?php mosLoadModules('user1');?> </div></div>	
  <div id="user2"><div id="user2_a"><?php mosLoadModules('user2');?> </div></div>		
  <?php mosLoadModules('footer');?>
	 </div>
</div>
<!-- end outer div -->
</body>
</html>
[HTML] pobierz, plaintext 

Ten post edytował MOniToR 7.02.2008, 13:33:03

[nevt]

to zmień template - w czym kłopot ? przesuwasz </div> z linijki zaznaczonej XXX do linijki >>>

[HTML] pobierz, plaintext 
TUTAJ ZAWARTOŚĆ MENU
 
>>>
<div id="restofcontent">
<br />
 
</div><?php mosLoadModules('user3');?> </div>
  </div>
XXX </div>
[HTML] pobierz, plaintext 

i będzie ok.

[MOniToR]

Zrobiłem tak i dalej nic:/

MI się wydaje, że to może przez to, że div z zawartością jest wyżej, przez co jest interpretowany jako ważniejszy i dlatego tak sie dzieje...

http://www.goprojects20080129.dev.mamboass...pc/css/menu.css
http://www.goprojects20080129.dev.mamboass...emplate_css.css
http://www.goprojects20080129.dev.mamboass...late_ie_css.css

Teraz to wygląda tak:

[HTML] pobierz, plaintext 
<body>
<div id="minHeight"></div>
<div id="outer"> 
<div id="outer2"> 
<div id="outer3"> 
  <div id="centrecontent"> 
    <!--centre content goes here -->
	 <div id="main">
	 <div id="main_start"></div>
	 <div id="main_content"><div class="txt"><?php mospathway() ?>
<?php mosMainBody(); ?>
<?php mosLoadModules('bottom');?></div></div>
	 <div id="main_end"></div>
  </div>
</div>
  <div id="right"> 
    <div id="right_start"></div> 
    <div id="right_main"><div class="txt"><?php mosLoadModules('right');?></div></div>
	 <div id="right_end"></div> 
  </div>
  <div id="clearfooter"></div>
  <!-- ie needs this -->
  <div id="header"> 
    <div id="top"><div id="topmenu"><?php mosLoadModules('top');?></div></div>
	 <div id="menu_leftside"></div>
	 <div id="menu">
 
TUTAJ MENU
 
</div>
<div id="restofcontent">
<br />
</div>
 
</div><?php mosLoadModules('user3');?> </div>
  </div>
 
<div id="shadow_main_bottom"></div>
<div id="footer_shadow_top"></div>
  <div id="footer">
  <div id="bottom">
  <div id="bottom_start"></div>	
  <div id="bottom_main"><div id="user1_a"><?php mosLoadModules('user1');?> </div>
	</div>
	<div id="bottom_end"></div>	
	</div>	
    <div id="bottom2">
  <div id="bottom_start"></div>	
  <div id="bottom_main"><div id="user1_a"><?php mosLoadModules('user2');?> </div>
	</div>
	<div id="bottom_end"></div>	
	</div>		
  <?php mosLoadModules('footer');?>
	 </div>
</div>
<!-- end outer div -->
</body>
[HTML] pobierz, plaintext 

Lub live - www.goprojects20080129.dev.mamboassistance.com

Możesz poradzić coś jeszcze? (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[nevt]

kod który ci nie działa - to nie ten sam kod który pokazujesz tu na forum - wystaw gdzieś tą stronkę - wtedy będzie można popatrzeć co naprawdę nie trybi...

a elementy renderowane są przez przeglądarkę w takiej kolejności:

napierw rodzice, potem dzieci (bez względu na z-index) - dzieci są zawsze "nad" rodzicami
bracia według z-index - większy z-index jest "nad" mniejszym
jeśli bracia nie mają z-index (albo mają jednakowe) to według kolejności wystąpienia w kodzie - element później zdefiniowany jest "nad" wcześniej zdefiniowanym

innych reguł nie ma (nie licząc flasha, ramek czy innych plugin'ów)

EDIT:
coś ty wykombinował (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) (IMG:http://forum.php.pl/style_emoticons/default/exclamation.gif)

[HTML] pobierz, plaintext 
<div id="restofcontent">
<br />
</div>
[HTML] pobierz, plaintext 

W <div id="restofcontent"> MUSISZ ZAWRZEć CAŁĄ POZOSTAŁĄ ZAWARTOŚć STRONY (IMG:http://forum.php.pl/style_emoticons/default/exclamation.gif) !

Ten post edytował nevt 7.02.2008, 15:16:53

[MOniToR]

Strona to jest Joomla. Skrypt wziąłem stad http://www.cssdrive.com/index.php/examples...drop_down_menu/

Jaki kod potrzebujesz? Mi się wydaje, że zamieściłem cały odpowiedzialny za ten skrypt...

Edit:

No tak ale jak ja mam o zrobić na takim template jaki mam? Gdybym miał to zrobione tak, że najpierw jest menu a później zawartość to by było łatwo ale na tym to nie wiem...

Ten post edytował MOniToR 7.02.2008, 15:20:43