Баннер загораживает меню

Dioni$$ · December 11, 2009

Здравствуйте!

Верстая выпадающее меню столкнулся с проблемой. Под меню был флеш баннер. И в опере выпадающий список "уходит" под баннер. Мои попытки как-то обойти данную ситуацию ни к чему не привели. Баннер упорно лежит выше менюшки.

В примере я специально спозиционировал меню и баннер так, чтобы было видно наложение. Повторюсь что данный "эффект" хорошо наблюдается в Опере.

Я знаю что можно позиционировать слои с помощью z-index, но применять его на практике мне как-то не удавалось. (это бонус вопрос наверное :rolleyes: )

Вот хтмл

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>menu</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

<div id="page">

<div id="header">

 <div id="banner">
	<center><object width="448" height="60" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"><param value="448" name="width"/><param value="60" name="height"/>
<param value="banner.swf" name="src"/><embed width="448" height="60" src="banner.swf" type="application/x-shockwave-flash"/></object>

<a href="/contacts"><img src="/reklama.gif" alt="TV и Radio Трансляции Онлайн" title="Реклама на портале" WIDTH=468 HEIGHT=60/></a>
</center>
	</div>

	<ul id="topmenu">
	<li id="topmenu_left"></li>
	 <li class="topmenu_center"><a href="/">Главная</a> |</li>
	 <li class="topmenu_center"><a href="/world-tv">Зарубежные ТВ</a> |
			<ul class="submenu-ul">	
			<li class="submenu"><a href="/world-tv">Зарубежные ТВ</a>
			<li class="submenu"><a href="/world-tv">Зарубежные ТВ</a>
			<li class="submenu"><a href="/world-tv">Зарубежные ТВ</a>
			</ul>
	 </li>

	 <li class="topmenu_center"><a href="/rossijskie-tv">Российские ТВ</a> |
			<ul class="submenu-ul">	
			<li class="submenu"><a href="/world-tv">Российские ТВ</a>
			<li class="submenu"><a href="/world-tv">Российские ТВ</a>
			<li class="submenu"><a href="/world-tv">Российские ТВ</a>
			</ul>
	 </li>
	<li class="topmenu_center"><a href="/ukrainskie-tv">Украинские ТВ</a> |
			<ul class="submenu-ul">	
			<li class="submenu"><a href="/world-tv">Украинские ТВ</a>
			<li class="submenu"><a href="/world-tv">Украинские ТВ</a>
			<li class="submenu"><a href="/world-tv">Украинские ТВ</a>
			</ul>
	</li>
		<li class="topmenu_center"><a href="/rossijskie-fm">Российские FM</a> |
			<ul class="submenu-ul">	
			<li class="submenu"><a href="/world-tv">Российские FM</a>
			<li class="submenu"><a href="/world-tv">Российские FM</a>
			<li class="submenu"><a href="/world-tv">Российские FM</a>
			</ul>
		</li>
	<li class="topmenu_center"><a href="/ukrainskie-fm">Украинские FM</a> |
		<ul class="submenu-ul">	
			<li class="submenu"><a href="/world-tv">Украинские FM</a>
			<li class="submenu"><a href="/world-tv">Украинские FM</a>
			<li class="submenu"><a href="/world-tv">Украинские FM</a>
			</ul>
	</li>

<li class="topmenu_center"><a href="/forum">ФОРУМ</a> |</li>
<li class="topmenu_center"><a href="/category/novosti">Новости</a> |</li>
		<li class="topmenu_center"><a href="/help">Инструкция</a></li>
	<li id="topmenu_right"></li>
	</ul>


</div>
</div>

</body>
</html>

и css

/*
Theme Name: Media-Air.ru
Description: This is a free WordPress Theme from semlaguna designed
Author: imPuls
Author URI: http://www.media-air.ru


/*———--Block Level Elements————--*/


html	{
	background: #333333;
	}
Body { 
	margin:0px;
	font: 75%/150% "Trebuchet MS", Tahoma, Arial;
	color:#ffffff;
	background: url(images/bodybg.jpg) repeat-y;
}

a {	color: #FFFFFF;
}

#page { 
	width: 100%; 
	padding:0px;
	margin:0px;
	}


#header {  
	width: 100%;
	height:500px; /*267*/
 	color:#333;
	overflow:hidden;  
	background: url(images/header.jpg) no-repeat;
	border:1px solid red
	posi
}


#topmenu{
	list-style: none;
	height: 28px;
	position: absolute;
	left: 0;
	top: 276px;
	}
#topmenu li, #topmenu li a{
	color: #333;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	}
#topmenu li{
	float: left;
	height: 24px;
	padding-top: 4px;
	}
#topmenu li a{
	text-decoration: none;
	margin: 0 7px 0 8px;
	}
#topmenu_left, #topmenu_right{
	width: 20px;
	}
#topmenu_left{
	background: #fff url(images/topmenu_left_bg.jpg) no-repeat;
	}
.topmenu_center{
	background:#D9E859 url(images/topmenu_center_bg.jpg) repeat-x;
	}
#topmenu_right{
	background: #fff url(images/topmenu_right_bg.jpg) no-repeat;
	}

/* end topmenu*/
.submenu-ul {margin:0;padding:0;display:none;position:absolute;top:26px;}

.submenu  {display:block; position:relative;clear:left;margin:0;padding:0;background:#D9E859;border-bottom:1px solid #454D0D;}
.submenu a {display:block;
		   background:#D9E859;
		   width:111px;
		   height:21px;
		   padding:0 0 0 2px;
		   margin:0;
			}

li:hover ul, li.over ul { 
	display: block; 
	  }
#banner {position:absolute; top:300px; left:50px}

Заранее благодарен любой помощи.

rus · December 11, 2009

<param name="wmode" value="opaque"> :rolleyes:

Dioni$$ · December 11, 2009

Спасибо

<param name="wmode" value="opaque">

Простите - но я не совсем понял как использовать это. :rolleyes:

TonKhaO · December 11, 2009

Простите - но я не совсем понял как использовать это.

ну как как - вставляешь рядом с другими параметрами (PARAM) в теге OBJECT

Dioni$$ · December 11, 2009

Я так и подумал. Но только не помогло :rolleyes:

s0rr0w · December 11, 2009

Я так и подумал. Но только не помогло

Учите матчасть. Поможет.

Dioni$$ · December 12, 2009

Спасибо всем за то что отвечаете. Понимаю что вопрос глупый был.

Окончательное решение нашел здесь

http://forum.htmlbook.ru/index.php?s=&...st&p=107366

Ура :rolleyes:

Sign In

Баннер загораживает меню

Question

Dioni$$

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

rus

Link to comment

Share on other sites

Dioni$$

Link to comment

Share on other sites

TonKhaO

Link to comment

Share on other sites

Dioni$$

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Dioni$$

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information