Доброго времени суток уважаемые форумчане
Помогите решить проблему !
Как правильно прописать 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-
Помогите пожалуйста, не оставьте в беде
[вложение удалено Администратором]
20.09.2022, 22:01:21