Я новичок в flexslider (http://www.woothemes.com/flexslider) и с трудом получаю контроль над навигацией над изображением слайдера. Я хотел бы, чтобы он находился в правом нижнем углу изображения. Но независимо от того, что я, по-видимому, делаю с стилем, он всегда по умолчанию находится под слайдером. Веб-сайт можно посмотреть здесь: http://dakar.bournemouth.ac.uk/~hmonaghan/
Поблагодарите любую помощь, ура!
HTML:
<div id="header" class="flexslider">
<ul class="slides">
<li>
<div class="slidertext-holder">
<div class="slidertext">
<h1>"Donec auctor volutpat lorem, nec cursus augue congue ac. Curabitur malesuada lacinia lorem..."</h1>
<h2>WARREN MOORE</h2>
</div>
</div>
<img src="images/headerfootball.png">
</li>
<li>
<div class="slidertext-holder">
<div class="slidertext">
<h1>"Duis non metus ipsum. Maecenas sit amet risus ut ligula tempus commodo a in justo."</h1>
<h2>SOMEONE ELSE</h2>
</div>
</div>
<img src="images/headerfootball.png">
</li>
<li>
<div class="slidertext-holder">
<div class="slidertext">
<h1>"Luke, I am your father."</h1>
<h2>DARTH VADER</h2>
</div>
</div>
<img src="images/headerfootball.png">
</li>
</ul>
<ol class="flex-control-nav">
<li><a class="active">1</a></li>|
<li><a class="">2</a></li>|
<li><a class="">3</a></li></ol>
CSS:
.ul slides {
margin-bottom:-0.5%;
}
.flex-control-nav {
color:#FFF;
margin-left:20%;
width:35%;
font-family: Proximanova Regular;
position:absolute;
}
.slidertext-holder {
margin-left: auto;
margin-right: auto;
}
.slidertext {
width:35%;
margin-left:55%;
position: absolute;
bottom: 10%;
}
Извините, обновился, чтобы добавить код.
Я думаю, что вы ищете:
.flex-control-nav {
bottom: 20px;
position: absolute;
right: 20px;
text-align: center;
width: auto;
z-index: 1000;
}
если вы работаете с отзывчивым дизайном, вы не можете использовать css для позиционирования элемента управления nav div, который отображается под слайдом... чтобы переместить элемент управления поверх слайда (например, цикл просмотра слайд-шоу), вам нужно выполнить настройки flexslider ( configuration> media> flexslider), отредактируйте набор параметров и перейдите на вкладки "Дополнительные параметры". Существует поле под названием "Controls container (Advanced)", где вы можете указать класс или идентификатор контейнера для получения элементов управления! Если у вас нет div для использования, добавьте один вручную в заголовок вашего представления ex: и просто укажите.flex-control в поле контейнера управления... Надеюсь, что мои объяснения понятны!
Вам нужно установить z-index
.flex-control-nav
на большое число, т.е. z-index: 1000;
, Таким образом панель управления будет показана сверху слайдера.
Подробнее о z-index: http://www.w3schools.com/cssref/pr_pos_z-index.asp