Как установить высоту JQuery FlexSlider с помощью CSS?

Я не очень хорошо разбираюсь в CSS, и у меня есть следующий веб-сайт, который использует структуру CSS BootStrap и подключаемый модуль JQuery FlexSlider для показа верхнего слайд-шоу: http://onofri.org/WP_BootStrap/

У меня есть следующие сомнения по поводу того, как уменьшить высоту слайд-шоу: если с помощью FireBug я уменьшаю значение max-height высоты .flex-viewport, это:

.flex-viewport {
    max-height: 2000px;
    transition: all 1s ease 0s;
}

Я получаю, что высота отображаемой области изображений уменьшается до нового значения (например, 200 пикселей), хорошо, но теперь у меня проблема с тем, что текст, написанный на моих изображениях (представленный диапазоном внутри .flex-caption -text параграф) находится в плохой позиции:

            <div id="main-slider" class="flexslider">
                <ul class="slides">
                    <li>
                        <img src="http://localhost/wordpress/wp-content/themes/AsperTheme/assets/img/flexslider/flex-1.jpg"/>
                        <div class="flex-caption">
                            <p class="flex-caption-text">
                                <span>Lorem ipsum</span>
                                <br>
                                <span>sit dolor</span>
                                <br>
                                <span>adipiscing elitur</span>
                            </p>
                        </div>
                    </li>

Чтобы убедиться, что текст находится в хорошем положении, я думаю, что могу уменьшить значение свойства top класса .flex-caption.

.flex-caption { позиция: абсолютная; справа: 8%; верх: 35%; }

Это хорошее решение или у меня могут быть какие-то другие проблемы (возможно, в браузере, отличном от FireFox)?

Другие сомнения связаны с поведением FireBug, если я выполняю следующие операции:

1) Я меняю значение max-height в.flex-viewportin таким образом:

.flex-viewport {
    max-height: 200px;
    transition: all 1s ease 0s;
}

Как я уже сказал, высота области изображений слайд-шоу уменьшена

2) Я выделяю содержимое одного слайда, ставя курсор мыши на эту строку html:

<ul class="slides" style="width: 1000%; margin-left: -1288px;">

в этом случае FireBug показывает мне синим цветом высоту этой области и мне кажется, что у старого контейнера такая же высота (2000px), почему?

Tnx

Андреа


jquery css twitter-bootstrap twitter-bootstrap-3 flexslider
person AndreaNobili    schedule 23.01.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вместо изменения значения .flex-viewport на max-height: 200px;

Измените значение высоты в .flexslider .slides img в файле flexslider.css, например:

 .flexslider .slides img {
width: 100%; 
height:200px;
display: block; }

это не повлияет на ваш текст, написанный на моих изображениях

person Abin    schedule 17.07.2014