Текст поверх слайдер

[bobchinskiy]

Здравствуйте, у меня стоит такой слайдер на сайте Слайдер.

Подскажите как-то реально сделать текст поверх каждой картинки:?

 

Вот слайдер таким образом в HTML выводиться

<div class="sp-slideshow">							<input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />				<label for="button-1" class="button-label-1"></label>								<input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />				<label for="button-2" class="button-label-2"></label>								<input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />				<label for="button-3" class="button-label-3"></label>								<input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />				<label for="button-4" class="button-label-4"></label>								<input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />				<label for="button-5" class="button-label-5"></label>								<label for="button-1" class="sp-arrow sp-a1"></label>				<label for="button-2" class="sp-arrow sp-a2"></label>				<label for="button-3" class="sp-arrow sp-a3"></label>				<label for="button-4" class="sp-arrow sp-a4"></label>				<label for="button-5" class="sp-arrow sp-a5"></label>								<div class="sp-content">					<div class="sp-parallax-bg"></div>					<ul class="sp-slider clearfix">     <li><img src="путь к картинками" height="100%" width="100% alt="" /></li>     <li><img src="путь к картинками" height="100%" width="100% alt="image02" /></li><li><img src="путь к картинками"  height="100%" width="100%" /></li>								</ul>		</div>

Или подскажите такой вариант, сделать картинку под каждое к примеру от 800х600 до 1600х1200 разрешение и написать на ней текст, только подскажите как реализовать , что-бы под каждое разрешение открывалось те картинки что нужны?

[Jey Val Star]

Для этого используйте свойство position со значениями absolute и relative

<li>   <img src="путь к картинками" height="100%" width="100% alt="" />   <div>Ваш текст</div></li><li>   <img src="путь к картинками" height="100%" width="100% alt="image02" />   <div>Ваш текст</div></li><li>   <img src="путь к картинками"  height="100%" width="100%" />   <div>Ваш текст</div></li>

И стили (примерно)

li{    position:relative;}li div{    position:absolute;    top:0; /* отступ сверху */    left:0; /* отступ слева */}

И не надо выдумывать про кучу картинок (или у вас на хостинге место резиновое))))

[bobchinskiy]

Спасибо большое. Прийду домой попробую

Edited January 11, 2015 by bobchinskiy

[bobchinskiy]

  On 1/10/2015 at 9:59 PM, Jey Val Star said:

Для этого используйте свойство position со значениями absolute и relative

<li>   <img src="путь к картинками" height="100%" width="100% alt="" />   <div>Ваш текст</div></li><li>   <img src="путь к картинками" height="100%" width="100% alt="image02" />   <div>Ваш текст</div></li><li>   <img src="путь к картинками"  height="100%" width="100%" />   <div>Ваш текст</div></li>

И стили (примерно)

li{    position:relative;}li div{    position:absolute;    top:0; /* отступ сверху */    left:0; /* отступ слева */}

И не надо выдумывать про кучу картинок (или у вас на хостинге место резиновое))))

Спасибо приспасибо) работает

[bobchinskiy]

  On 1/10/2015 at 9:59 PM, Jey Val Star said:

Для этого используйте свойство position со значениями absolute и relative

<li>   <img src="путь к картинками" height="100%" width="100% alt="" />   <div>Ваш текст</div></li><li>   <img src="путь к картинками" height="100%" width="100% alt="image02" />   <div>Ваш текст</div></li><li>   <img src="путь к картинками"  height="100%" width="100%" />   <div>Ваш текст</div></li>

И стили (примерно)

li{    position:relative;}li div{    position:absolute;    top:0; /* отступ сверху */    left:0; /* отступ слева */}

И не надо выдумывать про кучу картинок (или у вас на хостинге место резиновое))))

Еще вопрос, есть отсуп , а мне нужно что-бы текст центрировался, обычным align-cetner не отделаться, если отступ в процентах указывать, то на разных разрещениях по разному, зависит от длины текса

[bobchinskiy]

Спасибо, откопал на хабре ответ

помогло

  

margin: auto;   top: 50%; left: 50%;    -webkit-transform: translate(-50%,-50%);    -ms-transform: translate(-50%,-50%);        transform: translate(-50%,-50%);

[prezidend]

Попробывал сделать то же самое, но не хочет добовлять текст, он вообще не видет. Что-то делаю не так, подскажите плз. Покрутил даже с этим кодом http://scriptsite.ru/article/show/11/, тоже не получается.

 

<div class="slider-container">
        <div class="mp-slider">
            <ul class="items">
                <li><img src="images/slide-1.jpg" alt=""/></li>
                <li><img src="images/slide-2.jpg" alt=""/></li>
                <li><img src="images/slide-3.jpg" alt=""/></li>
            </ul>
        </div>
    </div>

Edited May 8, 2015 by prezidend