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

автор Blackberry Ноябрь 10th 2014, 12:33

Всем добрый день, скажите пожалуйста как в каждом слайдере вставить свой текст.
делал по этому тутореалу https://help.forum2x2.ru/t23987-topic

как установить слайдер быстро понял, и как установить 4-ю и 5-ю картинку в слайдере так же быстро разобрался, но не могу понять как мне в каждый слайдер вставить свой текст, помогите пожалуйста.

забыл дать ссылку на форум ETS2MOD

автор Домовой Ноябрь 10th 2014, 13:50

вместо

Код:: <div id="s1"></div> <div id="s2"></div> <div id="s3"></div>

и т.д.
попробуйте поставить

Код:: <div>ЗДЕСЬ ТЕКСТ В ФОРМАТЕ HTML</div>

автор Blackberry Ноябрь 10th 2014, 17:21

Домовой, благодарю вас, я сейчас проверю и отпишусь.

автор Blackberry Ноябрь 10th 2014, 17:30

Я заменил в этом коде то что вы дали, и то что сказали.

Код:: <div id="one" class="accordion"> <ol> <li> <h2> <span>Название вкладки 1</span> </h2> <div id="s1"> </div> </li> <li> <h2> <span>Название вкладки 2</span> </h2> <div id="s2"> </div> </li> <li> <h2> <span>Название вкладки 3</span> </h2> <div id="s3"> </div> </li> <li> <h2> <span>Название вкладки 4</span> </h2> <div id="s4"> </div> </li> <li> <h2> <span>Название вкладки 5</span> </h2> <div id="s5"> </div> </li> </ol> <noscript> <p>Please enable JavaScript to get the full experience.</p> </noscript> </div>

Это

Код:: <div id="s1"></div>

заменил на это

Код:: <div>ЗДЕСЬ ТЕКСТ В ФОРМАТЕ HTML</div>

картинка исчезает, не текста, не картинки, а просто чёрный фон.

автор Домовой Ноябрь 12th 2014, 12:00

Blackberry пишет:картинка исчезает, не текста, не картинки, а просто чёрный фон.

Текст есть, просто он чёрный и фон чёрный.
Сделайте белый фон.
Замените код что поставили в CSS на этот

Код:: .accordion { text-align:left; font:'Helvetica Neue', Verdana, Arial, sans-serif; } .accordion ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none; } .accordion li > h2 { color: black; font-weight: normal; margin: 0; z-index: 2; position: absolute; top: 0; left: 0; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; } .accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%\9; left: 10%; left: 5%\9; text-align: center; transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .accordion li > h2:hover { cursor: pointer; } .accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; } .accordion noscript p { padding: 10px; margin: 0; background: white; } /****************************************** Basic */ .basic li > h2 { background: #333; color: white; line-height: 1.8em; } .basic li > div h3 { margin: 15px 10px; } .basic li > div p { margin: 10px; font-size: 14px; } /****************************************** Dark */ .dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #fff;box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); } .dark li > h2 { background: #fff; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #fff; } .dark li > h2 span { background: #353535; color: white; } .dark li > h2 b { background: #353535\9; color: #fff; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; } .dark h2.selected span, .dark h2.selected span:hover { background: #434343;background: linear-gradient(top left, #353535 0%, #555555 100%); } .dark h2.selected b { background: #434343\9; } .dark li > div { background: #fff; margin-left: 5px; } /*************************************** Rounded */ .rounded {border-radius: 6px; } .rounded li > h2 span {border-radius: 4px; }

Если хотите оставить фон чёрным а цвет текста белым то найдите в коде строчку

Код:: .dark li > div { background: #030303; margin-left: 5px; }

и замените на

.dark li > div { background: #fff; margin-left: 5px; color: #ffffff; }

где color: #ffffff; и есть цвет текста

Пример ЗДЕСЬ

автор Blackberry Ноябрь 12th 2014, 20:16

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

На слайдере аккордеон написать текст 0832030001415812548

На слайдере аккордеон написать текст 0911186001415812548

автор Домовой Ноябрь 12th 2014, 20:36

Блин, так вам надо что бы и картинка и текст что ли был?

автор Blackberry Ноябрь 12th 2014, 20:59

Домовой, да совершенно верно, и картинка и текст, вернее на картинку, по верх картинке наложить не большой текст, и так со всеми картинками в слайде.

автор Домовой Ноябрь 13th 2014, 06:48

Blackberry пишет:по верх картинке наложить не большой текст

Ну в таком случае оставьте родные дивы

<div id="s1"></div>
<div id="s2"></div>
<div id="s3"></div>

и впишите в них текст

<div id="s1">Ваш текст 1</div>
<div id="s2">Ваш текст 2</div>
<div id="s3">Ваш текст 3</div>

Так же в код CSS верните код для картинок

Код:: #s1 { background:url("http://url_image_1") no-repeat #030303; } #s2 { background:url("http://url_image_2") no-repeat #030303; } #s3 { background:url("http://url_image3") no-repeat #030303; }