Надпись на слайдере ведет себя некорректно

0

У меня проблема с надписью, которую я добавляю в свой слайдер, где при масштабировании страницы высота несовместима. Он не сидит на странице в абсолютном положении. Если я добавлю абсолютную позицию, она исчезнет?

Вот мой код:

<div style="heigt: 500px;">
<div class="callbacks_container">
      <ul class="rslides" id="slider4">
       <li><img src="img/businessbig.jpg" alt="">

       <p class="caption">Welcome to Ashley Tate
            <br />
        Thank you for finding time to visit our website – whether you are looking to purchase or are considering selling your business then we are here to help.
            <br />
    Experience counts for everything in business sales and the principle people at Ashley Tate have each been personally involved in business sales and acquisitions for more than thirty years.
            <br />
        Our approach to business sales is refreshingly different; our objective is to deliver professional advice and guidance borne out of an understanding of the sales process and of the market place. </p>

       </li>

      <!--<li><img src="img/cateringbig.jpg" alt=""></li>
      <li><img src="img/nurseriesbig.jpg" alt=""></li>-->
    </ul>
</div>
 </div>

Heres the css:

.caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none;
  color: #fff;
  background: #000;
  background: rgba(255,255,255, .8);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px;
  margin: 0;
  margin-top:- 400px;
  float: left;
 }

Его, когда они масштабируются в мои медиа-запросы, отображаются на меньших экранах, но подталкиваются под изображение на больших размерах экрана.

  • 0
    <div style="heigt: 500px;"> высота не равна "H"
  • 0
    @CvR Хорошее место - извините за то, что я изменял разметку - это не повлияло на это?
Показать ещё 1 комментарий
Теги:
slider

2 ответа

0

В ваших @media (медиа-запросах) добавьте .caption и попробуйте изменить padding: 10px 20px; или margin-top: -400px; (который также имеет тип "o", если вы посмотрите внимательно). Возможно, вам придется переставить его в своих медиа-запросах, но перестановка позиции переменной в зависимости от того, к какому экрану она относится.

Другая возможность (как говорит @Stuart), другие элементы вокруг используют другую форму position: которая .caption позиционированию вашего элемента .caption.

Удачи!

Поделиться
  • 0
    Я пробовал оба выше и безуспешно - это действительно странно. Я постараюсь подражать моему коду в скрипке.
  • 1
    jsfiddle.net/Qc3hu вот пример - проблема в том, что я не хочу, чтобы он был прикреплен к нижней части окна, но почти плавал, поэтому я могу изменить позицию на каждом слайде или, по крайней мере, иметь это плавание
Показать ещё 7 комментариев
0

Его трудно сказать, не видя остальную часть вашего кода, но обычно это происходит, когда родительский элемент не установлен в position: relative.

Абсолютно позиционированный элемент должен быть относительно родителя. Попробуйте добавить position: relative li

Поделиться
  • 0
    Итак, вот пример jsfiddle.net/Qc3hu, он не хочет, чтобы заголовок был липким в нижней части этого окна, потому что это то, что происходит на моем сайте тоже. Но для того, чтобы он был в том положении, в котором я хочу, чтобы он был - я пытался использовать его и другие методы, но без радости.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню