By
ivanu6kin
Здравйствуйте ! у меня возникла проблема ! Я вставил слайдер и картинки все хорошо по задумке нужно кнопки вставить под слайдер ! а сейчас кнопки навигации на слайдере ! я вписал z-index: -5 кнопки встали нормально только вот они потеряли ссылки ! незнаю как исправить чтоб и кпонки были снизу и ссылками они были! вот код слайдера
/*
* jQuery FlexSlider v1.0 (Release)
* http://flex.madebymufffin.com
*
* Copyright 2011, Tyler Smith
* Free to use under the MIT license.
* http://www.opensourc...mit-license.php
*/
/* Необходимые стили для FlexSlider
*********************************/
.flexslider {
height: 302px;
width: 901px;
margin: 0;
padding: 0;
position: relative;
}
.flexslider .slides li {display: none; list-style-type:none;} /* Скрываем слайды доя загрузки JS. Избегаем дергания изображений */
.flexslider .slides img {
height: 302px;
width: 901px;
display: block;
position: relative;
right: 0;
}
/* Тема по умолчанию для FlexSlider
*********************************/
.flexslider {}
.flexslider .slides li {position: relative;}
/* Стиль заголовков */
.flex-caption {width: 849px;
padding: 3%;
position: absolute;
right: 0;
bottom: -20px;
background: rgba(0,0,0,.3);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
font-size: 15px;
line-height: 18px;
overflow:hidden;
}
/* Навигация */
.flex-direction-nav li a {
height: 94px;
width: 94px;
display: block;
}
.flex-direction-nav li a.next {
background: url(theme/right.png) no-repeat 0 0;
position:absolute;
top: 100px;
left: 860px;
}
.flex-direction-nav li a.prev {
background: url(theme/left.png) no-repeat 0 0;
position:absolute;
top: 100px;
right:860px;
z-index:-5;
}
.flex-direction-nav {
list-style-type:none;}
вот код style.css
/*
Theme Name: plus
Theme URI:
Description: r plus
Version: 1.0
Author:
Author URI:
*/
/*
Css Document
*/
* {padding: 0; margin: 0}
body {
background: #fff;
font-family: Arial, Verdana, sans-serif
}
/*——————————-header———————————*/
.header {
background: #fff;
width: 901px;
margin: 0 auto
}
.header-top {
height: 108px;
width: auto
}
.logo {
height: 85px;
width: 221px;
float: left;
padding: 8px 0 17px 0
}
.contacts {
height: 108px;
width: 635px;
float: right
}
.contacts-first span{
font-family: "Arial black", sans-serif;
font-size: 11px;
font-weight: bold;
padding: 19px 40px 0 0;
color: #1a1a1a;
float: left
}
.contacts-first span h1{
font-family: arial, regular, sans-serif;
font-weight: normal;
font-size: 40px;
color: #808080
}
.contacts-last {
position: relative;
top:16px;
left:35px
}
.contacts-last ul li {
list-style-type:none;
line-height: 15px
}
.contacts-last ul li span {
font-family: arial, sans-serif;
font-size: 11px
}
.contacts-last ul li span a{
font-family: arial, sans-serif;
font-size: 11px;
color:#009245;
text-decoration:underline
}
.contacts-last ul li span a:hover{
font-family: arial, sans-serif;
font-size: 11px;
color:#009245;
text-decoration: none;
}
.contacts-last ul li a {
font-family: arial, sans-serif;
font-size: 18px;
color: #009245;
list-style-type: none;
line-height: 20px;
text-decoration:none
}
/*——————————-menu-nav——————————--*/
.menu {
background: red;
height: 39px;
padding: 2px 0 0 0;
margin: 0 0 20px 0
}
.menu ul li {
float:left;
list-style-type:none;
padding: 0 10px
}
/*——————————menu-end———————————*/
.slider {
width: 901px;
height: 302px;
position:relative;
margin: 0 auto;
background: white;
-webkit-box-shadow:0 1px 4px #818181;
-moz-box-shadow:0 1px 4px #818181;
box-shadow:0 1px 4px #818181;
}
.slider:before,
.slider:after {
content:"";
position:absolute;
z-index:-2;
}
.slider:before {
top:10px;
bottom:10px;
left:0;
right:0;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-border-radius:10px / 100px;
border-radius:10px / 100px;
}
.slider-fon {
position:absolute;
top:240px;
background-color:white;
width:100%;
height:62px;
opacity:0.8;
filter:alpha(opacity=80);
}
.slider-text
{
position:absolute;
top:243px;
left:19px;
width:100%;
color:black;
text-align:center;
padding: 9px 0
}