Jump to content
  • 0

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

Dioni$$

Asked by Dioni$$,

 Share

Question

Dioni$$ Explorer

Dioni$$

Posted
Posted

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

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

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

Я знаю что можно позиционировать слои с помощью 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}

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

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept