Как правильно прописать z-index?

RAZORG1991

Захожу иногда
349
6 / 0

Как правильно прописать z-index?

« : 04.10.2012, 23:46:43 »

Доброго времени суток уважаемые форумчане

Помогите решить проблему !
Как правильно прописать z-index: есть горизонтальное меню с выпадающи

Код

#menu{
	font-size:16px;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:0;
	padding:0px;
	margin-top:45px;
	width:700px;
	height:35px;
	float:right;
}
#menu li{
	float:left;
	margin:0;
	padding:0;
	position:relative;
	width:140px;
	height:35px;
	text-align:center;
	list-style:none;
}
#menu li ul{
	display:none;
	padding:0;
	margin:0;
	position:absolute;
	width:140px;
}
#menu li ul li{
	float:none;
	height:35px;
	width:140px;
	margin:0;
	text-align:center;
	background:#C06;
}
#menu li a{
	display:block;
	width:140px;
	height:35px;
	text-decoration:none;
}
#menu li:hover ul{
	display:block;
}
#menu li:hover{
	background:#093;
}

В шаблоне (сам верстал

) под меню находиться слайдер и получается, что при наведении на пункт меню (в котором есть подпункты), эти подпункты оказываются под слайдером

А нужно наоборот, чтобы подпункты были сверху слайдера
Вот код index.php

Код

<?php
defined('_JEXEC') or die;
JHtml::_('behavior.framework', true);
$app = JFactory::getApplication();
?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/saytostroy/css/template.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/saytostroy/css/menu.css" type="text/css"/>
</head>
<body>
<div id="body"> 
 <div id="contenyer">
        <div id="header">
       <div id="header_content">
             <div id="menu"><jdoc:include type="modules" name="position-0" /></div>
             <div id="logo">logo</div>
       </div>
     </div>
    <div id="slider">
          <div id="slider_content"><jdoc:include type="modules" name="position-1" /></div>
    </div>
     <div id="dop_content">
    <div id="content_1"></div>
    <div id="content_2"></div>
    <div id="content_4"></div>
    <div id="content_3"></div>
     </div>
  <div id="main_content"><jdoc:include type="component" /></div>
 </div>
 <div id="footer">
   <div id="footer_content">
     <div id="footer_content1"></div>
     <div id="footer_content2"></div>
          <div id="schetchik"><jdoc:include type="modules" name="position-2" /></div>
        </div>
 </div>
</div> 
</body>
</html>

А вот код тэмплэйта

Код

html, body{
	margin:0px;
	padding:0px;
	height:100%;
	width:100%;
}
#body{
	margin:0 auto;
	padding:0px;
	height:100%;
	width:100%;
}
#contenyer{
	margin:0px;
	padding:0px;
	padding-bottom:50px;
	width:100%;
	min-height:100%;
}
#blok{
	margin:0;
	padding:0;
	width:100%;
	min-height:200px;
}
#header{
	margin:0px;
	padding:0px;
	background:url(../images/Background.png) left repeat;
	width:100%;
	height:150px;
}
#header_content{
	margin:0px auto;
	padding:0px;
	background:url(../images/Background.png) left repeat;
	width:980px;
	height:150px;
}

