Skocz do zawartości

rozwijane menu-problem z DIVem

Burn

Przez Burn
w HTML i CSS

Rekomendowane odpowiedzi

Burn Newbie

Burn

Opublikowano
Opublikowano

Witam.

Mam problem z rozwijanym menu. Problem jest z ustawieniem dymku (class="gm_dymek") tak aby pojawiał się tam gdzie bym chciał na stronie (zarowno pod FF jak i IE).

Poniżej wkleje kod. Istotny jest tylko element wewnątrz <div id="kontener">. Elementy na zewnątrz pozostawiłem aby odwzorowały sytuację jaka jest na stronie.

Moim celem bylo wyswietlanie odpowiednich dymków po na jechaniu na napisy "pierwszy" "drugi" "trzeci".

Dymki mialy pojawiac się pod napisami (tak jak w typowym górnym menu). Pod FF wygląda to prawie tak jak chciałem, niestety pod IE dymki są mocno przesunięte w prawo.

Drugim problemem jest to, że pozycje dymka w pionie wymusiłem ustawiając mu top: 123px - co jest rozwiązaniem siłowym. Wolalbym aby dymki wyswietlały się względem pozycji ich nadrzędnego div`a.

Bede wdzięczny za pomoc, bo skończyły mi się już pomysły jak to poprawnie zrobic.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="https://www.w3.org/1999/xhtml" lang="en">
<head>
<script language="JavaScript" type="text/javascript">
function ges(id){
return document.getElementById(id).style;
}
function pokazmenu(id) {
ges(id).visibility = "visible";
ges(id).display = "block";
}
function ukryjmenu(id) {
ges(id).visibility = "hidden";
ges(id).display = "none";
}
</script>
<style type="text/css">
body {margin:0;padding:0;font-family: Arial;}
.gump4 {width:165px;height:21px}
.gm_dymek {visibility:hidden;border:#cccccc 1px solid;z-index:1000;position:absolute;height:220px;background-color:#ffffff;font-size:11px}
.gm_dymek A {text-decoration: none}
.gm_dymek A:hover {text-decoration: underline}
.dymek2{float:left;padding-left:10px}
.fl{float:left}
.fr{float:right}
</style>


</head>
<body>
<div id="cala_strona" align="center">
<div style="height:87px;background-color:brown"></div>

<div style="width:960px;height:32px;">
 <div style="float:left">
	<div style="float:left;font-size:26px;margin-top:12px;width:188px;height:32px"></div>

	<div style="float:left;margin-left:23px;margin-top:16px;width:515px;height:32px">
		<div style="float:left;width:509px;">
			<div id="kontener">


<div class="gump4 fl" onmouseover="pokazmenu('gm1');" onmouseout="ukryjmenu('gm1');" style="background-color: red;">pierwszy 
<div class="gm_dymek" id="gm1" style="width: 200px; top: 123px"> 
	<div class="dymek2">
		<a href="#">a</a><br>
		<a href="#">b</a><br>
		<a href="#">c</a>
	</div>
	<div class="dymek2">
		<a href="#">a</a><br>
		<a href="#">b</a><br>
		<a href="#">c</a>
	</div> 
</div>
</div>

<div class="gump4 fl" onmouseover="pokazmenu('gm2');" onmouseout="ukryjmenu('gm2');" style="background-color: blue;">drugi
<div class="gm_dymek" id="gm2" style="width: 200px; top: 123px;"> 
	<div class="dymek2">
		<a href="#">a</a><br>
		<a href="#">b</a><br>
		<a href="#">c</a>
	</div>
	<div class="dymek2">
		<a href="#">a</a><br>
		<a href="#">b</a><br>
		<a href="#">c</a>
	</div> 
</div>
</div> 

<div class="gump4 fr" onmouseover="pokazmenu('gm3');" onmouseout="ukryjmenu('gm3');" style="background: red;">trzeci 
<div class="gm_dymek" id="gm3" style="width: 200px; top: 123px;"> 
	<div class="dymek2">
		<a href="#">a</a><br>
		<a href="#">b</a><br>
		<a href="#">c</a>
	</div>
	<div class="dymek2">
		<a href="#">a</a><br>
		<a href="#">b</a><br>
		<a href="#">c</a>
	</div> 
</div>
</div>


			</div>
		</div>	
	</div>

 </div>	
</div>


<div style="background-color:black;width:100%;height:100px;margin-top:5px;position:relative;width:960px;"></div>

</div>
</body></html>

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności