|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
29.03.2012, 00:26 | #1 |
Регистрация: 01.06.2011
Сообщений: 5
|
Кнопка по верх картинки в слайдере
Привет, подскажите, может кто то знает как это сделать, я весь день голову ломаю((( делаю сайт http://test.alenova.od.ua в нем слайдер с меняющимися картинками, как можно впихнуть кнопки назад вперед поверх картинок, внутри слайдера, а не под или над ((( Спасибо буду очень признателен
PS Слайдер не плагин. вот код слайдера в индексе Код HTML:
<script type="text/javascript"> featuredcontentglider.init({ gliderid: "canadaprovinces", //ID of main glider container contentclass: "glidecontent", //Shared CSS class name of each glider content togglerid: "p-select", //ID of toggler container remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable selected: 0, //Default selected content index (0=1st) persiststate: false, //Remember last content shown within browser session (true/false)? speed: 500, //Glide animation duration (in milliseconds) direction: "leftright", //set direction of glide: "updown", "downup", "leftright", or "rightleft" autorotate: true, //Auto rotate contents (true/false)? autorotateconfig: [3000, 5] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping] }) </script> <div id="canadaprovinces" class="glidecontentwrapper"> <div class="glidecontent"> <a href="http://jurisprudent.info" border="0"><img src="http://test.alenova.od.ua/test2.jpg" valign="center"></a> </div> <div class="glidecontent"> <a href="http://jurisprudent.info" border="0"><img src="http://test.alenova.od.ua/test1.jpg" valign="center"></a> </div> <div class="glidecontent"> <a href="http://jurisprudent.info" border="0"><img src="http://test.alenova.od.ua/test3.jpg" valign="center"></a> </div> </div> <div id="p-select" class="glidecontenttoggler"> <a href="#" class="prev">Назад</a> <!-- <a href="http://www.zinruss.com/themes/nt-the-childhood-of-eternity.html" class="toc">Анонс № 1</a> <a href="http://www.zinruss.com/themes/nt-science-of-appearances.html" class="toc">Анонс № 2</a> <a href="http://www.zinruss.com/themes/future-tech.html" class="toc">Анонс № 3</a>--> <a href="#" class="next">Вперед</a> </div> Код HTML:
.glidecontentwrapper{ position: relative; /* Do not change this value */ width: 641px; height: 270px; /* Set height to be able to contain height of largest content shown*/ border: 5px solid #d3edfa; overflow: hidden; margin: 10px 0 5px 0; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; padding: 0px; visibility: hidden; width: 621px; } .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 620px; margin-top: 0px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } /* Total contenttoggler width: 350px+5px+5px=360px Or total width of wrapper div (counting wrapper border/padding) */ .glidecontenttoggler a{ /*style for every navigational link within toggler */ display: -moz-inline-box; display: inline-block; border: 1px solid #b6e4fb; background: #f4fbfe; color: #282828; padding: 4px 8px; margin-right: 3px; font-weight: bold; text-decoration: none; font-size: 11px; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; } .glidecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */ background: #e8f6fd; border: 1px solid #01bcf3; color: #282828; } .glidecontenttoggler a:hover{ background: #ffffff; border: 1px solid #01bcf3; color: #01bcf3; } .glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */ } .glidecontenttoggler a.prev, .glidecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */ background: #30559D; border: 1px solid #30559D; color: #ffffff; } .glidecontenttoggler a.prev:hover, .glidecontenttoggler a.next:hover{ background: #01bcf3; border: 1px solid #01bcf3; color: #181818; } |
29.03.2012, 08:52 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Самого кода слайдера то нет, только конфиг.
попробуй пихнуть кнопку в див <div class="glidecontent"> и отформатируй через цсс
Alar, верни репу!
|
29.03.2012, 10:18 | #3 |
Регистрация: 01.06.2011
Сообщений: 5
|
|
29.03.2012, 11:18 | #4 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Что именно? Как кнопку в HTML-верстку добавить?
Alar, верни репу!
|
29.03.2012, 23:34 | #5 | |
Регистрация: 01.06.2011
Сообщений: 5
|
Цитата:
|
|
30.03.2012, 07:23 | #6 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Код:
http://htmlbook.ru/css/top http://htmlbook.ru/css/z-index
Alar, верни репу!
|
30.03.2012, 23:01 | #7 | |
Регистрация: 01.06.2011
Сообщений: 5
|
Код
Цитата:
|
|
31.03.2012, 18:49 | #8 |
Пользователь
Регистрация: 07.02.2012
Сообщений: 95
|
Если я правильно понял то этот div
<div id="p-select" class="glidecontenttoggler" style="display: block;" lastselected="0pg"> <a class="prev" href="#" buttontype="previous" loadpage="2pg">Назад</a> <a class="next" href="#" loadpage="1pg">Вперед</a> </div> нужно вставить в этот <div id="canadaprovinces" class="glidecontentwrapper"> |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
как сделать многослойность в слайдере | vusj | HTML и CSS | 3 | 03.03.2012 15:08 |
Кнопка с изменением ее цвета и картинки | RuVarez | Компоненты Delphi | 2 | 06.05.2011 12:40 |
Кнопка с картинкой (3 состояния) и текст поверх картинки | werrey | Общие вопросы Delphi | 5 | 04.05.2011 21:54 |
КАК разместить FLASh Банер по верх Картинки vBulletin4 | donavi | HTML и CSS | 2 | 15.12.2010 10:12 |
Видео верх ногами | Николай11 | Софт | 2 | 07.01.2010 18:34 |