#logo{
	margin:0;
	padding:0;
	background:url(../images/Logo.png);
	width:270px;
	height:150px;
}
#slider{
	margin:0;
	padding:0px;
	background:#CC0;
	width:100%;
	height:400px;
	background:url(../images/Fon_slider_mini.png) left repeat-x;
}
#slider_content{
	margin:0 auto;
	padding:0;
	width:980px;
	height:400px;
}
#dop_content{
	margin:0 auto;
	padding:0px;
	margin-top:20px;
	width:980px;
	height:300px;
}
#content_1{
	margin:0px;
	padding:0px;
	width:200px;
	height:250px;
	float:left;
	background:url(../images/Dop_content.png);
	border-radius:10px;
	margin-top:20px;
}
#content_2{
	margin:0px;
	padding:0px;
	width:200px;
	height:250px;
	background:url(../images/Dop_content.png);
	border-radius:10px;
	margin-top:20px;
	margin-left:60px;
	float:left;
}
#content_3{
	margin:0px;
	padding:0px;
	width:200px;
	height:250px;
	border-radius:10px;
	margin-top:20px;
	float:right;
	background:url(../images/Dop_content.png);
}
#content_4{
	margin:0px;
	padding:0px;
	width:200px;
	height:250px;
	border-radius:10px;
	margin-top:20px;
	background:url(../images/Dop_content.png);
	float:right;
	margin-left:60px;
}
#main_content{
	margin:0px auto;
	margin-bottom:10px;
	padding:0px;
	width:980px;
	min-height:150px;
	padding:10px;
}
#footer{
	margin:0px;
	margin-top:-50px;
	padding:0px;
	width:100%;
	min-height:200px;
	background:url(../images/Background.png) left repeat;
}
#footer_content{
	margin:0 auto;
	padding:0;
	width:980px;
	min-height:200pz;
}
#footer_content1{
	margin:0;
	margin-right:40px;
	padding:0;
	background:url(../images/footer1.png);
	width:300px;
	min-height:200px;
	float:left;
}
#footer_content2{
	margin:0;
	margin-right:40px;
	padding:0;
	background:url(../images/Footer2.png);
	width:300px;
	min-height:200px;
	float:left;
}
#schetchik{
	margin:0;
	padding:0;
	background:#309;
	width:300px;
	min-height:200px;
	float:left;
}

Ну и скрин ?php echo $this-

Помогите пожалуйста, не оставьте в беде

[вложение удалено Администратором]

« Последнее редактирование: 10.10.2012, 22:38:47 от RAZORG1991 »

Записан

al-teen

Глобальный модератор
2385
224 / 10
im

Re: Как правильно прописать z-index?

« Ответ #1 : 04.10.2012, 23:51:11 »

Код

#menu li ul{
	display:none;
	padding:0;
	margin:0;
	position:absolute;
	width:140px;
        z-index:9999;
}

Записан

RAZORG1991

Захожу иногда
349
6 / 0

Re: Как правильно прописать z-index?

« Ответ #2 : 05.10.2012, 09:26:16 »

Цитата: al-teen от 04.10.2012, 23:51:11

Код

#menu li ul{
	display:none;
	padding:0;
	margin:0;
	position:absolute;
	width:140px;
        z-index:9999;
}

Спасибо большое )))

Записан

Как правильно писать медиа запрос? Автор web1	Ответов: 4 Просмотров: 2737	20.09.2022, 22:01:21 от darkghost
Можно ли прописать в scss ссылку и установить картинку? Автор vova630	Ответов: 0 Просмотров: 861	02.01.2021, 13:56:09 от vova630
Не работает правильно сайт на хосте Автор Алексей Лоскутов	Ответов: 6 Просмотров: 1893	21.05.2020, 20:23:57 от xpank
Как правильно прописать @media? Автор stendapuss	Ответов: 17 Просмотров: 5028	27.01.2018, 12:02:57 от stendapuss
Как правильно прописать :before чтобы он работал? Автор tao2en	Ответов: 7 Просмотров: 1940	14.03.2017, 15:37:38 от tao2en

Как правильно прописать z-index? - Вопросы по CSS

Новости Joomla

WT Set elements v.1.0.0: плагин поля для RadicalMart

IWS.BY VK app widget - Виджет приложения ВКонтакте для Joomla

SW JProjects v.2.5.0 - компонент каталога цифровых проектов на Joomla

RAZORG1991

Как правильно прописать z-index?

al-teen

Re: Как правильно прописать z-index?

RAZORG1991

Re: Как правильно прописать z-index?

Похожие темы